Just enough interactivity with HTMX

Summary

In this video, I provide a short introduction to HTMX, following up on my discussion from module 1 about alternatives to React, Vue, and Svelte. I demonstrate how HTMX allows us to build modern, interactive applications with less complexity and a 67% smaller codebase compared to React. I show a simple example of a UI where clicking buttons triggers surgical updates to specific page elements without full page refreshes. Using code examples, I explain how HTMX attributes like HX-GET, HX-TARGET, and HX-SWAP enable elements beyond just anchor tags and forms to make HTTP requests. I promise that while this introduction might seem complex, HTMX usage will become clearer as we continue building our blog throughout the course.

Transcript

In module 1, I talked about how I don't think you should use something like React or Vue or Swelt to build all of your applications, and how using a tool like HTMX, we can still build modern applications that have just enough interactivity without a lot of complexity overhead. So in this video, I want to give you a short introduction to HTMX. We are going to be doing something very simple, and we're not going to be diving too deep into it because it will come throughout the rest of the course. So this will just give you a feeling of what HTMX tries to do and how it works. Let's start by taking a look at the HTMX website. And as we can see here, HTMX gives us access to Ajax, to CSS Transitions, to WebSockets, to Servers and Events. We get a dependency that is dependency-free, so we don't have anything downstream that can potentially be a security threat or break our application. It also has a reduced code base. And as you can read here, 67% compared to React. So this is a big, big reduction, right? And the motivation is we want to be able to, or it would be nice at least, to be able to make HTTP requests with more elements than just the anchor tag and the form element. And we would like to be able to do things on events other than click and submit. And we would like to be able to delete requests and put requests. And I think the last point is probably one of the most important in terms of a modern UI is we don't want to replace the entire screen every time we make a change, right? So HTMX allows us to surgically update, let's just use that word, the UI with the elements that need to be updated. So let's jump in and see like a very simplified example of a UI that only updates what needs to get updated. This is a very bare-bone UI. I basically just added Tailwind, added some colors, placed it for a navbar and a footer, and then two components where we have one to showcase article cards and to load new articles, and then a red one over here that will show whatever article is selected. So if I now click on IAM Article 1, you can see that only this component over here gets updated, and you can see that we have IAM Article 1. If I now press Load Articles, we get in a new one. If I press that, again, we only update this one over here. This one doesn't update unless I click Load Articles. Again, a third article gets updated over here. I can go back to 2, 1, and we don't have a full page refresh. This feels very interactive. It feels very smooth and quick, and this is what HMX allows us to do, and we can do way more crazy stuff than this. We can update elements that are completely foreign to the flow that we're doing, so some action can influence a lot of other elements on the page, not only one element as we see here. So how this works is basically we can send back fragments whenever we do a request, and HMX allows us to do these requests from elements that are not an anchor tag or a form element. So let me show you how this works in the code. Let's start in main.go file, where most of these things should start to look pretty familiar to you. We just have some handlers that we register on some routes, some endpoints, and then we just serve this application on port 8080. However, you can see that I now have these things that I have chosen to call fragments, so an article card fragment and an article fragment that we serve under load articles and then load article with a specific article number. This is not really too relevant to how HMX works, but essentially this is all just a GET request to fetch some data. Now, if we jump out and into our views.templ file, you can see that we now have a little bit more than last time, but we basically again have the base template and then our home or home page or home component. If you look at this button right here, we can see that we now have some new attributes that is not really normal in the standard HTML. So we have this HX GET and HX TARGET and HX SWAP. And what this does is whenever we click this button, it will trigger a request to the endpoint load articles, and then we can target a specific element of the UI and we can be very flexible. We can use CSS selectors. So here I basically tell it pick the next span element you find and then swap it out before it begins. So this is where what you saw before where we have article number one card and then another one comes on top and another one and another one. And then we basically have the same thing here in our article card fragments where we now again have a HX GET request. So this is just an HMX request. Our target where we now target an ID and then we just swap the inner HTML. So we find the container or the element with this ID and then whatever is inside it, we swap out with what it receives. And what it receives whenever we call the load article and then article number was this one right here, the article fragment that we didn't pass some data. So this one will basically get inserted inside this diff right here because this diff has the article container. So if we go back to our main.go file, we can see that our load articles has this handler that calls it. It returns this article card fragment that we saw up here. And this one just gets added or appended before each one. So we always have the latest one. And then whenever we click one of these, we call the as you can see, we call the load article with a number and the load article with an article number is this one that has this handler where we we pass the article number out of the request and then we pass it to this article fragment that we didn't return. And this one then, as we have now made it quite clear, it gets inserted here and replaces all the content. So this is how you can start to think of updating specific elements of your page. You literally specify a target that you want to update with some sort of response. So your hypermedia API starts to look a lot more like what you see here with a article card fragment or an article fragment. It becomes these little pieces of UI components that you swap out, but you're still using endpoints. And these endpoints is so tightly coupled to how your applications work that you will notice right away if something doesn't work and you only have to make it work on your browser, right? Then it will work on all the other clients because it's the same environment. And this makes the whole process of working with a UI very intertwined into the rest of the workflow. Because as we'll see later on when we start to add the database, service logic, all of that, our handler, our controller will literally just take in a request, do whatever it needs to do, and then return the data. And you'd stay in the same code throughout the entire flow. And this makes working with application in this way go very, very fast. So this is a very short introduction to HCMX. I hope it's not too confusing. We will be using HCMX quite a lot throughout this course. So if you're still in a bit of doubt or don't really understand what is going on, I promise you it will start to make sense as we start to build out our blog and our UI more.