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