Build resilient systems at scale
October 12–14, 2015 • New York, NY

Better front-end performance with Flexbox

Charlie Park (Slack)
3:40pm–4:20pm Tuesday, 10/13/2015
Location: Regent Parlor
Average rating: ****.
(4.43, 7 ratings)

Prerequisite Knowledge

Basic understanding of CSS

Description

You’re a front-end engineer, weary from relying on float:lefts and display:table-cells. You’re also wary of the next big thing, after having gotten excited about “the next big thing” and seeing slow adoption from legacy browsers. It’s time to come in from the cold.

Over the last year, we’ve been exploring ways to make our site (IFTTT.com) faster. One of the techniques we’ve been happily surprised by is the new layout approach in Flexbox. With the more optimized and efficient DOM Flexbox lets you work with, it provides for a better experience all around. Responsive designs are easier to create, and faster to render.

Flexbox gives developers looking to create flexible, responsive layouts a fantastic option. Flexbox is two to three times faster than floats, inline blocks, and display:table-cell. I’ll show some benchmarks (both simplified test suites and real-world layouts), some live examples of Flexbox in action (like at IFTTT.com), and go through a couple of migrations to show how to transition from earlier layout techniques to Flexbox.

Some of the ground I’m planning to cover:

  • Benchmarks comparing Flexbox layouts to more conventional layouts
  • Cross-browser support of Flexbox
  • Rendering times of Flexbox elements and pages versus alternatives
  • Flexbox as a means of optimizing responsive designs with a simpler DOM
  • When is Flexbox NOT the right choice? (So important!)
  • Why “support the current browser version and two versions back” is actually fairly poor for determining your minimum-browser-required floor
Photo of Charlie Park

Charlie Park

Slack

Charlie is an engineer at Slack, where he’s worked on front-end code since September of 2015. That followed a few years at IFTTT, which itself followed a half a decade running a subscription-based SaaS web app. He loves solving problems, reluctantly using code to do so.

Comments on this page are now closed.

Comments

Ronak Rathod
10/20/2015 7:20pm EDT

Hi Charlie,
Can you share the slides?

Stay Connected

Follow Velocity on Twitter Facebook Group Google+ LinkedIn Group

Videos

More Videos »

O’Reilly Media

Tech insight, analysis, and research