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.

Talk Python's Mastodon Michael Kennedy's Mastodon