Description:

Over the last few years, the front-end build ecosystem has been exploding. A new, NPM-centric approach to front-end dependency management and asset building has risen in popularity, with task runners Grunt or Gulp and module packagers like Browserify, Webpack, and RequireJS.

But it can be hard for existing, "legacy" (read: pre-2012) apps, or platforms that have their own, non-JavaScript asset pipeline, to take advantage of these new tools. For example, Rails relies on Sprockets, a Ruby gem, for its asset pipeline.

At Airbnb, we wanted to take advantage of these new tools to modernize the front-end build pipeline or our main Rails app, so we weren't constrained by the limited solution provided by Sprockets. We hoped to gain:

• Frontend dependency management using NPM.
• CommonJS-based modules, which gave us explicit dependency trees versus the implicit, flat, order-matters dependency trees provided by Sprockets.
• Source transforms provided by Browserify, so we could package i.e. .jsx and .hbs files and introduce ES6-to-ES5 transpilation.

This webcast talk will tell a story about the open-source gem called 'sprockets-gulp' that we created to integrate Gulp and Browserify seamlessly into the Sprockets pipeline, and how it allowed us to incrementally convert over 6 years worth of JavaScript to use this modern, NPM-based front-end build pipeline.

About Spike Brehm

Spike Brehm is a Sofware Engineer specializing in rich-client JavaScript apps at Airbnb. In over a decade of experience with JavaScript, he has seen its role on the web morph from novelty to basic building block.

He's currently prototyping the next generation of Airbnb's front end stack, and is busy open-sourcing Rendr: a library for building web applications that run on both sides of the wire, fetching data and rendering views on client and server, built on Backbone.js and Node.js.

You may also be interested in: