Hypermedia Driven Architecture (HDA) and the emergence of HTMX - a trend to sell old wine in a new bottle

The world of web development is a dynamic one, with trends and technologies constantly evolving. This past decade has seen a shift from server-side rendering (SSR) to client-side rendering (CSR) to server-side rendering (SSR) again, and now, whispers of a return to minimalistic hybrid approaches like HTMX and Hyperscripts have emerged. As a veteran developer who started a career in 2008, I can't help but be curious about another potential shift.

I vividly remember my first project, battling complex UI requirements in a newsletter authoring tool. jQuery was the hero that day, allowing us to achieve the impossible (or at least the very challenging to me as a fresher). It was the peak of the jQuery revolution, a stark contrast to the JSP and ASP days before it, and a far cry from the vanilla HTML and JavaScript that dominated the 90s. Post-jQuery, we witnessed the rise of AngularJS, then React and Angular, followed by Vue and Svelte in the late 2010s. With each transition, the front end becomes a labyrinth, each door leading to another, more intricate puzzle as we progress.

Now, with the emergence of libraries like HTMX and Hyperscripts, the philosophy of minimalism stands in stark contrast to the increasingly complex front-end frameworks. HTMX finished 2nd in the 2023 JavaScript Rising Stars "Front-end Frameworks" category, just behind React is a testimony of the growing acceptance from the frontend dev community. It sparks an important question: are we returning to a Mesolithic era of web development? Is simpler always better? Perhaps the answer lies not in a complete reversal but in a judicious blend of old and new. HTMX and its ilk may not represent a regression, but rather a return to the core principles of building efficient and performant web applications.

This is just the beginning of my exploration into this intriguing trend. In my article, I'll delve deeper into the spectacles of HTMX, analyzing its strengths, weaknesses, and overall philosophy of Hypermedia Architecture compared to established frontend frameworks. This is exciting to take a closer look at how these "greenhorn libraries" might shape the future of web development!

If you find it insightful and appreciate my writing, consider following me for updates on future content. I'm committed to sharing my knowledge and contributing to the coding community. Join me in spreading the word and helping others to learn.

What is HTMX

HTMX (it stands for "Hypertext Markup Language Experience") is a "JS-in-HTML" library that gives you access to AJAX (hx-get|delete|post|put), CSS Transitions, WebSockets (hx-ws) and Server-Sent Events (hx-sse) directly in HTML, using attributes. With htmx, you can issue an AJAX request, handle HTML responses, and update the DOM without writing any JavaScript code. It's as simple as adding the htmx attribute to your HTML element which is IE11 compatible & and ensures reduced code base sizes by 67% when compared with react.

For example, consider an active search box pattern. With HTMX, you can send AJAX requests directly from the HTML element without needing to write any JavaScript code.

<!-- htmx code -->
<input type="text" hx-get="/search" hx-trigger="keyup changed delay:500ms" hx-target="#results" hx-indicator="#loading">
<div id="results"></div>
<div id="loading" style="display:none">Loading...</div>        

In the above HTMX code, the hx-get attribute is used to send an AJAX request to the /search endpoint whenever the user types in the input field (triggered by keyup changed delay:500ms). The search results are then displayed in the #results div, with a loading indicator shown while the AJAX request is in progress.

If you have read this far, you might be interested in delving into their documentation as well.

https://htmx.org/docs/

https://hyperscript.org/docs/

Let me share the links to an open-source playground and some insightful examples I found during my hands-on experiments:

https://github.com/lassebomh/htmx-playground

https://github.com/rajasegar/awesome-htmx

https://github.com/mikestefanello/pagoda

Hypermedia Driven Architecture (HDA) and HTMX

Hypermedia Driven architecture (HDA) is a new/old approach to building web applications. It combines the simplicity & and flexibility of traditional Multi-Page Applications (MPAs) with the better user experience of Single-Page Applications (SPAs). The HDA architecture achieves this goal by extending the existing HTML infrastructure of the web to allow hypermedia developers to create more powerful hypermedia-driven interactions.

Core principles:

- Non-linear navigation: Unlike traditional websites with a set path, hypermedia allows users to freely explore interconnected information through links. It's like navigating a web of knowledge, choosing your adventure.

- Rich media integration: Text isn't king here! Hypermedia embraces various media like images, videos, sound, and even applications, creating a more immersive and engaging experience.

- User-driven exploration: Forget rigid structures. Hypermedia empowers users to choose their path and discover information intuitively, based on their interests and needs.

