Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: Jinja2 templates
Lecture: Layout: Motivation

Login or purchase this course to watch this video and the rest of the course contents.
0:00 We've seen how to create individual templates.
0:02 But as you'll see as we build up
0:04 this application, that's not enough.
0:07 What we want to make sure that we do
0:08 is share the exact same look and feel
0:12 for the entire website across every page we make.
0:15 And ideally, we would like to just add the Delta
0:19 we want to just create what is special
0:21 about that new page, that new view that we're creating
0:24 and have it adapt to the existing ones.
0:26 So we're going to talk about shared layouts
0:28 with common templates.
0:29 And let's just see why you might care about that.
0:32 So let's just use a common website
0:35 that you may know of, as an example
0:38 here, this one
0:40 There's a lot of web design going on.
0:41 But there's also analytics.
0:43 There's also things like indicating
0:46 the RSS link for the podcast on every page
0:49 all sorts of stuff like that
0:51 we got this top nav bar, the scroll bar section
0:53 and so on, we want to have that shared across every page
0:56 so not just on the homepage.
0:57 But when you over to the episode list
0:59 you want to see that same look and feel
1:02 When you dig into an episode
1:03 you want to see the same look and feel.
1:06 So you can imagine that this website
1:08 the one I built here, uses exactly this concept.
1:11 It has a layout, common page
1:14 that defines things like the CSS
1:16 the order in which it's included
1:18 all those kinds of things
1:19 the nav bar and whatnot.
1:21 And then each page punches a hole into that
1:24 and fills in its specific content.
1:26 So this is super important.
1:27 It's not just about look and feel though
1:29 it's other things like making sure
1:31 we have a consistent set of information.
1:33 The top we might have a description
1:35 we might have a title, we have CSS
1:38 maybe some fallback CSS for older browsers
1:40 that's becoming less important.
1:41 But still all that stuff at the top
1:44 you want to make sure that's consistent.
1:46 We want to have the same CSS and same JavaScript files.
1:49 Often we organize these very specifically
1:51 like the CSS is at the top.
1:53 And because they're Cascading Style Sheets
1:55 the order very much matters.
1:58 If I include something that maybe
1:59 changes a Bootstrap style
2:01 and I put my CSS and then Bootstrap
2:04 well, Bootstraps going to ignore that
2:06 or basically erase that things like that.
2:08 So the order is super important.
2:10 Also, we might put the JavaScript files at the end
2:12 so that the page gets a visual load quicker
2:15 and then brings in the JavaScript files.
2:17 You know, the first time a little bit slower
2:19 but then of course, it's cached so it'll fly.
2:22 But also analytics, we want to make sure
2:24 that we have our Google Analytics
2:26 or get Clicky analytics little JavaScript tag
2:29 on every page, if you want to add analytics your site.
2:32 But if you do, you don't want to have to think
2:34 Oh, I added a new site did I remember
2:35 to put the analytics on there?
2:37 Or if you change something about it
2:38 remember to change it for, no you put it
2:40 in this one common layout, and then you share it.
2:42 We also want to be very careful
2:44 about how other pages change
2:47 the CSS and JavaScript definitions.
2:49 Like we maybe want to make sure
2:50 that they can only go after the pre-included JavaScript
2:54 or after the pre-included CSS.
2:56 Maybe one of our pages is a front page
2:59 sort of front-end framework type of JavaScript thing
3:01 it uses Vue JS, well, you want to make sure
3:03 that that gets included but just for that page.
3:05 So you want to create ways in which the pages
3:07 can push back to the common layout
3:10 to inject those but in a controlled way.
3:12 So there's this and way, way more
3:14 you want to create these shared layout pages for
3:17 and luckily it's super easy and Flask and Jinja.