Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So we're going to start going through the directives for HTMX. But before that even starts, I think it's worth taking a minute to just talk about the very basics, the concepts of what why HTMX exists, what's different about it from, you know, some of the other stuff that that you've used or, you know, that's out there. And the biggest thing is that it's assuming that everything is HTML, and it's using it's using the site. It's using the directives, as HTML, instead of what a lot of JavaScript sort of first, front end frameworks do is assume everything is JSON. Assume that all data has to be formatted in sort of a JSON format, and you have, you know, basically arrays within arrays, and objects, and and everything with JSON notation, and that you sort of assume that your browser is going to do the work of going through processing everything out, and then assigning it into different places based on what you've done.
Lazarus:So this is just a different it's a different idea, which is you just pass the HTML directly. Your browser doesn't really know beyond, okay, this is HTML, and it's going into this place. And it doesn't need to, you know, do any sort of loop through stuff and and those kind of processing things. It doesn't need to store anything as an element. And this is where some of this is where a lot of the speed comes from and just the overall, you know, memory load and all these other things.
Lazarus:Your browser is very good at handling straight HTML. When you start doing stuff with the JSON arrays, and you start, like, Vue or React, and you start processing those as objects, treating them as objects, you know, complex objects that can do a lot of different stuff, then you're starting to creep up in how long it takes to process something, and just your overall mental load of what's happening and, all the different kind of lines that can be drawn there. So the purpose of HTMX is to kind of bring it back, I shouldn't say the purpose. You know, one way to use HTMLX and sort of the way that it functions is to bring things back to HTML. Passing HTML as a perfectly valid way and and sort of actually the more, the more in tune way with the way browsers and the web originally set up is to just pass HTML.
Lazarus:So what's an example of that? Let's say you have a list of users. If you're using JSON, you know, you'd send a request to an API, slash users or something, and it would return a JSON formatted list of users with information and maybe nested information and some other stuff. And then your browser would your function or your framework, whatever you're using for for JavaScript would take that and reorganize it and spit out the HTML. And the HTML would be just kind of a byproduct of what the browser has done with the JSON that you originally sent.
Lazarus:So the way that HTMLX does it, it's just skipping that step of JSON. You, as the server, use you're the person who has control over the server. They send you you know, the server sends formatted HTML, and on the browser side, it's just dumb. It doesn't do any processing. It just takes that HTML and puts it where it's supposed to go.
Lazarus:So the first target the first sort of directives that you would use to do this let's just set up, you know, get in your in your code mindset. You have a button. And when you click the button, we will do an h x get. So that's gonna be let's just say that same example, slash users. H x get slash users.
Lazarus:If you don't do anything else, that's gonna work. It's gonna go to that slash users. It's gonna get whatever HTML you've set at that to return all the users, and it's gonna put it directly into whatever you clicked because the default behavior is to place the content that comes back from the h x get request into the div that made the request. So this is not exactly, you know, that's probably not usually what you want because what if you want to click it again? Well, now with everything's been replaced and, you know, you don't really want to put something inside a button most of the time either.
Lazarus:So h x target is kind of one of your most basic ways to handle the data once it comes back. You get your HTML, and then you have hx target. And that's gonna be just a CSS selector for where that data is gonna go. So usually, you know, that could be an ID. So you have your your users list, and that's maybe a table.
Lazarus:And when you click on users, it replace you know, you click on the button, that's h x get slash users. It takes that HTML from slash users and puts that HTML into whatever you have defined as the target. So, you know, pound users underscore list or something. Whatever ID you set up to be that target, it's going to place the the HTML that comes back directly into there. And that's it.
Lazarus:It's not doing something complicated or processing within that. So you get, you know, just sort of immediate, here's what became here's what came back from the server. You can inspect it. You can take a look. It's just sending an AJAX request and putting the results of that AJAX request directly into whatever target you define.
Lazarus:So I would think of h x get and h x target as, like, that's your sort of starting point for, okay, I wanna run an experiment. I'm gonna set up a route. You don't have to call it an API. You know, it's a route you could be in you could consider it an API. You know, that's a perfectly valid way to do it.
Lazarus:But however you whatever data you want to place so let's say you have a button that updates your user list. You know, maybe that's not the most useful thing, but let's just say that's what you want to do. You're going to click on that button and it's going to go to slash users and put that HTML there. So whenever you click it, you know you're getting the fresh data. So that would be kind of the the most basic usage, you know, as like a a test case of like, okay, how does this work?
Lazarus:By default, if you put nothing for how to trigger, it's gonna assume that you wanna click. So you can do h x get and you can do h x target. Put those 2 together. It'll assume that it should run the h x get when there's a click, but you can change that. You can change what triggers it.
Lazarus:And we'll talk about that next time.