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.7k
Throw away Sprockets!!
SprocketsをNode.jsのエコシステムで置き換えてRailsと組み合わせる話
Tomohiro Hashidate
September 21, 2014
Tweet
Share
More Decks by Tomohiro Hashidate
See All by Tomohiro Hashidate
Rustで作るtree-sitterパーサーのRubyバインディング
joker1007
5
680
tree-sitter-rbsで作って学ぶRBSとパーサージェネレーター
joker1007
3
170
Kafka Streamsで作る10万rpsを支えるイベント駆動マイクロサービス
joker1007
7
3.1k
neovimで作る最新Ruby開発環境2023
joker1007
2
3.6k
ReproのImport/Exportを支えるサーバーレスアーキテクチャ
joker1007
1
1.2k
Ruby on Rails on Lambda
joker1007
13
12k
Sidekiq to Kafka ストリームベースのmicro services
joker1007
4
8.7k
令和時代のRails運用
joker1007
35
15k
TracePointから学ぶRubyVM
joker1007
0
1.7k
Other Decks in Programming
See All in Programming
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
150
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
380
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
Rubyのobject_id
qnighy
6
1.3k
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
210
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
120
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
310
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
Some more adventure of Happy Eyeballs
coe401_
2
190
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
Side Projects
sachag
451
42k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
Design by the Numbers
sachag
277
19k
A Tale of Four Properties
chriscoyier
155
22k
The Mythical Team-Month
searls
218
43k
Optimising Largest Contentful Paint
csswizardry
30
2.8k
Testing 201, or: Great Expectations
jmmastey
36
7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Web Components: a chance to create the future
zenorocha
308
42k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
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