Web Components with JavaScript

[00:00:00]
>> This next part we're actually going to go kind of deep on on writing JavaScript. And that is kind of the whole next section of the talk here writing web components with JavaScript. And I put this guy in here cuz he's just frustrated, I'm frustrated you have your last half hour.

[00:00:19]
I'm frustrated but the styling can be frustrating but authoring I think you're starting to see it. One thing you need to know about web components is they have a life cycle just like a view component or a react component, or I think every other framework has a life cycle in updating life cycle.

[00:00:44]
And in this custom alert example, we get the observed attributes and then we have a constructor and the super says, make our custom array here. Or I can do some drawing here make our this super means make our custom alert behave like an html element right that's pretty easy.

[00:01:07]
And then next in the stack it's gonna go to connected callback, right, once it's ready to go, it says I'm gonna say I'm connected and you can do whatever you want. Once I'm connected, disconnected callback, whenever if you have to do teardown work, you do that in the disconnected callback.

[00:01:25]
This might be like event listeners or something like that. And then attribute change callback is kind of a yeah. So connected would be like React's componentDidMount, componentWillUnmount. AttributeChangeCallback is a little bit like almost like views watch syntax if you've ever used that but you can be basically, when an update happens to something, it's observing.

[00:01:48]
It will tell you the old value and the new value in case you want to do something with it in between like intercepted or add 1000 to it to make more money [LAUGH] than your dark website. So then you wretched define the element in the bottom of the life cycle.

[00:02:06]
Okay, then it gets more complicated right injecting templates. So you have like to create a shadow DOM, you need to clone a template. And so here I'm like creating a template with a Create Element, and then putting the inner html, this feels a little disgusting and your browser in banking software might not appreciate that.

[00:02:29]
I'll explain that a little bit further. But then div hello world, right? And then we're expecting that to show up in the shadow. So I have to, in my constructor, attach a shadow route and create a private variable. Attach the shadow mode open, and then I'm going to append the child, but I'm going to copy the my template content clone node.

[00:02:54]
So you just clone that node and inject that child into the shadow DOM okay and the shadow root that no you put it all together it's fine. We are snobby developers now, we've had decades of ergonomics behind our back and this does not feel like a good experience in authoring a web component.

[00:03:19]
Again, there's got to be a better way. I hear you say, there's got to be a better way, everybody.
>> It's got a better way.
>> [LAUGH] this is good [LAUGH]. Well, hey, didn't you say web components were designed for framework authors? Yes, I did say that web component libraries.

[00:03:46]
And this gets at an earlier question, but there are lots of web component libraries. There's lots of ways to cut a web component. Then, at last count, I have this website here from I think it's ‹div›RIOTS. Puts it up, you have ‹div›RIOTS. They audit all the different ways to make a web component.

[00:04:10]
And there's 61 different ways to spit out a web component and they compare them all. Like how long it takes to make a web component or how much code it takes yeah, maybe don't use that one. [LAUGH] but there's a lot of different ways to make a component.

[00:04:26]
And then they kind of do it in a set of like 30 components as well. And they see like how much reuse is kind of happening very valuable thing that div rights is doing there. But what's neat about web component libraries, they're typically five to 10 kilobytes in size.

[00:04:43]
And then provide a lot of convenience and last in a small package that's either syntactic sugar or, just helping you kind of, I guess shortcut problems or redundancies and stuff like that. So, we looked at maybe a little bit about how like lists helps in CSS and stuff like that.

[00:05:04]
But so there's a lot of different flavors. And my favorite example of this is, you just saw the way to inject a template, you create a template or you could query selector an ID of an existing template on the page. And then you clone that note with Lit, it looks a little bit more like JSX in a React component.

[00:05:29]
If you have a render function, that's the thing they invented and put in there, and the render function returns html tag template literal. And this html tag template literal is, I think the most wonderful thing in the world. There's a lot of, you should watch this video I've included here.

[00:05:48]
That's kind of the announcement of lit html which is the project for that html tag template literal. But it's just a it takes a string and converts it into html. But what it does is it creates a template element that creates a template element. And then it remembers which parts you have JavaScript the like, dollar sign curly braces, it remembers those parts.

[00:06:11]
And so when you update, it actually only updates those parts. So it's really intelligent update whereas like in in react you'd have to memorise stuff or whatever to make it not rerender on every change. The Cascade is really huge this sort of balances because it just says, well, I've remembered what I need to update.

[00:06:33]
And so I only update the little micro parts. I don't update the big template. So pretty cool, pretty efficient updating system. But that's all happening behind the scenes. And that's like another reason you'd maybe want to use a framework, right? I'm not div report is not going to code my own a template creator system LAUGH] JSX alternative, but somebody has.

[00:07:00]
And so I'm going to leverage the framework to help with that. Again, the lit has a full component life cycle and it adds, actually, hooks. We had connected callback and disconnected callback, but it adds new I guess more human language update, like, hey, I'm going to perform an update.

[00:07:21]
Did you wanna do anything to this data before I update it? No, great then I'm gonna render okay? And then once I render, then I'm just gonna tell everyone I updated or an attribute updated or whatever that changed. And then if it was the first update I'm actually just gonna say the first update happened.

[00:07:40]
So like component lifecycle maybe looks a bit more like this like it's gonna update and then I'll render and then tell everyone and updated. And then they'll like go back and then kinda do a loop. So I don't know if that's exact but that's sort of how I see it just like it's going to actually like figure out that it when it needs to render a little bit more efficiently.

[00:08:02]
Give us a little some few more hooks in, doesn't feel as ugly to be honest which of course is the most important thing in web development.