Chapter: Welcome to the course
Lecture: What is htmx?
0:00 So what is htmx? Is it like Vue.js or React or one
0:04 of these frameworks? Well, not really.
0:07 It's a little bit different, in fact kind of exactly the opposite in a lot
0:11 of ways. So if you read the way that it talks about itself here, it says
0:15 htmx allows you to access AJAX,
0:17 so these are calling APIs on the service and then making some change
0:21 to the DOM, the HTML, interactively on the page.
0:24 CSS transitions and WebSockets directly in HTML using attributes.
0:33 we just write regular HTML, what you'd do anyway.
0:36 And then we put attributes on those and that triggers events and other behaviors done by
0:42 htmx. They ask some interesting core questions here,
0:46 such as why should anchors and forms be the only thing in the page that can
0:51 make an HTTP request. Why should only click and submit events trigger them?
0:56 Why should you only be able to do GET and PSOT and why should you only
1:00 be able to replace the entire screen with web server-side POST backs. And by removing
1:06 these arbitrary constraints, htmx basically completes HTML, and that's really a good way to
1:13 look at it. It's all these things that we've come to know and expect as
1:17 limitations about how HTML works. There's a whole bunch more stuff that it should have
1:24 we can just put little attributes and make them go. Really the best way to see
1:28 what's going on is to see a quick example.
1:30 htmx has a great bunch of examples, and I'm going to dive into them later.
1:33 I just want to show you quickly this first one here.
1:36 So this is what it looks like to write htmx code.
1:39 This is not part of it,
1:40 this is literally all of it.
1:42 So what are we doing here?
1:43 We have this section down here at the bottom that looks like this.
1:47 We have a little div that contains a first name
1:50 Joe, last name Blow and email address. But it's not editable,
1:53 right? So what we wanna do is have a button that we could click to
1:56 turn this into a form in line and then save it and then put the update
2:00 back right in place. So what we have is we have our little labels here
2:05 in our div so label, value,
2:08 label, value and so on.
2:10 And then we have these `hx`.
2:12 These are the htmx attributes here.
2:14 So hx-target means whenever anything happens,
2:18 we're going to do something to this and what we're gonna do is swap out the
2:22 entire HTML. So this entire section of the page will just be replaced with well
2:27 what when we click this button here,
2:30 what we're gonna do is a GET against contact/1/edit
2:33 and that's going to return some HTML
2:37 that is useful to us. In the scenario I described,
2:40 what we want is a form.
2:42 So this is what the server is going to give back.
2:44 It's going to give us a form with more hx attributes.
2:47 That will then when we save the form,
2:50 change it kind of back to how it was before and here we have instead of
2:54 just a div and a value,
2:56 we're gonna have a div and an input and a label and input and a label and input and so
3:00 on. And then on the button what we're gonna do is we can cancel it
3:04 and pull it back, or we can submit the form over there.
3:09 Alright, so here we go,
3:10 let's click it and see what happens.
3:11 This is going to be those changes here, and let's hit submit.
3:21 Look at that, how awesome is that?
3:23 Now notice at the bottom around here.
3:25 There's this cool little like debug thing, actually.
3:27 So there's three things that happened. First,
3:29 we were on the initial state which is what we talked through. When I clicked the
3:33 button, this click to edit button here,
3:36 we got that form sent back to us.
3:39 This is the request we made, a GET and zero parameters, and when we save the form,
3:44 what we did is we did a PUT,
3:46 not a POST but a PUT to that contact.
3:49 We said the first name is Michael,
3:50 the last name is Kennedy. And the email is this, and if we go down here
3:54 you can see what the response from the server was.
3:56 Well, now what should be on the page is a static section of HTML where
4:01 the name is Michael Kennedy and the email is email@example.com
4:04 And again, the ability to edit this further, so we could change this to michael2
4:11 or whatever. So this is the magic of htmx.
4:15 All we have to do is we have to write a little tiny bit of server-side
4:18 code in Python that will. when we ask for it,
4:29 that then transforms the DOM, we just let the server do it as if it
4:33 was a regular non-interactive, non-dynamic server-side application,
4:37 but instead htmx is making this live, just as we expect.
4:42 So that's what htmx is. There's many,
4:44 many features and use cases for it and things we have to do to make it clean
4:48 and useful in Python. In the end,
4:51 I think you're going to absolutely love this technology.
4:53 It is so clean and neat and beautiful, and it lets you put your code that
4:57 you've gotta write on the server-side anyway right next to this dynamic elements in a wonderful way