HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Surveying the non-js-enabled Flask app
Lecture: Key elements of code organization

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Let's go through how I've organized this application and the various important key elements as we
0:06 go through it. One of the things I really don't like to do is give
0:10 you a simplified demo tutorial style application,
0:13 I want to give you something that feels real,
0:15 that you can use to build real applications.
0:18 if you go to the Flask site and you follow along with the tutorials.
0:20 Very often they say we'll create an and then proceed to jam everything
0:25 about the website into that one file, and you'll end up with one huge python file
0:28 that's hard to understand. Our application couldn't be farther from that.
0:32 We've organized it a lot into different areas.
0:35 Models, these are like our database models effectively, Services,
0:39 these are our data access query layer.
0:41 Static files are like CSS and images and so on. Templates,
0:46 these are our HTML file. Virtual environment, that's just hanging around.
0:51 We have viewmodels, we'll talk about that in a minute, and we have our
0:54 views. These are the different categories of implementation,
0:57 like here's all the stuff to do with videos and here's the homepage and here's the
1:00 feed and so on. Then we have our here
1:04 of course. If we go down to the bottom,
1:05 you can see we're checking to see if you run it directly as in right click
1:09 and say run, ten we have to configure(), which sets up like URLs and database
1:14 access and all that kind of stuff, and then we're running it, and we're only putting
1:18 it into debug mode if we're running it in a debugger.
1:21 So like if I press this button right there, but not if I press the play.
1:26 So you can sort of do that here,
1:28 if you're interested in that. You don't have to say it's being debugged, it'll
1:31 do like reload and whatnot. This is our application
1:34 in terms of how it's running.
1:36 Let's look at these various pieces.
1:37 So our models, we're using what are called pydantic models.
1:40 Pydantic is a fantastic way to define these models, it can parse JSON, it can turn
1:45 into JSON and whatnot. And they have validation on their values and automatically adapt to
1:50 the type. So if you said this was an int but you passed in a
1:54 string, it would just try to parse it to an integer.
1:57 So we have our pydantic models here, our data access models basically. We've got one for
2:04 video and then our category, this is what we were looking at with the, like
2:08 the racing or the EV
2:09 and so on. We have category, which has a name and a banner image and
2:13 then a list videos. So that's our models. In our service
2:17 it does queries against aspects of the database.
2:21 So let's see down here. Get a video by id.
2:23 And we're just looping over,
2:25 This is just an in-memory,
2:26 real simple thing. We are not even using an actual database because I don't want you to
2:30 have to deal with figuring out SQLAlchemy and schema changes and all those kinds of
2:35 things. We're just keeping it really,
2:36 really simple storing our data in JSON.
2:39 And then this thing just parses across those values.
2:42 OK, just think of, you know,
2:44 we're just going to use these functions here in the video service to do queries against
2:49 the video data or even make changes like adding data.
2:53 Static files should be pretty straightforward.
2:55 I've downloaded htmx. I don't like to pull them off of CDNs,
2:59 I want to make sure we have the same one all the
3:01 time. Multiple times, I've had the CDN just go away or stop offering that
3:06 file and that's no fun. So let's take control of that ourselves and serve up
3:09 our htmx file. Here are our templates.
3:12 So for example, when we get to our homepage,
3:15 we have our video collector, I'll point you at that real quick. This page where it says
3:19 Video Collector, favorite videos, Yahoo! style, and it has the categories.
3:24 All right, here's your style, and then it does standard Jinja stuff where it loops
3:28 over and puts a row for each category in the row, we're going to pass over
3:34 a bunch of rows where each row holds three categories.
3:38 Some cool stuff on how we did that,
3:39 I'll show you that in a second.
3:40 But we get one of these category models from right there.
3:43 And it's super easy that we can just say here's the URL to the categories,
3:46 the basically, lowercase name, here's this title,
3:51 there's that. How many videos there are in it and so on.
3:53 So the HTML is incredibly simple, and it's generated by the views over here at home.
3:59 So for example, this is the view that we were just looking at.
4:04 It uses home/index. I've employed this idea called View Models.
4:09 And the idea of the ViewModel is to know what data the template needs.
4:13 You saw that it requires rows all put together.
4:16 You know, each row is going to contain a category and so on.
4:20 And if it was a form,
4:21 it would actually do the data exchange as well.
4:23 So this part is actually incredibly simple.
4:25 Let's go look at the ViewModel and that will kind of round things out.
4:28 So this thing here is going to hold a list of categories,
4:32 that's what we're looping over. But what was more interesting is we needed rows.
4:37 And remember if you look here,
4:39 I wanted three categories per row, as many as we had.
4:43 So what we're actually doing is using more_itertools and say, given all the categories,
4:47 returned them into smaller collections,
4:51 each sized three or smaller. First time I got three,
4:54 then we only had two more, so then it was two.
4:57 And then because it's an iterable,
4:58 we turn that into a list and that's basically the entire application.
5:02 It has this data that it parses on load up into memory.
5:07 It has these services here that do queries against that in memory,
5:12 data, converts them over to these two different Pydantic models.
5:16 The Pydantic models are then loaded up with these view models down here,
5:20 like this one that we're in here.
5:23 Stores fields which gets returned over to the views.
5:27 The views render the templates, the templates generate their HTML and send it back.
5:31 So standard Flask stuff along those lines.
5:35 So take a minute and familiarize yourself with all of this code here.
5:39 Make sure you get it running and set up the virtual environment and just maybe follow
5:44 one of the URLs or two through their various spaces to see what's happening.