The amazing all-new performant Holy Grail app development method

It was with a wry smile and a glass of snarkasm that I relayed the amazing news that airbnb had discovered the “Holy Grail” of app development:

serving up real HTML on first pageload, but then kicking off a client-side JavaScript app. In other words, the Holy Grail.

For a few years, JS developers have been extolling the virtues of the empty <body> element in pages and injecting markup with JavaScript to construct the DOM. This obviously fails for clients that don’t have JavaScript, but also increases rendering time because JavaScript must be downloaded and executed before anything is rendered – particularly laggy on slow mobile connections (and presumably more draining on the battery). Airbnb’s Holy Grail app

looks exactly the same as the app it replaced, however initial pageload feels drastically quicker because we serve up real HTML instead of waiting for the client to download JavaScript before rendering. Plus, it is fully crawlable by search engines.

The performance gains are an awesome side effect of this design. In testing, we’re using a metric we call “time to content”…

Over a mobile connection, it may take 2 seconds to download the initial page of HTML, but it can be immediately rendered. Even as the rest of the JavaScript application is being downloaded, the user can interact with the page. It feels 5x faster.

All hail the Holy Grail method. Or, as some fuddy-duddies have called it, “Progressive Enhancement“.

2 Responses to “ The amazing all-new performant Holy Grail app development method ”