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