- Decentralized structure: Information exists as interconnected nodes, not a linear sequence. This fosters exploration and serendipitous discovery.

Benefits:

- Engagement: Users feel empowered and in control, leading to longer engagement and deeper understanding.

- Accessibility: Information is easier to find and explore based on individual needs and learning styles.

- Flexibility: Content can be easily updated and reorganized without breaking the overall structure.

- Creativity: Opens up exciting possibilities for storytelling, learning experiences, and interactive media.

HTMX has a strong connection to hypermedia principles. While not directly the same, HTMX facilitates building web applications that embody core hypermedia ideas by employing lightweight AJAX-based dynamic and fractional updates of the page, navigating to contents composed at the server end. HTMX makes building hypermedia applications more practical and efficient. It simplifies communication between client and server for dynamic updates that align with a user-driven and explorative philosophy of HDA.

Benefits of HTMX

Based on my exploration of HTMX release notes, relevant GitHub conversations, and other developer communities, it appears that the HTMX team's primary objective is to address the following issues.

1. Page reload - One major problem in traditional web development is page reloads. However, HTMX restricts the page reloads by facilitating dynamic updates using AJAX. This results in a seamless and responsive user experience.

2. Separation of concerns: the business logic and templates - HTMX follows a declarative approach in the template without coupling with any business logic. That eventually reduces the need for complex JavaScript code and makes web development more straightforward.

3. Efficiency in DOM updates and client-side performance - Priorly achieving quick load time on an initial web page was one of the challenges that caused SSR overheads. With HTMX, a web developer can update only the necessary parts of the DOM. This results in minimizing the overhead and enhancing the performance and responsiveness.

4. State management - leverages the server-side state and allows shameless updates to the client-side state through AJAX requests. It results in simplifying the development process by reducing the likelihood of state-related bugs. There is no need to worry about the state of the client and communication between them. It is all just HTML and forms. Error handling on the client will be almost pointless. All behavior is on the backend and can be tracked there.

5. Minimal client-side overhead - HTMX is small (~14k min.gz’d). That's why, the client side overhead will be less to not existing. It is dependency-free, extendable, and doesn't require any build tool. You even can consume it via a CDN by using script tags in your HTML.

Challenges with HTMX

As HTMX is still young and hasn't seen widespread use in production, I believe its real-world challenges haven't been fully vetted. Based on my own experience and some online conversations, I've compiled a summary of potential critical concerns:

- I foresee a potential challenge with maintaining the form data state during frequent navigation using HTMX. While hidden form fields, popular in the 2000s, could be an option, their usage introduces parsing and stringifying overhead every time we store or retrieve JSON objects or HTML blobs at the client side state data manipulation. I've searched extensively for alternative solutions, but haven't found a perfect fit yet.

- My search for automated code quality tools like SonarQube or effective linter options for HTMX development turned out empty-handed. This presents a significant challenge for production-grade projects, as robust quality checks are crucial.

- While HTMX offers a basic set of UI components on its official website (https://htmx.org/examples/#ui-examples), resources for implementing richer components are currently limited. Limited support might necessitate additional effort compared to established frameworks, as HTMX primarily extends HTML. This could potentially lead to increased development time.

- During my exploration of HTMX examples, debugging through breakpoints and call stacks proved challenging. Additionally, the lack of dedicated developer tools could present difficulties in resolving issues, especially in production environments.

- Currently, HTMX doesn't directly support client-side-only visual updates or state management. This means toggling element visibility requires network requests instead of pure client-side manipulation. While convenient for simpler interactions, this can lead to increased network traffic and potential performance issues for users with limited bandwidth.

Future of HTMX and My Final Thoughts

HTMX, a relatively new technology, is already generating buzz in the web development community. By simplifying the development process and improving the user experience, HTMX has the potential to become a major player although this is not yet ready for intricate production usage. Over time, frameworks like React, Vue, and Angular have become popular for structured applications, but they can be complex. HTMX offers an alternative, aiming for efficient interactivity without the inherent complexity of modern frameworks. It achieves this minimalist execution by extending HTML with custom attributes that enable AJAX requests without JavaScript, and integrates seamlessly with existing tech stacks, improving the user experience without requiring a complete overhaul.

This return to the core principles of web development, using simple HTML and JavaScript, is encouraging. We've explored many approaches over the decades, experiencing both ease and pitfalls. I'm optimistic that HTMX will find its place in the front-end development community and see widespread adoption in production environments. I'd like to encourage my readers of this article to explore HTMX and engage in open discussions for the better of this promising solution.