Simplifying Web Development: Rediscovering Ease with HTMX

Have you ever wondered how developing a new web application became so complex? You're definitely not alone. What used to be a straightforward task now requires multiple React components, written in TypeScript, a language that demands a build system to convert it into something usable by browsers. Gone are the days of simply writing HTML files that could be opened directly in a browser. It makes me wonder: where did the productivity from the days of PHP go? When did web development become so convoluted, and what are we gaining from it?

Users certainly aren't benefiting from the increased load times imposed by the many layers of JavaScript they're being forced to download (typical web pages are just around a few KB of size, while the core React lib alone is already over 100KB), just to also make their back buttons behave unpredictably (the most common issue with most SPA flows). Nor are developers, who now must wade through lengthy lists of components just to troubleshoot minor UI issues.

But all is not lost: there is a simpler way forward. Have you heard of HTMX? If not, it's worth having a look.

A Brief History: How We Got Here

In the early days of the web, most pages were static: essentially collections of text and images with links to other pages. This simplicity worked well; users could navigate back and forth easily, and sometimes forms allowed them to submit information to the server. This approach was sufficient for most web applications, like forums, e-commerce sites, and even banking platforms.

However, with the ubiquity of the Internet and the eventual evolution of the web came different needs, certain applications required more dynamic interaction. Imagine monitoring water usage in real-time on a dashboard. Expecting users to reload the page constantly would be inconvenient, and automatically reloading the entire page would be inefficient. That's where AJAX (and other solutions such as Java applets and Adobe Flash) came in.

AJAX is the (surviving) solution to updating portions of a page without reloading the entire page. But to do this, it requires JavaScript, which allows developers to fetch additional data from the server as needed. However, JavaScript, despite its benefits, became one of the most misunderstood languages, leading to a wave of frameworks and libraries that have only added to the complexity. This escalation has led to what's now commonly known as JavaScript fatigue. Many developers feel overwhelmed by the volume of frameworks and tooling required to build what should be straightforward applications. 

Simplicity with HTMX

Thankfully, complexity isn't a requirement. Frameworks like Ruby on Rails have figured this out soon enough and showed us a balanced approach by incorporating just enough AJAX to allow for dynamic elements while keeping most of the page static. This approach respects the browser's inherent optimization for static pages while allowing essential dynamic functionality. All abstracted by the framework itself.

What about other web stacks? Enter HTMX. HTMX is a lightweight library (around 10KB of size) that enables AJAX without requiring JavaScript. Instead of writing custom JavaScript, you add simple attributes to your HTML elements, which HTMX interprets to perform dynamic updates.

For example, I recently built a chat application with HTMX, just to test drive its capabilities. It consists of two pages: one for setting the username and another for the chat room itself. In the chat room, the message list and input fields become dynamic elements. With an hx-get attribute, I set up a dynamic message list that automatically updates itself by polling for new messages. Meanwhile, an hx-post attribute allows the form element to send messages from the user back to the server without ever reloading the whole page. It is that simple. And while this is just a simple use case, it covers the basic functionality that can be extended to implement any kind of dynamic element in a web page, even for complex and sophisticated use cases.

Why HTMX Might Be the Answer

If you're feeling burdened by complex codebases involving React, TypeScript, Node.js, or other JavaScript-heavy setups, consider exploring HTMX. It offers a refreshing alternative for creating dynamic web pages without the usual headaches associated with modern front-end development. One thing is certain: not every web application needs to be an SPA or even fully dynamic. And when they must be dynamic, definitely not every web page needs to be built exclusively with React and the like. I can easily advise keeping the front-end as simple as possible (it's a presentation layer at the end of the day) and then gradually adding complexity, where applied. This approach can ensure the simplicity necessary for the peace of mind of your engineers, which will directly impact user satisfaction, because it enables them to focus on more important things.