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.
