HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: HTML template partials
Lecture: Partials: A more realistic example
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let me give you a slightly more realistic,
0:02
more complicated example where we get bigger winds with this partial concept.
0:07
We haven't talked about installing it yet.
0:09
It's really easy to use, and we'll see in just a moment.
0:11
But let's just look at one thing.
0:12
This is the final version of the app that we're building towards and there's going to
0:17
be this infinite scroll section. So over here,
0:19
notice that we've got our recent videos and as I scroll,
0:22
it's pulling more and more of them in.
0:24
Okay. So this implementation of, I need to show some of the videos right at
0:28
the beginning and then as I scroll,
0:30
I need to bring more and more in.
0:32
Well, that's a beautiful htmx thing that we're going to add.
0:36
But what I want to show you is what does the code look like. This page
0:43
is the page we were just looking at, all of it.
0:46
That's all of the HTML right there.
0:48
Now there is this partial section that's going to show you the videos.
0:56
So here are the videos that are going to show up, and we're gonna show, we're
0:59
gonna go through each one, and we have a way to show the video.
1:02
So there's these three levels of these partials, but taken as a whole,
1:06
they're quite simple and that is the entire HTML that we need to write to make
1:12
that cool infinite scroll happen with zero
1:14
HTML duplication. Fantastic, right?
1:18
Well, probably it's complicated on the server,
1:19
right? Nope. That is the entire server-side implementation.
1:23
Here's the one that loads up the original page and then when it comes back,
1:28
when htmx comes back, it just, it's going to ask for a partial and
1:32
say what page, what section it needs to get in this partial scroll and then
1:37
directly render one of the smaller pieces.
1:40
Amazing, so this is the kind of code we're going to be able to write
1:44
and we will write later as we adopt this Jinja Partials package.