Dev Chats: Spike Brehm of Airbnb
JavaScript development without a “greenfield app”
Spike Brehm has a habit of popularizing terms in software development. You may have heard of “Isomorphic JavaScript” before; that’s a term he popularized through his work on the Rendr library (though he humbly gave credit to Charlie Robbins for coining the term). In a recent conversation I had with Spike, he made me aware of the concept of a “greenfield app.”
In Airbnb’s case, they have a six-year-old Rails app which is hardly a greenfield to sculpt new code upon. Being instead in a brownfield situation, Spike explained various efforts Airbnb has made to leverage the latest JavaScript tooling while integrating with a legacy Rails app.
CommonJS + Rails
A recent goal of the Airbnb team was to bring CommonJS (Node.js’ module system) into the Rails asset pipeline. Sprockets, the default Rails gem for bundling/serving assets, only processes a flat list of dependencies in an asset manifest and exposes JavaScript code to the global namespace. This is not ideal for larger JavaScript apps which need a more structured dependency tree and encapsulation for how code runs in the browser.
To solve this problem, Airbnb made a Ruby gem for bridging Sprockets and Gulp. This allowed them to leverage the environment-specific asset serving and deployment from Sprockets while using Gulp and Browersify for bundling and dependency management. It’s currently a private gem, but it should be publicly available before too long.
Backbone -> React
Spike also described Airbnb’s new direction for their front-end infrastructure. Since Airbnb began using Backbone in 2011, new libraries have emerged which he believes are compelling enough to reconsider their stack.
In particular Spike has been interested in Facebook’s React.js library. React seems to be a good solution for replacing existing Backbone view code as it is “very well-scoped” according to Spike. It solves the “V” layer in MVC which is typically the most complex part of front-end web apps.
Spike began by describing some of the challenges he has encountered maintaining Backbone code. Backbone subviews and jQuery plugins often modify the app state after a view gets rendered and thereby prevent a full re-render without losing some of that newly added state and incurring a performance hit. Manually syncing state between templates and views also leads developers to write code that asks questions like “Is this DOM element visible?” or “Is this class applied?” which becomes complex to manage in a nested view structure.
While Backbone requires two-way state syncing between templates and views, React provides a unidirectional data flow and a single way to render HTML to the DOM. Instead of writing state transition code, you describe what the DOM looks like given a certain state, and if the state changes, React handles all the corresponding transitions for you.
Airbnb is currently using React in production on airbnb.com/resolutions and in internal apps with the router.js library. They plan on continuing to use it for future front-end development.
Isomorphic JavaScript
Spike informed me that Airbnb plans to stop using Rendr for their mobile website, instead opting for a responsive web design approach going forward. The team concluded that the benefit of sharing JavaScript code between the client and server was outweighed by the amount of re-writing they had to do from Ruby to Node.js in addition to the overhead of maintaining a Node app in production. Some specific examples of the duplicated server code were CSRF logic, cookie setting & parsing, and special HTTP headers that had to be set on all Airbnb apps.
According to Spike, Airbnb’s plan is to eventually create a Ruby gem which would allow their Rails server to communicate over HTTP with a Node process rendering React components. Also, in a greenfield situation when building a new app, Spike’s stack of choice would be an isomorphic JavaScript approach like Rendr. To learn more about isomorphic JavaScript, check out Spike’s talk from JSConf 2014:
Conclusion
Thanks to Spike for taking some time to share what he’s been working on at Airbnb. I look forward to seeing more open source tooling by Airbnb in the future!
