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. And it was using what I'm going to call a shared layout master template. Let's look into this.
0:11
So what is the concept here why do we have this layout page? Let's look at a real world site, say talkpython.fm
0:20
This site is built with pyramid and it uses this concept. So over here you can see that I've got this home page
0:27
this is just the main index page on the site. And it's got this big hero section with episodes and last episode and so on.
0:36
And it's got this navigation across the top. But as you move around the site you'll see it has the same basic look and feel.
0:43
Navigation bit and the branding and the Rollbar stuff is there but the content of the page changed. You go into an episode, same thing.
0:51
But at the top, the same stuff is coming along. Also what you can't see but is happening the same Javascript, the same CSS
0:58
and lots of other things like that like the RSS feed indicator in a metatag. All of that is being shared across these.
1:07
It's the layout page that makes sure that this is consistent and automatic on every single page. In order to implement a new page
1:14
all I have to do is figure out what goes in the middle. And it's wrapped up by the design. If the design changes, it changes across everything.
1:21
No muss, no fuss, it's super easy. It's important to realize that this is more than just look and feel
1:27
so that you have consistent head meta information, right? There might be description, there might be a title
1:34
there's all sorts of stuff that goes up there included CSS, the correct order of the CSS and potentially even some javascript
1:42
for single-page app type things like. Some of those go at the top, some go at the bottom. It's typical to put the noncritical javascript files
1:53
at the bottom so that the page loads and half a second later the javascript stuff loads the first time and then of course it's cached, it's instant.
2:03
We also have consistency analytics. You're sure that every single page includes your Google Analytics tag or your GetClicky tag things like that.
2:12
And, you also have a controlled way to add on additional CSS and additional javascript and make sure every time that goes in exactly the right place.