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