Oak Templating

[00:00:00]
>> One of the key benefits of web servers is that we can dynamically compose templates on the fly and we do. We use that for things like querying a database and then filling out the page with the data so that when the user gets it, the data from the database is in there.

[00:00:19]
Sometimes we do that with an AJAX call does anybody say AJAX anymore? Sometimes you do that with an HTTP call, I'm really old, and sometimes we do it on the server. It's sort of traditional to do it on the server than doing it over an HTTP calls is the newer way, we'll do it the older way.

[00:00:37]
But in order to do that, we need a templating engine, because we wanted to find templates. So we needed a templating engine for Deno, and we know that Deno has a third party registry, so let's just go out there and see what it's got. So if we look for template, we got a couple different options, template, template_dir and look there's a handlebars port for Deno which is perfect and that's the one that I wanna use.

[00:01:02]
Now, if you scroll down here there's a view engine, which is a template view engine for Deno, which seems like, well why don't we just use that, isn't that what you want? So the answer is yes and I did look at this, I think that it's probably pretty good, but syntactically is a little bit confusing.

[00:01:22]
So if I scroll down here, it gets into adapters and adapter factories and engines and things like that. And I thought that it would be too confusing for this so, I wanna focus on just what it's like to use raw handlebars. However, I should point out that if you do use that view engine for Deno, that you'll get things like caching which is good.

[00:01:42]
You want caching, you don't want to have to read that template and re-compose it every time if the request is exactly the same, all right, so how do we use this thing? Well, let's grab from their example here and just import it and remember, we have this deps file here where we're putting all of our nasty URL imports.

[00:02:03]
So let's just bring it in and it's gonna wanna fetch, so let's do that, fetch, there we go. While it does that, I'm actually gonna remove this HandlebarsConfig cuz we don't actually need this object we're gonna be fine without it. Okay, and then remember we need to export the Handlebars, alright and did y'all see that it just rearranged, I wonder if the Deno formatters is doing that?

[00:02:39]
So I did router and if I do Handlebars when I save it formats, and it wants them in alphabetical order [LAUGH], so it rearranges them all right, fine no I hit Escape again. All right, so how do we use Handlebars? Well, we need to create some templates, so let's create a folder in here called views oops.

[00:03:05]
And then inside of this, let's create a folder called layouts, we wanna have a main layout, we'll just call it main. And hbs means Handlebars and then we need to create some HTML here, we'll just call this Oak, where is it? Oak Project for our page title and then what we wanna do is, we want to render the body here in the body, so the way we do that with Handlebars is like this.

[00:03:41]
All right, so basically what we're gonna say is we're gonna find a template and we want you to insert the template in the body. Of this file but, having this main layout file we can have a single, alright let's do this is-size-1>oak project, and this will appear on every single page.

[00:04:05]
And then let's include my most favorite CSS library but it doesn't work in Handlebars cuz this is not there we go, no this is not HTML. So we'll just have to go with unstyled content, all right, so we have this main file, let's create a index.hbs file. And what we wanna do is have some content in this index file, which we can then insert into the main file.

[00:04:38]
And so what we're gonna do in our Handlebars index file here is, pull in some markup. And what we're gonna do is we're gonna pass data to this template, we're gonna pass an object called title. And then the title will be displayed out in the page and this content will be inserted into this page templating.

[00:05:05]
Alright, to make that happen, let's create a new folder and call it utils and then we wanna create a Handlebars utility here, so let's just call it hsb.ts Handlebars. Alright, so first we wanna import Handlebars from our depths file deps.ts, lovely. And then what we need to do is say const handlebars, or let's just call it hbs is equals new Handlebars.

[00:05:35]
And we have to pass a configuration object to Handlebars, so our baseDir is just the base, what else do we want? A compilerOptions we can just leave this as undefined, cuz we're not doing it, what else do we need? Defaultlayout is called main, extname is just hbs, the helpers we're not using the helpers so we'll set that to undefined.

[00:06:08]
The layoutsDir is called layouts, we just call it layouts and then partialsDir is nothing. We don't have a partials directory we're not gonna deal with partial templates here. So just let me make sure I got all that syntax correct, I think we did, but what we should be able to do now is render our template using this hps.ts file, so how can we do that?

[00:06:37]
Let's come back over to our indexRouter and then here what we want to do is. Instead of just rendering this out, what we wanna do is pull in of our hbs, so let's pull in. And in fact, we need to, I forgot to export it, let's do this, export default hbs and then we can import it and use it over here.

[00:06:59]
[SOUND] Okay? [SOUND] So let's get, it's default, so we can just do, we should be able to just do hbs, yes okay and then let's do. Hbs what we wanna do is await hbs.renderView, and we're gonna render the index view and then we're gonna pass a title object and we'll just say Oak, okay.

[00:07:32]
So now instead of just sending out text, we are sending a render template, so we're actually dynamically composing the page on the server and sending that back and we air it out here. Because our watch process, I'm not confident about this, let me run this again. Alright, now we're listening so let's try this and see if you got all this right go to 3000 my god [LAUGH] all right.

[00:08:08]
We got not found so let's see, what's going on here, let's take a look at one of the things that we can do here is. On the layouts, one of the things we can do is we can create an empty partials directory. And that will let us sort of opt out of this configuration object, you have to have a partials directory or else the air is out.

[00:08:35]
And just take the defaults, but let's let's try this then we just need const hbs equals new Handlebars. Okay, and then there we go, let's try it now, there we go, Oak Project, Oak, Welcome to Oak, it's not some pretty digits