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

Login or purchase this course to watch this video and the rest of the course contents.
0:00 We saw that our view was actually broken into two parts.
0:03 And it was using what I'm going to call
0:05 a shared layout master template.
0:09 Let's look into this.
0:10 So what is the concept here
0:12 why do we have this layout page?
0:14 Let's look at a real world site, say talkpython.fm
0:19 This site is built with pyramid and it uses this concept.
0:23 So over here you can see that I've got this home page
0:26 this is just the main index page on the site.
0:30 And it's got this big hero section
0:32 with episodes and last episode and so on.
0:35 And it's got this navigation across the top.
0:37 But as you move around the site
0:38 you'll see it has the same basic look and feel.
0:42 Navigation bit and the branding
0:44 and the Rollbar stuff is there
0:45 but the content of the page changed.
0:48 You go into an episode, same thing.
0:50 But at the top, the same stuff is coming along.
0:52 Also what you can't see but is happening
0:55 the same Javascript, the same CSS
0:57 and lots of other things like that
0:59 like the RSS feed indicator in a metatag.
1:01 All of that is being shared across these.
1:06 It's the layout page that makes sure that this is consistent
1:08 and automatic on every single page.
1:11 In order to implement a new page
1:13 all I have to do is figure out what goes in the middle.
1:15 And it's wrapped up by the design.
1:18 If the design changes, it changes across everything.
1:20 No muss, no fuss, it's super easy.
1:23 It's important to realize
1:24 that this is more than just look and feel
1:26 so that you have consistent head meta information, right?
1:30 There might be description, there might be a title
1:33 there's all sorts of stuff that goes up there
1:35 included CSS, the correct order of the CSS
1:38 and potentially even some javascript
1:41 for single-page app type things like.
1:45 Some of those go at the top, some go at the bottom.
1:48 It's typical to put the noncritical javascript files
1:52 at the bottom so that the page loads
1:55 and half a second later the javascript stuff loads
1:58 the first time and then of course it's cached, it's instant.
2:02 We also have consistency analytics.
2:04 You're sure that every single page includes your
2:06 Google Analytics tag or your GetClicky tag
2:09 things like that.
2:11 And, you also have a controlled way
2:13 to add on additional CSS and additional javascript
2:16 and make sure every time that goes in
2:18 exactly the right place.