Will's blog


Primer: facebook's HTMX from 2010

20 Feb 2024

I recently discovered this 2010 JSConf presentation via HTMX discord:


  1. At Facebook they had loads of JavaScript and that was causing slow page loads.
  2. Loading the JavaScript async didn’t work well as the page would render, but be non interactive - which sucks from a UX perspective.
  3. They realised that the basic operation the JavaScript was performing was making an http request and swapping the new content somewhere in the DOM - so they wrote a 40 line JavaScript function to do this which they included inline in every pages’ <head>1. This gave them instant interactivity.
  4. They were then going through incrementally replacing as much existing JavaScript with just this library - increasing performance (~5s to ~2.5s page load) and reducing complexity and lines of code.


The motivation was performance. The effect was better performance - but also much less code to write and a simpler overall system.

I’d recommend watching the whole thing, I found it a pleasure. The author, Makinde Adeagbo, is a charismatic presenter. He covers other areas like downloading JS on-demand, native HTML controls and the tooling they used to find interactions that they could apply Primer to.

The actual code can be found here: https://gist.github.com/makinde/376039.

The context now than then is very different of course. They were already returning html from the server - so it’s less of a jump to having a generic JavaScript library to do it for you. The point of comparison now would be to a react style SPA with endpoints returning JSON and HTML being generated client-side.

Why is this interesting?


Less interesting asides peripheral to the main point of this blog post: