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.6k
Throw away Sprockets!!
SprocketsをNode.jsのエコシステムで置き換えてRailsと組み合わせる話
Tomohiro Hashidate
September 21, 2014
Tweet
Share
More Decks by Tomohiro Hashidate
See All by Tomohiro Hashidate
Kafka Streamsで作る10万rpsを支えるイベント駆動マイクロサービス
joker1007
7
2.7k
neovimで作る最新Ruby開発環境2023
joker1007
2
2.5k
ReproのImport/Exportを支えるサーバーレスアーキテクチャ
joker1007
1
1.1k
Ruby on Rails on Lambda
joker1007
13
11k
Sidekiq to Kafka ストリームベースのmicro services
joker1007
4
8.5k
令和時代のRails運用
joker1007
35
14k
TracePointから学ぶRubyVM
joker1007
0
1.6k
What a cool Ruby-2.7 is !
joker1007
2
640
How to extend TracePoint
joker1007
2
320
Other Decks in Programming
See All in Programming
Static Analysis Automation for Hunting Vulnerable Kernel Drivers
takahiro_haruyama
1
1.4k
Docker ハンズオン / docker-hands-on
suzukihoge
48
15k
mandaRa: R言語ユーザのための新しい知識共有の場 / mandara_tokyor111
s_uryu
2
410
25 Years of the JCP Program
ivargrimstad
0
1k
Catch Up with Swift 5.10
ojun9
1
450
PHPカンファレンス関西2024でLTとスタッフした
ohmori_yusuke
2
120
Next.js で SPA を構築する際の辛み
hayatow
0
220
ISUCONってなんだか難しそう……!!でも、初めてのISUCONにPHPで挑戦してきました!
kotomin_m
0
260
Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
820
TDDと今まで
kanayannet
0
110
TokyoR#111_ANOVA
kilometer
1
710
PHP 8.3で追加されたjson_validate()を徹底的に深掘りしてみよう
mashirou1234
0
610
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
0
3.2k
Code Reviewing Like a Champion
maltzj
512
39k
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.6k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
Documentation Writing (for coders)
carmenintech
59
3.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
18
1.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
How to name files
jennybc
62
91k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
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