This document discusses integrating Browserify and CommonJS dependency management into Rails' asset pipeline Sprockets. It describes: 1) Limitations of Sprockets for managing JavaScript dependencies and the benefits of using Browserify and CommonJS. 2) How to integrate Browserify into Sprockets using a custom Tilt template that runs Browserify to bundle dependencies. 3) Enhancing the build pipeline to transpile ES6 code using a Browserify transform.

1. Integrating Browserify
and Gulp with Sprockets
@spikebrehm

2. Integrating Browserify
and Gulp with Sprockets
@spikebrehm

3. Spike Brehm
____________________________
@spikebrehm
@AirbnbNerds

4. Demo app
github.com/spikebrehm/sprockets-node-example

5. Sprockets

6. The Rails asset pipeline.
!
Manages assets: JavaScripts, stylesheets,
images.

7. Limitations of Sprockets

8. Sprockets was written by Ruby
developers, not JavaScript developers.
It doesn’t solve the problems of today’s
JavaScript developers.

9. JavaScript dependency management.
1. Local dependencies (application code).
2. External dependencies (third-party libraries).

10. 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 .

11. Implicit vs explicit dependencies.
Have to manually specify file order, at the top-level.
vs
Each file expressing its own dependencies.

12. 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`.

13. 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.

14. 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.

15. Benefits to NPM

16. Access to the NPM ecosystem.
$ npm install backbone --save
Install any of the 100k+ modules.
$ ls node_modules/backbone

17. Benefits to CommonJS

18. Explicit dependencies.
var Backbone = require('backbone');
var Todo = require(‘./todo');
!
var Todos = Backbone.Collection.extend({
model: Todo,
…
});

19. Explicit dependencies.

20. Browserify

21. Browserify*
Use CommonJS to require() modules in the
browser.

22. Browserify*
Package dependencies from node_modules into
our bundle.

23. *or Webpack.
Webpack is like Browserify, but with more bells-
and-whistles included by default.
Used by Instagram, Facebook, Yahoo!.

24. Build-time errors

25. Source maps

26. Integrating Browserify into
Sprockets

27. Using “Tilt”.
Tilt is the plugin system Sprockets uses to handle .coffee, .sass, etc.
We’ll create custom handler for `.bundle.js` files.

28. 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

29. 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

30. Enhancing Our Build Pipeline
with Browserify Transforms

31. ES6
We can use the “6to5” project to convert ES6 code into ES5 code.
$ npm install --save 6to5ify

32. Why Ditch Gulp?

33. “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.

34. Thanks!!
More resources available at
http://spike.technology
!
@spikebrehm
@AirbnbNerds