Post on 18-Jul-2015
Integrating Browserify and Gulp with Sprockets
@spikebrehm
Integrating Browserify and Gulp with Sprockets
@spikebrehm
Spike Brehm ____________________________
@spikebrehm
@AirbnbNerds
Demo app
github.com/spikebrehm/sprockets-node-example
Sprockets
The Rails asset pipeline. !
Manages assets: JavaScripts, stylesheets, images.
Limitations of Sprockets
Sprockets was written by Ruby developers, not JavaScript developers.
It doesn’t solve the problems of today’s JavaScript developers.
JavaScript dependency management.
1. Local dependencies (application code).
2. External dependencies (third-party libraries).
Local dependencies.
That’s nice, but it doesn’t respect order of files relative to each other.
//= require_tree .
//= require collections/todos.js
//= require models/todo.js
//= require_tree .
Implicit vs explicit dependencies.
Have to manually specify file order, at the top-level.
vs
Each file expressing its own dependencies.
External dependencies.
If I want to add Backbone to my project, I have a few choices:
1. Install a RubyGem.
2. Copy-paste in `vendor`.
1. Install a RubyGem.
$ gem install rails-backbone
Using Ruby to install JavaScript??
Have to wait for gem maintainer to update when new version released.
External dependencies.
2. Copy-paste in `vendor`.
Go to https://github.com/jashkenas/backbone.
Download latest build.
Manually versioning — append `-1.1.2.js` to filename.
External dependencies.
Benefits to NPM
Access to the NPM ecosystem.
$ npm install backbone --save
Install any of the 100k+ modules.
$ ls node_modules/backbone
Benefits to CommonJS
Explicit dependencies.
var Backbone = require('backbone'); var Todo = require(‘./todo'); !var Todos = Backbone.Collection.extend({ model: Todo, … });
Explicit dependencies.
Browserify
Browserify* Use CommonJS to require() modules in the browser.
Browserify* Package dependencies from node_modules into our bundle.
*or Webpack.
Webpack is like Browserify, but with more bells-and-whistles included by default.
Used by Instagram, Facebook, Yahoo!.
Build-time errors
Source maps
Integrating Browserify into Sprockets
Using “Tilt”.
Tilt is the plugin system Sprockets uses to handle .coffee, .sass, etc.
We’ll create custom handler for `.bundle.js` files.
BrowserifyTemplate
class BrowserifyTemplate < Tilt::Template
Shells out to Browserify running in Node.
$ ./script/assets/tasks/bundle.js --path app/assets/ javascripts/commonjs/manifest.bundle.js
Request for `/assets/commonjs/manifest.bundle.js` comes to Rails ->
Sprockets handles request, calls `BrowserifyTemplate` ->
Shells out to `./script/assets/tasks/bundle.js` ->
Calls Browserify, outputs to STDOUT ->
`BrowserifyTemplate` captures STDOUT ->
Hands output back to Sprockets
Enhancing Our Build Pipeline with Browserify Transforms
ES6
We can use the “6to5” project to convert ES6 code into ES5 code.
$ npm install --save 6to5ify
Why Ditch Gulp?
“Why we should stop using Grunt & Gulp”http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/
1. For our Sprockets integration, we just want to output to STDOUT, not to a file.
2. Unnecessary overhead — adds ~75ms to each run.
3. Desire to simplify our build system.
Thanks! !
More resources available at http://spike.technology
!
@spikebrehm @AirbnbNerds