Better front-end performance with Flexbox

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