Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Throw away Sprockets!!
Search
Tomohiro Hashidate
September 21, 2014
Programming
7
2.9k
Throw away Sprockets!!
SprocketsをNode.jsのエコシステムで置き換えてRailsと組み合わせる話
Tomohiro Hashidate
September 21, 2014
Tweet
Share
More Decks by Tomohiro Hashidate
See All by Tomohiro Hashidate
今改めてServiceクラスについて考える 〜あるRails開発者の10年〜
joker1007
21
12k
rubygem開発で鍛える設計力
joker1007
4
1k
実践Kafka Streams 〜イベント駆動型アーキテクチャを添えて〜
joker1007
3
1.2k
本番のトラフィック量でHudiを検証して見えてきた課題
joker1007
2
1.1k
5分で分かった気になるDebezium
joker1007
1
140
Rustで作るtree-sitterパーサーのRubyバインディング
joker1007
5
1.4k
tree-sitter-rbsで作って学ぶRBSとパーサージェネレーター
joker1007
3
310
Kafka Streamsで作る10万rpsを支えるイベント駆動マイクロサービス
joker1007
7
4.9k
neovimで作る最新Ruby開発環境2023
joker1007
3
4.6k
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
260
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
170
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
480
Flutterで分数(Fraction)を表示する方法
koukimiura
0
120
Serena MCPのすすめ
wadakatu
4
950
dynamic!
moro
10
7.1k
スマホから Youtube Shortsを見られないようにする
lemolatoon
2
440
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2k
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
24
12k
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
110
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
960
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
How to Ace a Technical Interview
jacobian
280
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
GitHub's CSS Performance
jonrohan
1032
470k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
How to Think Like a Performance Engineer
csswizardry
27
2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Transcript
Throw away Sprockets!! Tomohiro Hashidate (joker1007)
in Japanese... Rails の片手間でJS を 書く人のための JS ビルドツー ル入門
Self Introduction Tomohiro Hashidate (joker1007)
Skill Ratio ‒ Ruby/Rails: 6 JavaScript: 3 Scala: 1
Sprockets is not required now Let's use ecosystem of JavaScript
Why JavaScript Ecosystem? Libraries version control alt‒JS handling More general
technique, Not specialized for Rails
How do you update JS Libraries?
Ruby way or manual *‒rails gem git submodule Or Manual
?
JavaScript Package Manager npm bower
railsassets.org convert from bower packages to rubygems
altJS is increasing CoffeeScript TypeScript LiveScript scala.js PureScript etc ...
*rails gem cannot fully follow them
I want to learn technique not specialized for Rails.
Sprockets features VS JS Ecosystem
require directive (Sprockets) //= require jquery //= require jquery_ujs //=
require lodash //= require backbone
browserify, webpack enable CommonJS Style require. Command $ npm install
browserify tsify jquery backbone $ browserify -p tsify bundle.ts > bundle.js JS var jQuery = require('jquery'); var Backbone = require('backbone'); TypeScript import jQuery = require('jquery'); import Backbone = require('backbone');
Embed JS libraries and define require function
Compile altJS, Sass And minify assets (Sprockets)
(gulp or grunt) and compiler and livereload npm install coffee-script
tsify gulp-ruby-sass gulp-uglify gulp.task 'browserify', -> browserify(entries: ["assets/ts/bundle.ts"]) .plugin("tsify") .bundle() .pipe(source("bundle.js")) .pipe(streamify(uglify())) .pipe(gulp.dest("public/assets/bundle.js"))
gulp.task 'sass', ['glyphicon'], -> gulp.src(['frontend/assets/stylesheets/**/*.scss', 'frontend/assets/stylesheets/** .pipe(gulp.dest("public/assets/sass")) .pipe(plumber()) .pipe(sass( sourcemap:
true sourcemapPath: "./sass" compass: true bundleExec: true loadPath: [ "./bower_components" ] )).pipe(gulp.dest("public/assets"))
Debugging (sprockets)
Use sourcemap browserify(entries: ["assets/ts/bundle.ts"], debug: true)
digest asset (Sprocets) application-1305b1f70b09d06be2d6e1a074f38a29.js
gulprev and generate manifest.json rev = require("gulp-rev") manifest = require("gulp-rev-rails-manifest")
browserify(....) .bundle() .pipe(streamify(rev())) .pipe(gulp.dest("public/assets")) .pipe(manifest()) .pipe(gulp.dest("public/assets"))
joker1007/gulprevrails manifest Output manifest.json for Rails assets helper
testing (Sprockets)
Use Mocha, power assert espowerify enable power‒assert on browserify. ///
<reference path="../../frontend/assets/typings/tsd.d.ts" /> /// <reference path="../../frontend/assets/typings/power-assert.d.ts" /> import assert = require('power-assert'); import Hello = require('../../frontend/assets/javascripts/hello'); var hello = Hello.hello; var fib = Hello.fib; describe('hello', () => { it('should return "Hello, name"', () => { assert(hello("Name") == "Hello, Name"); }) });
Use test runner testem karma
None
I implemented sample application typescript browserify gulp gulp‒sass gulp‒rev gulp‒rev‒rails‒manifest
jquery backbone, marionette power‒assert
joker1007/rails_browserify_s ample