Trending Tech: HTMX

DEFINITION

htmx gives you access to AJAXCSS TransitionsWebSockets 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!