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