Over the last few years, Airbnb’s frontend architecture has evolved to keep pace with the rapid advancement happening the JavaScript world. Starting as a humble Rails 2 + Prototype.js app in 2008, the frontend stack powering airbnb.com has gone through a few revisions, including a push towards single-page app architecture with Backbone.js and Handlebars.js, an adventure into isomorphic JavaScript with Rendr (our library for using Node.js to server-render Backbone SPAs), and most recently, a move toward React.js and a re-envisioning of our build pipeline to take advantage of CommonJS, ES6, and a Node.js-based transform system. Spike Brehm, software engineer on the @AirbnbNerds team, will walk through how we approached and executed on these changes. Plus, get excited to see a preview of our new approach to isomorphic JavaScript, allowing us to server-render React components from our Rails app. Spike Brehm is a software engineer at Airbnb who specializes in building rich web experiences. As a JavaScript nerd, he has spent the last few years shipping web apps and prototyping Airbnb’s front-end stack, experimenting with “isomorphic JavaScript” — apps that have the flexibility to run on both the client and sever using the same codebase.

1. The Evolution of
Airbnb’s Frontend
!
@spikebrehm

2. Spike Brehm
____________________________
@spikebrehm
!
@AirbnbNerds since 2011

3. 1. A Brief History of airbnb.com
2. Modernizing our JavaScript Stack
3. Airbnb&Isomorphic JavaScript

4. A Brief History of airbnb.com

5. ! airbedandbreakfast.com2008

6. ! airbnb.com2009

7. ! airbnb.com2012

8. ! airbnb.com2015

9. Rails 2.x
MySQL
Vanilla CSS
Prototype.js
!2009

10. Rails 3.x, Java
MySQL, Redis, HDFS,
Postgres, DynamoDB
SASS, O2
jQuery, Backbone,
Handlebars
!2012

11. ! Bootstrap-inspired CSS frameworkO2

12. Rails 3.x, Java, Node.js
MySQL, Redis, HDFS,
Postgres, DynamoDB,
Kafka, RabbitMQ, …
SASS, O2
jQuery, Backbone,
Handlebars, React,
CommonJS, ES6
!2015

13. Modernizing our
JavaScript Stack

14. A. JavaScript Libraries

15. Flight

17. ! Listing management tools

18. Hitting a Wall with
Backbone&Handlebars
Backbone & Handlebars approach falls apart as UI
components become more dynamic.
No data binding, so have to either:
1. Re-render whole view when model changes
(slow, lose DOM state like focused fields).
2. Drop down to manual DOM manipulation.

20. Airbnb <3 React
React makes it easier to build&maintain stateful UI
components.
React makes it easier to reason about data flow in your
app.

23. B. Asset building

24. Sprockets
Rails asset pipeline: manages JavaScripts,
stylesheets, images, etc.
Written by Ruby devs to solve problems of simple
web apps.

25. JavaScript </3 Sprockets
Doesn’t solve JavaScript dependency management:
1. Local dependencies (application code)
2. External dependencies (third-part libraries)

26. /* application.js */
//= require_tree .
/* application.js */
!
//= require ./models/listing.js
//= require ./collections/listings.js
//= require_tree .
What if one file depends on
another?
Bad: Order matters
Bad: Objects attached to `window`
Bad: Implicit dependencies
Local
dependencies

27. $ cp ~/Downloads/backbone.js
app/assets/javascripts/vendor/
backbone-1.1.12.js
/* application.js */
!
//= require vendor/backbone-1.1.12.js
...
//= require_tree .
What if I want to use Backbone?
Bad: Manually download
Bad: Manually versioning
Bad: Implicit dependencies
External
dependencies

28. CommonJS&NPM to the rescue

29. /* collections/listings.js */
var Listing = require(‘../models/listing’);
!
module.exports = ...
Good: Explicit dependencies
Good: Don’t worry about ordering
Good: Objects not leaked to `window`
Local
dependencies

30. /* collections/listings.js */
var Listing = require(‘../models/listing’);
var Backbone = require(‘backbone’);
!
module.exports = Backbone.Collection.extend({
...
});
Good: Central management
Good: Explicit dependencies
External
dependencies
$ npm install --save backbone@1.1.2

31. Explicit Dependencies

32. Browserify*
Use CommonJS syntax in client-side modules:
`require` and `module.exports`.
Package dependencies from NPM.
Transforms.
* or Webpack

33. Browserify Transforms
Handlebars var template = require(‘./templates/user.hbs’);
!
var html = template({name: “Spike”});
es2015 import Header from ‘./Header.jsx’;
!
const numMonths = 36;
!
let photos = users.map((user) => user.photo);

34. Airbnb&Isomorphic
JavaScript

35. JavaScript code that can be shared between environments.

37. +

38. Client-side MVC
Client
Server
Your app API

40. +

41. Client + server MVC
Server
Client
Your app API

42. Performance
Initial pageload speed.
SEO*
Crawlable single-page apps.
Flexibility
Run code anywhere.
Maintainability
Reduce code duplication.

43. Performance

44. Client-rendered app
Download
skeleton
HTML
User sees
content
Download
JavaScript
Fetch data
from API
Evaluate
JavaScript
Exacerbated on mobile: high
latency, low bandwidth

45. Server-rendered app
Download
full
HTML
Download
JavaScript
User sees
content
Evaluate
JavaScript

46. Rendr

47. Moving Away from Rendr
at Airbnb

48. It was revolutionary to share code between
client and server using Node.js…

49. 10%
90%
Rails Node.js
…but too hard to share code between server and server—
between Rails and Node.js.
Long tail of features to
rewrite in JavaScript:
1. CSRF tokens
2. Custom headers, i.e.
CDN
3. Middleware
4. Application code

50. Do we rewrite everything in
Node.js?

51. The single worst strategic
mistake that any software
company can make:
!
Rewrite the code from
scratch.
Joel Spolsky

52. A New Approach to
Isomorphic JavaScript at
Airbnb

53. Browser.
Rails.
App.jsx
Fetch JSON data
Node.js.App.jsx

54. Mystique:
Node.js rendering service
for React components
Allows us to render React components on the server
from within Rails.
Built on Iso, tiny utility for isomorphic bootstrapping of
React components.
https://github.com/goatslacker/iso

55. ! https://www.airbnb.com/getaways/san-francisco A/B testing now

56. Thanks!!
!
@spikebrehm
@AirbnbNerds