HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Welcome to the course
Lecture: The big ideas covered in this course
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's talk just for a moment about the big ideas that we're going to cover in
0:03
this course. Kind of a loose table of contents. We're going to build a
0:08
video website. This is a site that collects a bunch of videos that we
0:12
might like and categorizes them and lets us view them and even add new ones,
0:17
search it and so on. We're not going to write it from scratch because what
0:21
I want you to do is have a realistic,
0:23
legitimately nice looking website that we can extend with htmx.
0:29
So we're going to start with this video site built in Flask, and it's already going to
0:32
have the web design, and then we're going to add these features and clean it up
0:36
with htmx and of course htmx is what this course is all about,
0:40
so we're gonna focus on that.
0:42
We're gonna cover this idea of view models that help us do data exchange and keep
0:46
our Flask views very, very simple and allow our data validation,
0:50
and all those things to happen. We're also going to work with an open source package
0:54
that I created, both for Jinja and a separate one for Chameleon,
0:57
the two template languages that are my favorites. That will allow us to work with partial
1:02
elements of pages. What is very,
1:04
very common, and you got a sense of this in the last video is that we
1:08
need to create small fragments of HTML sometimes and other times we need to create the
1:13
whole page which may also contain that fragment.
1:16
So we're going to work with this idea of partial templates,
1:19
maybe that one div where it had the name with a click to edit the name
1:24
and the email. Maybe that is its own template file that sometimes can be rendered
1:28
in the larger page, but other times during these htmx exchanges with the server,
1:32
we just want to return and render those views.
1:35
So we're gonna work on this idea of partial views and
1:37
you'll see a really cool library I created to make this easy. And then we're gonna
1:41
add three features to our Flask video site.
1:44
Infinite scroll, so we can see a feed of popular videos that are coming in
1:48
to the site. Live search,
1:50
live search has a lot of aspects to it,
1:52
so if we go and type like I want to search for whatever video on some
1:57
topic, I'm going to type in some words and as I type,
2:00
I want to see the videos that match that result immediately show up on the page.
2:04
If I type car, I want to see the stuff that has to do with cars
2:06
as soon as I stop typing.
2:08
So we're going to add that feature.
2:10
But on top of this we're going to add two more interesting aspects.
2:13
One is it's going to also change the URL
2:16
and put those various searches,
2:18
so if I first search for a car and then race, I would have to entries
2:22
in my browser history, and I could use back and forward to get between them,
2:25
even though they were generated by htmx.
2:27
And the other one is we're going to do deep linking.
2:30
So if we somehow create a
2:32
URL by doing a search,
2:34
we could copy that and then open it up or share it, and we'll come back
2:37
with the exact same results. So all sorts of cool stuff around live search, and
2:41
finally we're gonna add Click to edit.
2:43
You saw that in action, we're going to use this,
2:45
to add new videos to our site quick and easy and inline. That's it,
2:49
so much fun stuff to cover and a lot of things that we're not calling out
2:53
explicitly. But ways to design these Flask sites integrating with htmx that
2:57
are super clean, with almost no duplicated code or HTML templates anywhere, it's gonna be fun.