htmx Is Pro-JavaScript

Hi, my name is Carson Gross and I'm going to give a talk on HTMX. I'm the creator of HTMX, which is sort of an alternative front-end library written in JavaScript. And the title of this talk is that HTMX is pro JavaScript. And so what I'm going to talk about is what HTMX is and then talk to you about how I feel that it can be a pro JavaScript library, despite what some people say about it.

So just some background on me. I have a consulting company called Big Sky Software, and that's mainly for open source work. I've got some projects like HTMX. It's probably the biggest one. And then a couple of other ones, HyperScript. I've got a somewhat funny page on development called Gregbrain.dev. And then I've got a book out of the HTMX that I show you. And this talk is of interest to you. You might check out Hypermedia Systems. It's available online for free, or you can buy a hard copy or a Kindle version if you'd like.

So what are we going to do in this talk? Well, I'm going to look at HTMX really quick. Give people who don't know about it, or maybe you've just heard about it in passing, an overview of what it is. And look at the relationship between HTMX and JavaScript. And then I'm going to show an HTMX demo. And then what I want to do after that demo is think a little bit about how HTMX and JavaScript interact. And maybe, again, try and change the way that people are talking about HTMX and JavaScript. So HTMX, what is this thing? Well, it's what I call a Hypermedia-oriented front-end library. And what it does is a lot of JavaScript libraries that people are familiar with today, like React and so forth, what they do is they tend to replace HTML. So you don't use links and forms in the traditional way that you would have in the past with HTML. Instead, you have a fairly elaborate front-end code base that's working with a JSON API. And then React or whatever is reactively updating the user interface. And so HTMX is a little different in that it really tries to extend HTML and live in the Hypermedia world that HTML sort of gives us. So with an HTMX-based application, you're typically not writing a ton of JavaScript yourself. HTMX itself is written in JavaScript. I'll emphasize that again a couple of times. But you, as an HTMX developer, often don't need to write a ton of JavaScript.

Instead, what you do with HTMX is you put attributes in your HTML, and those attributes sort of drive what I call Hypermedia exchanges. And so what HTMX does is a JavaScript library that looks those things up and then hooks in behaviors, sort of the standard event handler mechanism for that. So at a conceptual level, what HTMX is building on is this idea of Hypermedia controls. And Hypermedia controls, again, not super JavaScript-oriented, but just let me give you the background on this.

What Hypermedia controls are are things like links and forms. So this is sort of the link in HTML. This is the canonical Hypermedia control. This was sort of the original Hypermedia control. And the thing that makes this a Hypermedia control in particular is this little attribute, this href, which effectively tells the browser, when someone clicks on this link, get this page. And this allows for what's called nonlinear branching.

Now there's one other major Hypermedia control, for user interactivity anyways, in HTML, and that's the form tag. And form tags are a little bit more sophisticated than links. I won't go into the details of it, but except to note that the form tag with this method attribute gives HTML authors more control over the form of the request that's issued. So links issue gets and that's all they can do. Forms can issue gets and posts. And they also have a more complicated relationship with the tags inside of them. So to understand what HTMX is trying to do, let's really zero in on what this anchor tag means. What does this mean? Again, I'm sorry. I apologize if you're just interested in JavaScript, but we're going to talk a little bit about HTML here.

So what does this really mean for a browser? Well, what it tells the browser is, okay, render this bit of text on the page and probably show it in some mechanism with an affordance, with some sort of visual cue indicating that it's clickable. And then, when a user clicks on that, what it's going to do is it's going to issue an HTTP get to this about URL, and it's going to get back an HTML response, typically. And what that HTML response is going to then do is it's going to replace the entire viewport of the browser. So that's what links, from a hypermedia mechanic standpoint, that's what links do. So what HTML, or excuse me, what HTMX does is it generalizes each of these ideas. So there's an event here. I clicked on this thing.

So that's what links, from a hypermedia mechanic standpoint, that's what links do. So what HTML, or excuse me, what HTMX does is it generalizes each of these ideas. So there's an event here. I clicked on this thing. So HTMX generalizes that and says, okay, any event can trigger an HTTP request. HTMX also makes pretty much any element in HTML a potential hypermedia control. So default HTML, all you have is links and forms. With HTMX, now anything can be a hypermedia control. It gives you control over the form of the request, whether or not it's a get or a put post, but it also gives you access to put and a bunch of other ones as well. And then perhaps most importantly, this link, when you click on links or you submit forms in traditional web apps, you've got to replace the entire viewport with whatever comes back. So I do have to say, you can use iframes to do partial replacements, but iframes suffer from their own issues.

