HTML Template Interpolation

[00:00:00]
>> Maximiliano Firtman: The next part that is actually for this, well, actually, we have two more design patterns for this one, is to try to use HTML templates. So let's look at this. Let's go back to this template. You can see here that the template the web component is using.

[00:00:20]
Can you see that I have an empty paragraph, an empty price, even an empty image, no source? So if you're used to Angular, Vue, templates, React, typically somehow you say here, hey, here I want something, okay? So you express that you want something there. But by default on web components, you don't do that.

[00:00:46]
But I like the design pattern from React for interpolation, where you can go to the template and say, hey, here you put the variable with the name, the description. Here you put the variable with the name price. But let's try to do that, but with Vanilla JavaScript with no libraries.

[00:01:06]
It's kind of tricky, to be honest. We are going to work with this one, with this template, it's the cart-item-template. That from this app is when you add something to the cart, it's actually this one. So it's a web component that is rendering the line, okay? The row, each row.

[00:01:25]
So we are going to try to use the template there. But right now it's using this HTML, so I'm going to add something here. I'm going to use template string syntax. So it's gonna be something like this. And let's say, all right, here I'm going to use the variable with the name quantity or QTY, name, price, and yeah, for the button, we don't need to do anything.

[00:01:52]
So I want to somehow, these two automatically now be tied to the data instead of me going and saying, because right now, this is cartitem.js, it's reading the template. But then it's actually using querySelector to find the element and changing the content. It's not automatically creating or binding the data, okay?

[00:02:22]
Makes sense? So as I mentioned before, this is kind of a trick, actually it's not really part of an API, so it's hack to make it work. So to make it work, this is how it works. We don't want to create a function that typically would call the function Interpolate, okay?

[00:02:42]
Interpolate, I mean I will write it, it takes time to get to understand what's going on. I'm not sure, I'm not confident that you will understand exactly what's going on, okay? But I mean, it's not about you, it's really hacky, okay? And also, it's not about, man, it's really really hacky.

[00:03:03]
Let me write it. So you will receive a string and parameters, okay? And I'm going to say, I'm going to get the names, object.keys from the parameters, the name of the parameters, okay? And the values of those parameters, with object values. I will try to do some kind of test to see if you get, here comes the hacky part.

[00:03:31]
I'm going to return a new function. You say a what? A new function, I'm not sure even if you know that you can return a function, okay? A new function like this. The function will receive
>> Maximiliano Firtman: The names like this. Actually, this is the arguments, and then we pass in a string with the body of the function.

[00:03:59]
So it's creating a function on the fly. We can do that in JavaScript. And we pass as a string the body of the function, okay? So, it's empty right now, okay? So this is the function definition, and now I'm going to call the function, spreading the values, okay?

[00:04:19]
And it's not yet, if this is not hack enough, we need to do this, okay? And also, we are now going to return this. It says, then what? I said it was hacky, okay? I think, all right, I don't need that comma, but anyway, if you want, we can take this out and call this the body and put it like this.

[00:04:48]
Okay, it's really hacky, as you can see, but we will see if that works. So what's the idea, okay? What's the idea? The idea is that, let's try to understand that function first. What's the hack? How the hack looks like? By the way, this function is just, you create the function once, you use it every time you want to implement this pattern, okay?

[00:05:13]
So let's say, I will delete this, so this is just for testing purposes. I have an HTML that will look like this. I want an h1, and I want the h1 to interpolate with the title. And I have a paragraph that I want to interpolate with the description, okay?

[00:05:36]
But I don't have the title or the description right now, so I'm not going to use, here, I'm not going to use backtick, just a normal string, okay? Because I don't have a title ,I don't have a description, it's just, this is my template by the way, I can you I cannot use new lines.

[00:05:59]
But I want somehow to make the interpolation. So I'm going to call, I will say the final HTML, it's calling my function, interpolate, I will pass my string, HTML, and I will pass an object with parameters. That's the idea. So I will pass an object that will have a title, I don't know, Vanilla JS, and a description,
>> Maximiliano Firtman: Great way to create web apps.

[00:06:32]
So I want that to happen, so we understand the goal, right? Well, how does it work? Well, first, let's try to analyze this. Names would actually get the names of the keys, so it's title and description. Values will get, well, Vanilla JS, and great way for blah, blah, okay?

[00:06:57]
Make sense? Now, here comes the tricky part. We create the body, okay, with this. So the body will actually be return and the string, and the string is this.
>> Maximiliano Firtman: That's where we are returning, okay? And we are creating a function now. We are creating a function, let's create the function.

[00:07:25]
So I'm testing this to see if you can get what's going on. It doesn't matter if you don't get it, you just use it. We create a function, receiving then spreading the names, so, title and description. So it receives title and description as an argument, okay? And the body is, this is a body.

[00:07:48]
>> Maximiliano Firtman: And then it executes the function,
>> Maximiliano Firtman: With the values. And the values are my true text. And so the trick is actually creating a function on the fly, that will execute a template string that receives a type span description, and just call the normal interpolation. It's really hacky, okay?

[00:08:21]
By the way, we were really used to these hacks 15 years ago. Everything was a hack at that time, okay? But does it make sense? Kind of, okay? Anyway, so let me remove all the demo part I have here. So, that means that now I can, the whole idea is to now replace all these things that we have here.

[00:08:48]
So I'm going to just delete, I will keep the delete button because I'm not touching the button. I just need to, I got the template, that's okay. I'm actually not using this anymore, that's fine. And now I'm gonna say, my inner HTML will be the interpolation of the inner HTML from the template.

[00:09:12]
That's the one that we are getting from here. So this is my string, okay? And I want to interpolate, to run the interpolation over an object that I'm creating with the properties, quantity, price, and name. Because these are the variables that I'm expecting, okay? Well, in this case, I already deleted the previous call, but I already have the thing.

[00:09:42]
But actually, here I need the item.quantity. And I'm adding an x, so it says 2x, 3x. Price, it's gonna be the dollar sign and then an interpolation with item .product.price. To fixed two, so we have only two decimals.
>> Maximiliano Firtman: That's what I want to interpolate here. And name is simple, item.product.name.

[00:10:14]
Missing a comma, like that. Again, this Interpolate function should be somewhere else, it doesn't need to be there, so I can reuse it anytime I need it. It can be a class, it can be a singleton, okay, you name it. And then you call it every time you wanna do something like this.

[00:10:31]
And now cross your fingers, let's see if that if that works or not, I don't know.
>> Maximiliano Firtman: Let's reload, add something here. Let me add another Macchiato. When I'm getting there, it's there, but now it's interpolated. So, adding something new, it's simpler. I go to the template, I just add what I want.

[00:10:58]
So, I mean, I go here and I add something else, like, I have the name, and also, color, whatever. Then I'm going here and I'm adding something, whatever. Anyway, string will work, so it's it's simple now, it's simpler, to go and change my template and then bind that template with something else.

[00:11:29]
So if that worked, now I have that, okay? So now it's much simpler to change that. I don't need to touch the DOM, I just changed my data, the data source, and the template, okay? Make sense? Yeah, hackey, but useful anyway. By the way, if you're using React, I'm not saying they're using this hack, but they're not using the hack.

[00:11:55]
But internally, if you think about everything that happens with React, it's also hacky in terms of what's going on when everything is being executed, okay? It's not this hack, it's a different hack, but it's also hacky, okay? So, yeah, this is like a micro framework that you are creating, at some point.