Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Evolution of Airbnb's Frontend

234,100 views

Published on

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.

Published in: Software, Technology
  • Yes you are right. There are many research paper writing services available now. But almost services are fake and illegal. Only a genuine service will treat their customer with quality research papers. ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I like this service ⇒ www.HelpWriting.net ⇐ from Academic Writers. I don't have enough time write it by myself.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! I have searched hard to find a reliable and best research paper writing service and finally i got a good option for my needs as ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • A professional Paper writing services can alleviate your stress in writing a successful paper and take the pressure off you to hand it in on time. Check out, please ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

The Evolution of Airbnb's Frontend

  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
  16. ! Listing management tools
  17. 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.
  18. 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.
  19. B. Asset building
  20. Sprockets Rails asset pipeline: manages JavaScripts, stylesheets, images, etc. Written by Ruby devs to solve problems of simple web apps.
  21. JavaScript </3 Sprockets Doesn’t solve JavaScript dependency management: 1. Local dependencies (application code) 2. External dependencies (third-part libraries)
  22. /* 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
  23. $ 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
  24. CommonJS&NPM to the rescue
  25. /* 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
  26. /* 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
  27. Explicit Dependencies
  28. Browserify* Use CommonJS syntax in client-side modules: `require` and `module.exports`. Package dependencies from NPM. Transforms. * or Webpack
  29. 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);
  30. Airbnb&Isomorphic JavaScript
  31. JavaScript code that can be shared between environments.
  32. +
  33. Client-side MVC Client Server Your app API
  34. +
  35. Client + server MVC Server Client Your app API
  36. Performance Initial pageload speed. SEO* Crawlable single-page apps. Flexibility Run code anywhere. Maintainability Reduce code duplication.
  37. Performance
  38. Client-rendered app Download skeleton HTML User sees content Download JavaScript Fetch data from API Evaluate JavaScript Exacerbated on mobile: high latency, low bandwidth
  39. Server-rendered app Download full HTML Download JavaScript User sees content Evaluate JavaScript
  40. Rendr
  41. Moving Away from Rendr at Airbnb
  42. It was revolutionary to share code between client and server using Node.js…
  43. 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
  44. Do we rewrite everything in Node.js?
  45. The single worst strategic mistake that any software company can make: ! Rewrite the code from scratch. Joel Spolsky
  46. A New Approach to Isomorphic JavaScript at Airbnb
  47. Browser. Rails. App.jsx Fetch JSON data Node.js.App.jsx
  48. 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
  49. ! https://www.airbnb.com/getaways/san-francisco A/B testing now
  50. Thanks!! ! @spikebrehm @AirbnbNerds

×