Template Strings

[00:00:00]
>> We've seen this little bit already but there is this fantastic feature that I don't hear a whole lot of talk about. It's part of ES6 called template strings, so this is a new part of the language that has multiline stream syntax. So if I go ahead and run this program, what it's gonna do is, Call it template.js.

[00:00:25]
So this file will just print out those strings, and it can use variables from the environment. So here I have a variable called n, so this is gonna print hi then on the next line, it's gonna print n equals 5, and then on the next line, it's gonna print something else.

[00:00:45]
So, really simple it seems like this isn't so important. I guess it could replace a lot of places where you have to load a custom template engine into the browser. So you kind of get this for free now, and there are ways to run pre-processing steps when you ship for production in case people's browsers who are loading your page don't have this feature yet, although it's pretty well supported.

[00:01:12]
There's also this thing that's even more obscure called tags, template, string and these are really fantastic, it looks a bit odd. So if I go into this function again, so you can put another function, I'll call it tag in front of the opening backtick, that is the template string function.

[00:01:36]
And what this lets you do, is write your own implementation of how you want the templating to work. So how it works is you get an array of different string chunks and then everything that's put in these dollar sign curly braces, you also get a handle on that.

[00:01:57]
I'll just print out the arguments, Then the return value is the return value of this whole thing. So it's like calling the function yourself with like a second write out long form, what that would be. So these two things would be equivalent, so this would be hi, 'n = 'Wow', I guess there would be like new lines and stuff in there.

[00:02:25]
It would be hi in equals actually. And then it would be wow, so that would be the same thing. And then the additional arguments that are passed in are all of the values that are interpolated. Kind of a bit esoteric, but the important thing is you can have quite sophisticated ways of doing templating, and also other kinds of things all together like for example, you can use this technique to have GLSL shaders in webGL.

[00:03:06]
So there's a modular system called GLSLFI that uses this technique as well. We'll be going in to that a little bit later, so if I just run this program now, we see the arguments, so the first argument is that array, and then the second argument is all of the interpolated values that are passed in.

[00:03:27]
So I've got a little library for doing this kind of stuff that's now used in quite a few packages that we'll be talking about. It's called hyper x, and it's an HTML parser that's built to be used in this way as a tagged template string function. What that looks like, is you load up the module hyperx, then you can pass in your own implementation for what's going to happen for every tag.

[00:03:52]
So here the arguments that hyperx is going to supply are the tag name, so that's like a div, or input, or text area, whatever you like. The props are all of the things maybe you like the class equals whatever, and so that's an object that map's all of those properties.

[00:04:14]
And then the children are if you have something that is not self closing, like a div tag, then the children are everything that lives in beside between the div, and the </div> at the end. So, you can imagine how you might be able to use one of these new techniques for building front end like a virtual DOM.

[00:04:37]
Or Dom diffing to build your own virtual Dom infrastructure with a pretty nice template syntax with just a small reusable library like this. If I run this program, it's gonna gonna print out the tag name, the props and the children for every little bit. So I'll call this html.js or I'll call it hyperx.js, So here's our program, I run it, I get back so these things are the first that were printed, so see that the h1 tag is in there, the div tag is in there we also got some some attributes like 3,000 is the interpolated value.