I went to a great event at Airbnb last week about O2 (their CSS framework) and the evolution of their front-end.
My key takeaways were:
- O2, their front-end CSS framework, is providing a lot of the benefits that we are seeing at Optimizely with LEGO.
- Their infrastructure to test the O2 re-skin internally seemed really neat.
- Visual CSS testing seems like a nice idea, but too difficult at the moment to be worth the time.
Below are some notes from each of the three talks.
“State of the Airbnb front-end” by Spike Brehm of Airbnb
- Introduced SASS and O2, a front-end CSS framework that was initially a fork of Bootstrap.
- Their first JS frameworks were Backbone and Handlebars. This is bad because there was no data-binding.
- Introduced React a few months ago with lots of success.
- They are using flux a bit and liking it so far.
- They ran into a bunch of problems with their Rails assets development so they now use CommonJS and NPM.
- They now use Browserify, but webpack works fine too.
- Isomorphic JS is JS that can be shared between different environments.
- They wanted to run JS on their server for the mobile site so they used Backbone and NodeJS instead of Rails. Server-side JS rendering was much quicker and better for SEO.
- Joel Spolsky said the worst mistake a company can make is to rewrite from scratch.
“Inside the Airbnb Brand Evolution” by Fiona Tay of Airbnb
- Rebranding was not as easy as changing the logo and a few hex codes.
- Dealing with lots of legacy code.
- Quick growth makes it hard to write good code.
- They tested the redesign internally first by having an opt-in button on the website that was only visible to Airbnb admins. They got tons of internal feedback.
- Rolled out O2 to all of the pages before launching the rebrand.
- When they re-skinned O2, they got an instant rebrand.
- O2 killed tons of old CSS.
- They store O2 in a separate repository and import it with NPM. Custom SCSS that O2 doesn’t provide is written in the Airbnb repository, not the O2 repository.
“Implementing a Visual CSS Testing Framework” of @jessicard of Bugsnag
- They wanted to visually test CSS by creating diffs and couldn’t find a good tool, so they created one.
- Added save screenshot function calls in their rspec tests.
- Use BuildKite for their CI.
- Use selenium with Browserstack for the screenshots.
- Use imagemagick to make the diffs.