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.8k
Throw away Sprockets!!
SprocketsをNode.jsのエコシステムで置き換えてRailsと組み合わせる話
Tomohiro Hashidate
September 21, 2014
Tweet
Share
More Decks by Tomohiro Hashidate
See All by Tomohiro Hashidate
rubygem開発で鍛える設計力
joker1007
3
950
実践Kafka Streams 〜イベント駆動型アーキテクチャを添えて〜
joker1007
3
1.1k
本番のトラフィック量でHudiを検証して見えてきた課題
joker1007
2
1k
5分で分かった気になるDebezium
joker1007
1
130
Rustで作るtree-sitterパーサーのRubyバインディング
joker1007
5
1.3k
tree-sitter-rbsで作って学ぶRBSとパーサージェネレーター
joker1007
3
290
Kafka Streamsで作る10万rpsを支えるイベント駆動マイクロサービス
joker1007
7
4.8k
neovimで作る最新Ruby開発環境2023
joker1007
3
4.5k
ReproのImport/Exportを支えるサーバーレスアーキテクチャ
joker1007
1
1.3k
Other Decks in Programming
See All in Programming
Rancher と Terraform
fufuhu
0
110
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
180
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
390
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
Understanding Ruby Grammar Through Conflicts
yui_knk
1
140
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
240
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
200
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
880
Ruby Parser progress report 2025
yui_knk
1
120
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
730
RDoc meets YARD
okuramasafumi
3
140
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Unsuck your backbone
ammeep
671
58k
Writing Fast Ruby
sferik
628
62k
RailsConf 2023
tenderlove
30
1.2k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Building Adaptive Systems
keathley
43
2.7k
Designing for Performance
lara
610
69k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Scaling GitHub
holman
462
140k
The Cult of Friendly URLs
andyhume
79
6.5k
Speed Design
sergeychernyshev
32
1.1k
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