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