DEFINITION
htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext - htmx.org
I first heard of this technology from Siegfried, deploy! podcast, episode #41. Didn’t think too much about it until another recent article came up in my feed today from Infoworld. This got me thinking about the uniqueness of HTML attributes again. Adding those extra bits of HTML markup really helps define the boundaries of what the front-end has to offer.
I do recall, lines and lines of thick HTML code that were laced into an open-source project. In the past attributes have been used for a variety of things for the front-end. From, data attributes that tie in nicely with JavaScript for special functionalities, to ARIA attributes for accessibility purposes.
Then there is the massive additional HTML attributes library. It almost feels like, attributes is an ongoing extension of HTML, minus the bloated JavaScript libraries that we all know and love today.
LESS OVERHEAD, PERHAPS?
Going back to server-side rendered, with just a simple call through HTML markup? Didn’t the web community spend over half a decade perfecting front-end loaded frameworks such as React.js, Vue.js, etc. in order to offload functional components on the client side?
Aren’t we going backward here? An avid Drupal friend of mine said, “what else is new hmm. isn’t that just isomorphic.” He mentioned that this was already somewhat of a thing baked into Drupal 8.3.
Out with the old…in with the…old? It is possible but with a twist!
AJAX requests are a popular method for pinging the server, whenever needed. A great example is the use of Google Maps. You don’t need the whole map unless you move the cursor to a new spot. This then grabs the data from the server again. Here’s where the HTMX hx-trigger attribute comes into play.
There’s something called Standard Event Filter, which is like a call to a JavaScript library, then you can add an additional boolean bracket to the attribute called Standard Event Modifier to enhance its behavior after the event.
This is just one interesting aspect of the technology that made sense to me. It is still new to me, but intriguing nonetheless because it modifies HTML.
KEEP ME APPRISED
I’ll be sure to keep HTMX on my tech radar. There are already so many new things happening within the front-end space, that it is hard to keep up. I can go down a reference rabbit hole with new CSS nesting, but let’s save that for another post!
This was initially published on my site at jameslau.com. Please come by and check out more of my writing and other works!
Thanks for reading!
Top comments (2)
It's refreshing to read the book about hypermedia systems they have linked on htmx.org. I'm not sure if this concept has a more general application, but it gives HTMX a really solid foundataion.
HTMX expands the Idea of "Hypermedia" documents. But instead of connecting whole documents using "links" (like HTML does), HTMX works on a more granular level allowing to exchange parts of the document or even single DOM nodes. So far, this is a revolutionary concept that I think will have a great impact. It also solves some of the challenges of modern web design very elegantly.
Another strong point on HTMX is the fact, that they hide all the complexity of HTTP-requests from the users. If you ever tried to build something more sophisticated using AJAX requests, you may know how awkward this may get. And even if you use the fetch-api, you will have to struggle with the complexity of asynchronous programming. HTMX hides all this from the developer.
There are also some weak points that might limit the usability a bit:
If you check the htmx-reference, you will find that they introduced about 60 new attributes to handle every aspect of the interaction. I´m not sure everybody will be happy with this, I would have liked to see a more generalized concept. If you think of the old HTML-syntax, they only use less than a handful of tags to hide their requests (like <a href="...">, <img src="...">, <link rel="...">).
I suppose, changing the structure of your document dynamically may make debugging very challenging, if you drive the concept too far. It might easily end as a shell game where it is hard to know the current state of your UI. We probably would need some more guidelines to use it properly.
I think we should get some more experience using HTMX, but bottomline it might be a great step forward. I´m working on applications, that rely much on dynamic page generation from external sources. But even in that case, HTMX might give some nice options to handle UI changes dynamically. I´m really courious to see, where this will lead us to...
I didn't know this existed. It looks interesting. Do any "big" websites use it?