Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Chameleon templates
Lecture: Template comparison: An example
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
So, let's take a simple but fairly realistic example to compare these three template languages. Okay so the idea, the goal will be
0:10
given a list of category dictionaries with an image, name an image and a name on each one of them display them in a responsive grid.
0:19
In this example we're going to be working with this data and these are actually from a bike shop so there's different categories of bikes:
0:26
comfort, speed, hybrid, and each one has a category picture we won't go into the details, right, this is not
0:32
our main demo and stuff, but pretty simple example. We're going to return this data to the template and our goal is to turn that into HTML
0:41
showing the picture in a responsive grid type of layout. We want it to look something like this. We're going to do this in each of the languages
0:49
and see what the various moving parts look like. First up, Jinja2. So you can see with Jinja2, every time you have a statement
1:00
on a given line, you open it with {% so {% if not categories %} So if there are no categories past this view we want to just show no categories
1:11
rather than like a blank page. But if there are categories, we want to loop over each one of them and print out or add to the DOM a div
1:19
and within that div having the image within a hyperlink and the category within a hyperlink. So a couple things to note
1:27
there is a lot of open close, open close, open close notice at the end we have {% endfor %}, same with endif. That seems unnecessary and annoying
1:39
but the thing that I think is not great about Jinja or Mako you'll see is the same is this is not valid HTML. I can't take this and open it up
1:49
in an editor that does not understand Jinja and have it think it's okay, right I can't hand this to a designer and have them use their tools on it.
1:57
But okay, let's put that aside for just a minute what else have we got here? So we do {{ }} to get the value out, we want
2:02
to get the name, and we want to print the lowercase out. That seems great, there's nothing wrong with that that seems totally beautiful
2:09
it's as good as it's going to get. But this {% endfor %} and the fact that it's not valid HTML Eh, I'm not loving it. Alright so that's Jinja2
2:18
let's look at how it looks with Mako. Super similar, a little bit less syntax, it's not {% if not categories %} but it's % and then one line of Python
2:30
including the colon. You do still have the endifs and the endfors and so on. Now, in Mako the values that come in as dictionaries
2:38
you have to treat them as full-on Python dictionaries you can't do your attribute access, you can't say c.name
2:44
you got to c.get(name).lower(), maybe if you want the default value that's not none to be a little bit safe here.
2:51
So the sort of attribute access is not so nice in Mako but the structured stuff, little bit better so I'm not sure which I prefer
3:01
but just on a pure popularity basis I think I would tend to pick Jinja2 just because like I said that's really popular
3:08
so picking it obviously puts you, so your examples and stuff sort of match what's out there. Okay, so we've already seen Chameleon, let's compare
3:16
how Chameleon would do this same bit of code. Simpler, right? Do you want to show the no categories? tal:condition, not categories.
3:26
You want to show the other part when there are categories? tal:condition categories. You want to do a loop?
3:32
tal:repeat, c.categories, and then you have basically the same type of access as you have in Jinja2 c.name.lower(), but instead of doing
3:40
{{ }}, you do a ${ } I'm not sure actually, I think I like Jinja2's better but look at this, this is valid HTML.
3:49
Like this is legitimate HTML here, it's not invalid. It has wacky attributes, like tal:condition that don't mean anything to the browser
3:57
but the browser will just ignore that. So I do really like that, but I also like just the lack of ceremony with all the the % and the {
4:07
and the endfors and the endifs and all that kind of stuff. So to me, this one definitely wins because it's pure HTML and because
4:17
it's just cleaner in my opinion. But like I said, you can pick whatever you want you want to use Jinja2, that's totally great
4:24
you can use that, Pyramid totally loves it. But for our example, for the reasons I just described in this one app we're going to build in this course
4:32
I'm choosing Chameleon because I think it really is better. It's not as popular, but that doesn't mean it's not better.