CSS Frameworks and The Evolution of Airbnb's Frontend

CSS Frameworks and The Evolution of Airbnb's Frontend

Continuing our monthly tech talks the theme this month is front-end engineering. Along with Airbnb engineers, Spike Brehm and Fiona Tay, we welcome Jessica Dillon from Bugsnag!

Please note, programming will now begin at 6:30pm.
Join us for light fare & drinks at 6pm compliments of Airbnb's Kitchen Team.

An RSVP is required to attend. You will receive a confirmation email if you register correctly. Check in for the event promptly closes at 6:45pm, so please be sure to arrive before that. Note that you'll be asked to sign a non-disclosure agreement upon arrival.

We look forward to hosting you into the new year!

If you're joining us for the first time, find out about our upcoming Tech Talks here! Also, follow Airbnb Engineering on Twitter! @AirbnbNerds

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.

O2: The Life of A CSS Framework

In 2012, a small startup added Bootstrap to our site as a stopgap to make things look better. Never could we have expected that in just 3 years, Airbnb would explode and our design would evolve dramatically. But what's stayed constant, helping to keep our code sane, is our internal CSS framework. In this talk, I'll discuss when and why we forked Bootstrap and how maintaining our own system enables beautiful, on-brand design. I'll also discuss how we've rolled out drastic changes for a rebrand and later, a responsive overhaul of a desktop site, using versioning best practices.

Fiona Tay is an engineer on the Core Web team at Airbnb, where she develops strategy and build tooling for the web platform. She's architected engineering strategy for our rebrand across web and email. She's currently working on making airbnb.com responsive. She's a fan of design, performance and testing.

Implementing a visual CSS testing framework

Working with large CSS codebases can be hard. Large-scale refactors, or even just tweaking styles on our more general elements, could end up having unintended consequences on the rest of the site. To catch these problems we would manually check every page on our site, which is a slow and error-prone approach. We needed a better way to test our CSS.

We looked up various ways to test CSS, including trying libraries like Huxley. Although some of it was what we needed, the frameworks ultimately didn't end up integrating well enough for what we wanted to do. After looking at the minimal amount of support each framework was adding, we decided it would be best to rollout our own visual diffing system for our specific needs. We decided to outline a plan that included the components we'd need, and figure out from there the right tools for the job.

In this talk, I'll walk through how we at Bugsnag implemented a visual CSS testing framework using RSpec & Selenium, using automatic screenshot comparison to catch style regressions.

Jessica Dillon is a self taught full-stack software engineer in the heart of San Francisco. She works at Bugsnag, the leading real-time crash detection service for mobile and web applications. Her expertise runs the gamut from developing rich in-browser applications to building service-oriented backends. When not coding or playing games, she likes to hang out with her dog named Boo.

This event is led by an Airbnb community member, and is not an official Airbnb meetup. Airbnb does not endorse any host, community member or unofficial event, and is not responsible for any activities related to unofficial events.

283 People Attending

When
Wed, February 25, 2015 (meetup over)
6:00 PM — 8:00 PM

Where

Airbnb HQ
888 Brannan Street
San Francisco, California 94103
United States


Organizer
Natasha