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.