The Evolution of Airbnb's Frontend
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.
The Evolution of Airbnb's Frontend
- 1. The Evolution of Airbnb’s Frontend ! @spikebrehm
- 3. 1. A Brief History of airbnb.com 2. Modernizing our JavaScript Stack 3. Airbnb&Isomorphic JavaScript
- 4. A Brief History of airbnb.com
- 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
- 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.
- 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 [email protected]
- 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);
- 35. JavaScript code that can be shared between environments.
- 37. +
- 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
- 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