</> htmx
Welcome back to another edition of the Reaction newsletter! If you're joining us for the first time, a warm welcome to you. Here, we'll be your guide to all things React-related. To our loyal subscribers, we extend our gratitude for your continued support and passion for the React ecosystem.
In this edition, we will discuss a cool and intriguing library that is set to revolutionize how web applications are developed: HTMX.
The primary objective of HTMX is to leverage modern browser features directly through HTML, rather than relying on JavaScript. HTMX provides access to AJAX, CSS Transitions, WebSockets, and Server Sent Events directly within HTML, using attributes. This empowers you to construct contemporary user interfaces with the simplicity and potency of hypertext. HTMX truly augments HTML as a HyperText.
Quick Start
You can initiate your use of HTMX by simply adding the HTMX script to your HTML head element, like so:
With this, your HTML document is now empowered by HTMX, enabling you to utilize browser features directly in HTML.
Here’s an example of a "Hello World" version using HTMX:
When a user clicks on this button, it will issue an HTTP POST request to '/' and use the content from the response to replace the same button. It's worth noting that using HTMX requires a server that sends HTML as a response, not JSON. This allows you to stay firmly within the original web programming model, utilizing Hypertext As The Engine Of Application State without the need to deeply understand the concept.
Here’s an example in action:
Here is the server code implemented with a simple Node.js web server:
As you can see, we are literally sending HTML as a response to the client.
Here’s the link to the official documentation and to its repository.
Interactivity
Dynamic content on-the-go
As users navigate content, HTMX ensures a seamless feed without reloading the entire page.
Auto Updates
Things like live score updates? HTMX handles them, no manual refreshes required.
Why Should You Care?
If you choose to use a Single Page Application (SPA) framework, such as React, for your web application, you will naturally have a sizable front-end codebase written in JavaScript. This inevitably leads to the question:
“Well, why aren’t we doing the back-end in JavaScript too?”
This pressure to adopt JavaScript will only grow as your investment in the JavaScript front-end ecosystem grows. JavaScript is the dominant language among web development thought leaders, and there is an abundance of tutorials, code camps, etc. that strongly emphasize the language. Nothing succeeds like success, and JavaScript (as well as React) have succeeded.
What hope do non-JavaScript developers have in web development?
Well, there is one older technology sitting there in the browser alongside JavaScript: hypermedia. Browsers offer excellent HTML support. In fact, even if you are using an SPA framework, you will be working with that hypermedia infrastructure in some form (via JSX templates, for example) if only to create UIs that a browser can understand. So you are going to be using HTML or the related DOM APIs in some manner in your web application.
Well, what if we made HTML a more powerful hypermedia?
That’s the idea behind htmx, which makes it possible to implement common modern web application patterns using the hypermedia approach. This closes the UX gap between traditional MPAs and SPAs, making the hypermedia route feasible for a much larger set of web applications.
If your application’s front-end is primarily written in terms of HTML, perhaps with a bit of client-side scripting, and with no large JavaScript codebase, you’ve suddenly dramatically reduced (or entirely eliminated) the JavaScript Pressure on the back end.
But this doesn’t mean that HTMX is an anti-JavaScript way of implementing web applications. After all, htmx is built in JavaScript. Furthermore, we wouldn’t discourage someone from using JavaScript (or TypeScript) on the server side for a hypermedia-driven application, if that language is the best option for your team. But JavaScript is not, and should not be, the only server-side option for your team. This discussion about JavaScript is thanks to Carson Gross' essay, Hypermedia On Whatever you'd Like.
Real World Example Implementation
David Guillot at Contexte has provided a perfect htmx demo at DjangoCon 2022. They migrated their Sass product, built with 2 years of work in React, to simple Django templates and htmx in just a couple of months. By doing this, they achieved the following:
The effort took about 2 months.
There was no reduction in the application’s user experience (UX).
They reduced the code base size by 67% (from 21,500 LOC to 7,200 LOC).
They reduced their total JS dependencies by 96% (from 255 to 9).
They reduced their web build time by 88% (from 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% (from 75MB to 45MB).
Here’s the video if you want to explore it in detail:
Final Considerations
With HTMX, backend developers can now play a more active role in crafting the user interface. They can build interactive UI components without delving deep into frontend scripting. Unlike comprehensive frontend frameworks that come with a steep learning curve, HTMX offers a more straightforward approach. By extending HTML, it provides a familiar environment for developers, making it easier to get started.
HTMX's lightweight and reduced client-side complexity mean faster page loads. Without the overhead of loading extensive JavaScript libraries or frameworks, users experience quicker interactions and reduced latency.
Furthermore, with its ability to update content dynamically without necessitating full page reloads, HTMX ensures a smoother user experience. Transitions are seamless, and users aren't disrupted by jarring page refreshes.
And with the arrival of the first stable version of Bun, a blazingly fast JavaScript runtime, there might be a new tech stack emerging that focuses on building hypermedia-driven applications with significant performance gains.
