Q&A: Tag Template Literal

[00:00:00]
>> The Yo-yo package that you're using to include the HTML strings-
>> Yes.
>> Do you know if underneath, that's just doing an innerHTML call?
>> It's actually doing something pretty sophisticated. So the first thing that it does, so when you use that little HTML with back ticks around it, that's a tagged template literal, which is part of the language now in JavaScript.

[00:00:26]
>> In 6.
>> Yeah, in ES6. And that kicks off this parser. I actually wrote the parser that Yo-yo is using but it's few steps removed now, people have built more stuff on top of it. And I just use their thing, cuz I don't wanna write my own stuff if someone else did it in a way that I like.

[00:00:46]
So those pieces are using this package called morphdom, that's like virtual DOM, but with the real DOM. So it does diffing with the DOM elements that are already in the browser. And so you don't get the flash of page content when you blow away the DOM tree by setting innerHTML or anything like that, it does it more intelligently.

[00:01:12]
And it also sets up all the event emitters and everything in a pretty sensible way.
>> So it's not just a Band-Aid over an innerHTML call?
>> No, it's much more sophisticated. There's a framework as well, it's the only framework that I like, it's called Choo, C-H-O-O. And it's barely any more than what he showed you [LAUGH] already.

[00:01:39]
And for something slightly more complicated, I like to use Choo. But for things that are as simple as this, I think it's fine just to use Yo-yo directly. But there's another one called bel, I don't really even know what the difference is, B-E-L. Use either one, I think they both kinda work basically the same.

[00:01:57]
So it was fun to see that unfold, cuz I made it a tool for something different. I made this like HTML parser for doing stuff with some alt-virtual DOM packages, cuz I don't like how config heavy React is. It's like, I don't have to use it, I'd rather use other things that I like better instead.

[00:02:19]
And then people took that and found out that was faster in a lot of cases to do diffing with regular the DOM instead of virtual DOM, cuz you save on some overhead. It's not faster for all cases, but it's like comparable in all cases, and it's simpler. And then other people took that idea and built other pieces on top.

[00:02:42]
Built a whole kind of Redux-style framework with unidirectional flow and everything. I think it compresses minified and gzip-ed to be three kilobytes or something obscenely small like that, all told when it gets to the browser.
>> Makes it hard to track down like what is actually happening, with with so many different packages and modules and frameworks.

[00:03:04]
>> Yes, [LAUGH] that is true. [LAUGH] Yeah, there's a lot of layers. And I think as the web gets even more features and more of this technology becomes kind of stabilized, you're just gonna get even more. Just imagine how many things you have to know now to be a web developer.

[00:03:32]
There's gonna just be even more things in the future. It's gonna just, I don't know, I think it'll be fun. [LAUGH]