Moving From React to htmx ¶
It is all well and good talking about REST & HATEOAS in theory or describing the Hypermedia-Driven Application architecture, but, at the end of the day, what matters in software is practical: Does it work ? Does it improve things ?
We can say for sure that htmx works, since we use it in our own software.
But it is hard to say that it would be an improvement over other approaches, since we haven’t had an apples-to-apples comparison of how htmx might compare with, say, react.
From React to htmx on a real-world SaaS product: we did it, and it's awesome! We took the plunge and replaced the 2-year-of-work React UI of our SaaS product with simple Django templates and htmx in a couple of months. We’d like to share our experience with you, with concrete indicators on various aspects, and convince your CTO !
Executive Summary ¶
No reduction in the application’s user experience (UX)
They reduced the code base size by 67% (21,500 LOC to 7200 LOC)
They increased python code by 140% (500 LOC to 1200 LOC), a good thing if you prefer python to JS
They reduced their total JS dependencies by 96% (255 to 9)
They reduced their web build time by 88% (40 seconds to 5)
First load time-to-interactive was reduced by 50-60% (from 2 to 6 seconds to 1 to 2 seconds)
Much larger data sets were possible when using htmx, because react simply couldn’t handle the data
Web application memory usage was reduced by 46% (75MB to 45MB)
These are eye-popping numbers, and they reflect the fact that the Contexte application is extremely amenable to hypermedia: it is a content-focused application that shows lots of text and images.
We would not expect every web application to see these sorts of numbers.
However, we would expect many applications to see dramatic improvements by adopting the hypermedia/htmx approach , at least for part of their system.
The slides for the presentation can be found here (be sure to check the excellent speakers notes!)