So what HTMX does is it says, okay, let's generalize that so that when the request is made and the HTML comes back, let's make it so that we can put that HTML anywhere on the page rather than having to replace the whole viewport. So let's go through the attributes in HTMX that let you do this stuff. So here's a like button that's been done in HTMX, and let's just go through the attributes on it that are being used by the author using HTMX to make this like button work. The first thing to note is this hxput. And so HTMX has a series of attributes, hxget, post, put, delete, and patch, that allow you to effectively say on this thing, on this, whatever this element is, when the triggering event occurs, and we'll talk about that in a second, when a triggering event occurs, issue this type of request. So now any element in your HTML document can effectively become a hypermedia control. It can issue a hypermedia request to a server and get back HTML. That's the first part. The second part is hxtrigger, and this is what generalizes that event. So with links, you have the event as a click. When you have forms, the event is a submit, and so with HTMX, you can use any event, so mouseover or whatever. Here we're using click, which is pretty obvious for a button. In this case, you could actually omit this, because of the default trigger for a button is going to be click, but it's here just for, you know, so you can see this sort of explicitly. So we have this ability to sort of trigger an HTTP request on anything, not just clicks and submits on links and forms respectively.

And then the last real big step for generalization here is this hxtarget, and what this says is after you issue this put to this URL and you get back some HTML, what I want you to do is I want you to take the response content, and I want you to put that into the thing with the ID output. This is using a CSS selector, so this is a standard CSS selector that says the thing with the ID, that's what this hash means, output. And below, we have an output tag with, sure enough, an ID on it called output, and so what's going to happen is when a user clicks on this button, it's going to issue a put to like on the click, and then it's going to get some HTML content back, and that content's going to be inserted inside of this output. And this turns out to be a really important generalization of HTML. It really opens up what you can achieve with HTML.

Now, you know, what you'll notice about all of these attributes is that they're all very declarative. They're very much like that href attribute and that method attribute that we saw on links and forms respectively, where they sort of specify what to do, but there's not imperative code here. You're not writing a lot of JavaScript to make this functionality work. Instead, you're just sort of saying, here's what I want to have happen, and then the JavaScript of HTMX in the background looks these attributes up and hooks in the necessary event handlers and so forth.

That's only a few attributes, and that's a pretty good generalization of hypermedia controls. There are a couple of other attributes that are worth knowing about. For example, hxSwap, which will indicate exactly how you want the content swapped in, so this would replace the output tag rather than inserting the content inside of it. hxIndicator shows an element while a request is in flight, so you can show an indicator so the user knows something's going on. hxInclude lets you include the value of inputs in a request, and hxSelect lets you pull out part of a response to insert somewhere in the DOM. In general, there are about a dozen core attributes that make up HTMX, probably less than 10 of the real core ones.

And then hxSelect is another attribute that's useful, which lets you pull out part of a request, again, using a CSS selector, so the response, I should say, not request, when the response comes back, you only want to pull out a small section of it to insert somewhere in the DOM, then you can use hxSelect for that. And there's a few more attributes in there, but those are the major ones.

In general, I'd say there's about a dozen core attributes to make up HTMX, probably less than 10 of the real core ones. You can check out htmx.org slash reference. That's like 12 attributes. Most of them have fairly straightforward syntax. The trigger can get a little hairy, but hxTarget, a lot of them use CSS selectors, things you're already used to. So it's just not a very complicated library, so cool.

But what can we do? What can we do with these few attributes or hypermedia controls? Well, let's take a look at one example. There's a whole page, if you go to htmx.org slash examples, there's a whole page of examples for you that you can look at to see all the stuff that can be accomplished with these 10 or 12 attributes. But one that I think really shows off the power of HTMX and generalized hypermedia controls is something called active search. And so this is an example of that active search pattern. And we've got four attributes on here. We're not going to go too much into the details, but it's going to issue a post and it's going to issue it on an input event.

And this is a really common pattern in applications where you've got some table of things and you want to filter it down. So Google does this with search results. You see this UI all over the place. And it's a very useful UI. It's really nice to see these results sort of as you type. And I can hit delete and it won't update until there's a little bit of a pause. We're not hammering on the server every time a key down occurs. That's what that debounce is for.

And this is a really common pattern in applications where you've got some table of things and you want to filter it down. So Google does this with search results. You see this UI all over the place. And it's a very useful UI. It's really nice to see these results sort of as you type. And I can hit delete and it won't update until there's a little bit of a pause. We're not hammering on the server every time a key down occurs. That's what that debounce is for.

And so this, I think, is a really good example of, again, four attributes, just four attributes. And it's using nothing but HTML. So if we look at the responses to this post, these responses are just HTML. And that HTML, for example, on the last search, we got back two rows. And you can see those two rows got inserted into the DOM just by HTMX. And that's it. So relatively simple, but at the same time, you're able to accomplish some pretty cool stuff like this. So that, I think, shows off. This is one of the good examples that I think shows off the power or the idea of what you can achieve with generalized hypermedia controls.

Yeah, HTMX, generalized hypermedia controls. You can create UI that often rivals SPAs, like thick JavaScript-based applications without writing much JavaScript. It's just HTML with some more attributes inside of it. So we can build more applications without JavaScript. Why am I giving a talk at a JavaScript conference then? And does that mean that HTMX is anti-JavaScript? And I do have to admit that HTMX does appeal to people that don't like JavaScript. We have a lot of people that are big fans of HTMX because they don't like JavaScript. And because of that, I think, unfortunately, HTMX has gotten a reputation as being an anti-JavaScript library. But I don't think that's correct. I think from a different perspective, HTMX is actually deeply pro-JavaScript. And the way that I think it is pro-JavaScript is that HTMX sort of takes over the job of synchronizing with the server from these heavy JavaScript-based frameworks. And it's not, you know, you can't do everything in HTMX. There are definitely limitations to it.

