HTMX + Django: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Welcome to the course
Lecture: Comparing web frameworks to HTMX
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
There's loads and loads of choice out there for bringing dynamic features to your web pages.
0:06
Let's briefly talk about two of the more popular ones and how they compare to HTML. React is an all-encompassing front-end framework.
0:15
It isn't really designed to be used in pieces. Once you're using it, you're well using it, and typically React is used to build a single-page
0:23
application. React is heavily callback-based, which is common enough in the JavaScript world.
0:30
The result though is you often end up with deeply nested code with Lambda-like methods littered throughout. Vue is a little lighter weight than React,
0:40
allowing you to decide just how deep you want to dive into the pool. I'm a fan of Vue as it meshes a little more easily with tools like Django.
0:49
I've used it a fair amount with Django Ninja. Django being my backend, Ninja providing the REST API, and Vue in the front.
0:58
The code here is part of a project that has a video player, similar to what is demoed in this course.
1:04
You can see the use of a structure in the data section, as well as methods.
1:07
But like the React code, it's not immediately obvious how this ties to the HTML. That relationship happens through shared IDs.
1:17
By contrast, look at this little beauty. First off, you'll notice the complete lack of scrollbars that were in the previous two examples.
1:25
Second, it ties nicely in with the HTML. If you're comfortable with HTML but have never seen HTML before, you can probably take
1:33
a good guess at what this code does. The placeholder attribute inside the input implies a search context, while the table is the results.
1:44
Reading the unfamiliar attributes, hxPost, hxTrigger, and hxTarget, you might be able to guess what's going on here.
1:52
The HX trigger says ""Key up changed delay 500ms"" while HX post has a URL.
2:00
If you guessed that typing something in the input will trigger calling the URL, you'd be right.
2:05
HTMX is one of those things that really feels like it should have been invented before.
2:10
Once you've got it, it just seems like the right way to do things.