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
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, 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.

Talk Python's Mastodon Michael Kennedy's Mastodon