Full Web Apps with FastAPI Transcripts
Chapter: Dynamic HTML templates
Lecture: Template languages: A comparison

Login or purchase this course to watch this video and the rest of the course contents.
0:00 I think the best way to get a feel for these three different template languages and which one might be the best to choose for our application,
0:08 would be to compare them with a simple example. So what we're gonna do is, say, given a list of simple dictionaries or simple objects,
0:17 each of which has a category in an image. We would like to show these in a simple,
0:22 responsive grid. So this comes from a bike store and would look something like this: would have comfort bikes, speedy bikes,
0:30 hybrid bikes, folding bikes and so on. And what we want to do is generate this HTML results,
0:35 and we're going to do it with these three different template languages, given this data on the left here. So how would this look in Jinja?
0:43 Well, the first thing we have to address is what if there's no data? So either the list is not there at all. It's None, or it's just an empty list.
0:53 In that case, we want a simple <div> that says "No Categories". So that's the first block, and what you should notice here is you have curly
0:59 percent. If statement close curly and then annoyingly curly percent endif curly percent, there's a lot of this open close.
1:09 Like if this and if for that and for and so on. So you see a lot of that in Jinja.
1:16 Alright, so we've got this categories up here and this is standard Python.
1:19 If you can read Python, you can read this, right? Then, if there are categories we want to do a for in loop over them and repeat a <div> that has
1:28 two things: it has a hyperlink that wraps an image and it has a hyperlink that wraps just the name.
1:36 So we're going to do a four c in categories in this bracket percent thing and then in the for, we have the HTML and wherever we have a dynamic element
1:45 from our loop, we have c and then we'll say go to the name lower case the name just in case because that's how our routing works,
1:53 let's say. Over to image then we have just the name properly cased shown there. OK, so this is what it looks like in Jinja.
2:01 It's not terrible. If you know Python, you know it pretty well. Here's what it looks like in Mako and the only
2:08 real difference that you'll see here is that instead of having curly percent closed curly percent and closed percent curly,
2:17 you just have percent on one line. And to me, honestly, this is not a very nearly as popular as Jinja
2:22 but I think this is actually a pretty neat language because it's got the same functionality, but you just write your symbols,
2:30 which I think is kind of the Pythonic way. One difference is the way you get strings from objects.
2:37 So instead of saying curly bracket curly bracket variable, you say dollar curly, variable. So that's how it looks over here.
2:45 One thing that's annoying, it's that dictionaries don't get dot style traversal. You have to say, you know, call the get on them and so on.
2:52 Right. So this is Mako. Third one is Chameleon. Now again, we're gonna have these two conditions.
2:59 The top condition is we want a <div> to be shown if there's no categories. The thing to take away from Chameleon, the Zen of Chameleon,
3:07 really, is that it has this template attributes language t-a-l or tal. And the way you program it is to not write Python,
3:14 but to write small, small expressions as attributes. So here, if we wanna have a <div>, that's only shown when there's no categories,
3:22 we say <div> no categories, and then we put this attribute that says tal:condition. And here we put basic Python,
3:29 not categories, you call functions, do all sorts of Python things in here. That's how we do that part.
3:35 Then the next part, we're gonna have the opposite condition. So just tell tal:condition="categories" and then we want to do a loop like before
3:42 So we say, <div tal:repeat="c categories"> and then it's gonna repeat that entire block, the <div> and the two hyperlinks, each time it sees an element
3:53 in that category, then it's gonna write it out. Here we use dollar curly brace like we do in Mako,
3:58 but it does get the dot traversal of even dictionaries. All three of these, they're pretty decent,
4:04 right? It turns out, Chameleon is really by far my favorite language. There's two primary reasons I think this is a much,
4:13 much better language, even if it's not as popular. I think it's much better than Jinja. One, you don't write symbols over and over and over again.
4:23 You don't say curly percent test closed, percent closed curly, curly percent and if close percent curly and just that stuff all
4:35 over. But the other drawback of writing code like that is what you get is not proper HTML like this.
4:42 This is proper HTML, there might be attributes that don't make any sense to a standard web browser, but if I were to load this up in some kind of
4:49 tool and I try to look at it or I hand it to a designer, they would be able to look at it straight away and go: yep, I know what this is.
4:56 This is HTML. So I think the fact that it's basic HTML and you don't put a bunch of code in there, I think that makes it really quite nice.
5:05 The other one is, and I think this one you could be split on is a lot of people see that they could, they cannot write arbitrary Python here,
5:14 where, over in say Jinja, there's ways to write arbitrary Python code in your template. Some people might see that as a drawback,
5:21 like I can't do all this cool stuff in my template. To me, it's a feature. It means I can't put logic, complicated Python logic into my HTML.
5:31 Where does that belong? I don't know. Not here. It belongs somewhere else.
5:35 We're gonna talk about where it belongs in our web application we'll build later.
5:39 But limiting the amount of Python code that we can write over here, to me is a feature, because it means you have to have more professionally,
5:46 more properly factored applications. You guys can decide to use whichever one you want for
5:53 this one, we're going to use Chameleon because it's proper HTML and it doesn't let you write arbitrary HTML throughout it.
6:01 It doesn't have all these symbols everywhere in terms of the open close and all the Python code that's interlaced and so on.
6:08 I think this is a great language, we're gonna use it for our course. What I'm going to show you,
6:12 there's a very, very, very small change to make Jinja do the same thing So if you prefer Jinja,
6:18 you can use that, we're gonna use Chameleon for the reasons I just laid out here.

Talk Python's Mastodon Michael Kennedy's Mastodon