There are definitely limitations to it. But you can do an awful lot with it. And so what I like, the way I like to think about this is that HTMX takes the responsibility for everything off of the shoulders of JavaScript. So JavaScript no longer needs to be this general-purpose programming language for everything in your web application. And instead, it can focus on what it was sort of originally designed to be, which was a relatively lightweight scripting language for the web that allows for extensibility.

So there's another demo that I want to take a look at, which is the sortable demo. Let me bring that up real quick. Examples. Sortable. Sorry, I should add this up. This is another example of HTMX. And what this example is using is it's using a sortable JS library. And what that library allows for is drag-and-drop behavior. And so there's this is some code in HTMX. Again, we're not going to get into the gory details of it. But basically, what this does is it hooks up on any element that has the sortable class on it, the sortable JavaScript library.

And so what this is going to do, and then this form is marked as sortable. And so all the stuff inside of here is going to be drag-and-dropable. And so what that's going to allow me to do in HTMX is grab these things and drop them and then synchronize the order with the server. If we look down here, you can see requests are being made and we're posting, depending on what the order is, we're going to post to the server with the stuff in the new order. And then we can save that and persist it and re-render it and so forth. And so this is an example in my mind, this is an example in my mind of a use of HTMX where it's working in concert with a JavaScript library. Sortable.js is obviously a JavaScript library. And it's providing functionality that the browser doesn't have. The browser does not support drag-and-drop, at least not as smoothly as sortable.js supports it.

And then we can save that and persist it and re-render it and so forth. And so this is an example in my mind, this is an example in my mind of a use of HTMX where it's working in concert with a JavaScript library. Sortable.js is obviously a JavaScript library. And it's providing functionality that the browser doesn't have. The browser does not support drag-and-drop, at least not as smoothly as sortable.js supports it. And so we're able to support a better user experience by using both JavaScript and HTMX. So there's not an opposition there. Instead, they're complementary to one another. HTMX could not achieve that user interface by itself. You'd have to do a hypermedia exchange and it wouldn't be nearly as smooth. So this is an example in my mind where HTMX and JavaScript or JavaScript library are working together in concert. We're taking advantage of the fact that JavaScript is there in the browser. It's a very strong scripting language. Say what you will about it for large-scale projects and all the rest of it. But we're here using JavaScript in the manner in which it was designed for. Client-side scripting to extend and improve the user experience.

So Roy Fielding is someone who wrote a sort of a famous dissertation on the web. He was one of the original engineers who worked on the early web. And his dissertation gave us terms like rest and hideous, which you may have heard. But he talked about scripting in that dissertation. And this is what he had to say. And when he says rest here, what he means is the web. You can think of rest as being like the web. He's talking about a restful system, which was his description of the web. So what he said is, rest allows client functionality to be extended by downloading and executing code in the form of applets or scripts. This simplifies clients by reducing the number of features required to be pre-implemented. So drag and drop. We didn't have to pre-implement that in the browser. The browser doesn't have to have an API for that, because we've got JavaScript to help us do that. And allowing features to be downloaded after deployment improves system extensibility.

Exactly. This is what we just saw in that demo. Drag and drop is not something that's baked into the web. At least not as well as it is with sortable JS. And so you can use sortable JS to achieve that user interface, that extensibility, using JavaScript. But then HTML can plug into that using events. And it can take over the job of synchronizing with the backend server and actually retain that original model, the restful model of the web.

So again, I want to stress that HTML is working in concert with JavaScript here. The two are complementary to one another. And HTML is relieving JavaScript of this burden of doing everything. You don't have to do everything in JavaScript. And you can really use JavaScript for what it shines at, for this sort of thing. For this sort of extensibility, the user interface manipulation on the client side to provide functionality in the browser that's just not there by default for whatever reasons. It just hasn't been standardized yet. Or it's just advanced behavior. Something that needs to be achieved in JavaScript.

There's no shame in using JavaScript and quite a bit of JavaScript with HTMX. And similarly, I don't think someone who is very interested in JavaScript and is a JavaScript developer should shy away from taking a look at HTMX. I think some of the best developers, best HTMX developers over the next five years are going to be people who have a really good understanding of JavaScript. Because when you get into advanced situations in HTMX, declarative programming like HTMX allows, hypermedia oriented programming like HTMX allows is great, but it can only go so far. So if you really want to do those more advanced user interfaces, if you really want to get that interactivity, if you want to push HTMX, you're going to have to write JavaScript. And you're going to have to be a pretty good JavaScript developer.

I think there's a complementary there. Complementarity. What's the word I want to say? I think there's a complement between these two technologies. HTMX can help JavaScript by relieving it of the burden of doing everything. And JavaScript can help HTMX by providing that additional extensibility that just doesn't make sense to be integrated into HTMX, the HTMX library itself. So I think, again, what I want people to take away from this is that HTMX is not anti-JavaScript. HTMX is a pro-JavaScript library. Thank you for listening to my talk.