HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: HTML template partials
Lecture: Partials: A more realistic example

Learn more about this course
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.