HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Course conclusion and review
Lecture: Core elements of the starter Flask app

Login or purchase this course to watch this video and the rest of the course contents.
0:00 In this course we did not start from file new project.
0:03 No we started from an existing Flask application that already worked and that had already quite
0:09 a bit of structure and web design and everything in place, and we added some features
0:13 to some of the pages and then added new pages in the case of the Active
0:17 Search. So let's just review a couple of the core building blocks and pillars of
0:22 this app as we got started.
0:25 So remember, our models, our data exchange that sort of stood in for our database and
0:30 if we use SQLModel, could actually be our database models or Pydantic models.
0:36 So we've got for example our category which holds a bunch of videos and we just
0:40 basically derived from the baseModel from Pydantic, create the fields and give them types like
0:45 str, str and List[Video],
0:48 another pedantic model. And then we can immediately just load up some sort of JSON
0:53 document and hand it off to Pydantic, and it will load these up and create them
0:57 and that's basically how our database, our lightweight database worked.
1:01 Another really important idea was the idea of View Models.
1:05 The view models job is to exactly exchange the data that the template needs.
1:11 Go to the view, it gets the data may be off the URL and so
1:14 on and then this thing is going to go and get the rest of the data
1:18 may be from a database or an API,
1:19 possibly from a form, do the validation and then sync that back to the
1:25 HTML Jinja template. So we have this ViewModelBase.
1:29 It had all sorts of good things like it would store the request,
1:32 it would create this merged request dictionary like headers,
1:35 cookies, form and so on.
1:37 All that data together. We would derive from it like here's our IndexViewModel
1:42 and it has a list of categories we got from the database, and then it turned
1:46 those into rows because we want three categories per row and that was easy to iterate
1:51 over, so hen we got to Jinja we didn't have to write complex Python code embedded
1:55 in HTML. You should never do that,
1:58 do it in the view model and then hand off the final data to the template.
2:02 Then we just return the dictionary out of our index view for our homepage and
2:07 that shows all the categories right there.
2:10 Finally we had a lot of conventions in the way we structured our code.
2:15 Remember we had our views and they kind of drove everything.
2:17 We have feed home and videos.
2:19 Then over in the viewmodels folder we would have view models that corresponded to view
2:24 methods inside of that home. So we have the folder home, and then we had
2:29 the name of that function inside home.
2:32 So we have an index function and So in the view models we
2:35 have viewmodels/home/index_viewmodel.
2:39 We also have this shared/viewmodelbase and then we have the same basic organization
2:44 for templates. We have their home, set of views and then in there we have
2:48 a function called index. It's gonna use the HTML Jinja template index.html.
2:55 Hopefully you're familiar with this at this point.
2:57 We've been working with it for a long time, and I find this organization very helpful
3:00 You don't have to use it.
3:02 You can use a different organization but just have something like this where,
3:06 you know, I'm working on this function or this HTML template.
3:10 Here's all the other pieces and how it fits together.