JS Recap & Q&A

[00:00:00]
>> Okay, let's recap. Web components have a life cycle, right? So that's kinda they go through some code for you just like every other JavaScript framework. There are libraries that help make writing Web Components easier, just makes it more palatable to developers. And there are lots of different flavors of Web Components.

[00:00:23]
And I almost promise you if you have one particular must have somebody's probably addressed it, and is working on it in some context. And even some Js frameworks can import and export Web Components. And I don't really show it here but I've actually found in preparing for this course or even just taking questions about Web Components, something like Lit is really awesome because there's a whole community around it.

[00:00:58]
Your framework or your library is only as strong as your community. But there's a community around it, they're building projects and prototypes and different ideas and things like reactive context and stuff like that, context API's and stuff like that that. That work's all happening at the community level and then hopefully it goes into the big project.

[00:01:20]
So, or it just lives in the community level. All that stuff is very exciting and interesting. But, so one reason you may want to use a framework or a library I should say, is maybe some of those problems, those must haves for you, exist in the community level whereas writing it all from scratch in vanilla Web Components would just be maybe a little too daunting or just time consuming, we all gotta get work done so, yes.

[00:01:50]
>> You may touch on this later but are there ways that like lazy load these components so that they don't load if you don't need them?
>> Right like as you need them? [COUGH] Yeah, so the way you structure imports and exports, it builds out a tree and if you just want to use vanilla inputs, right?

[00:02:19]
It'll only import a file if it's requested on the page. So, my shadow, what was it called? [LAUGH] Shadow element or whatever that I demoed, shadow scroller that's what it was. My shadow scroller will only request shadow scroller in Lit, or something like that. And then the next Component that loads will just either their grab the copy of Lit that exists and then it's code.

[00:02:48]
But maybe it has a child component, it will load that one. But this sort of involves in like a multi-page architecture, so your page determines what gets loaded. In a single page context, that gets into this sort of bundling and deployment stuff, and that's where you're gonna kinda wanna like do the intelligent bundling and code splitting to make sure that you're serving the least amount as possible to the client.

[00:03:16]
Does that help?
>> Yep.
>> Okay.
>> Kind of a follow up to that then. So let's say you do have a Web kinda Component. If you're referencing another Web Component in that Web Component then, does the, I'm guessing the ordering matters of your imports and stuff like that, or is that possible to even do that?

[00:03:38]
>> Like if I'm referencing a Component in a Component?
>> Yes.
>> Yeah, you totally can do that. Yeah, I mean, I guess it's maybe possible you reference, Component A references Component B which also includes Component A, that's maybe a disaster, you could create. [LAUGH] But again, Web Component stopped preventing you from bad code, but I don't know what it does in that.

[00:04:03]
The browser must bail after three tries or three loops or something, probably bails after a recursion, but yeah. So you have Web Component A and Web Component B that requires C that requires D, it'll negotiate that, the native import structure will negotiate all that. It is like in production, it's slow, it's a network request every single time.

[00:04:28]
So you maybe want to bundle in production, but that's kinda the Web Component philosophy is these, the bundling, and the code splitting and all that, that's at the end, that's an application problem. That is not how to author a Web Component problem, so we have a question.
>> Is it more common to use Web Components by themselves or together with a framework?

[00:04:55]
>> That's a good question. I don't know. I could maybe get that data. I think a lot of Web Components happen in some kinda framework. Like a material UI Web Component thing or a, I guess they call it material Web Components or Salesforce lightning Web Components. I don't know how many Salesforce websites there are in existence, but I think it's billions, isn't?

[00:05:29]
So, 90% of businesses repurpose Salesforce. But no, I think a lot of people are using them in a suite. I don't know if a lot of people are kind of plucking one offs and stitching together a thing. I think a lot of people are kinda building a system or, using an existing system to piggyback off of.

[00:05:55]
Yes.
>> Why use a template and clone rather than just setting the inner HTML of the shatter?
>> It's a good question. I think that's possible. I think what we're trying to get away from just as an industry in general is using inner HTML. And in just that, it's unsafe, somebody could, if you're getting WYSIWYG content from your database, your WordPress API, and you're spitting it out in your Component, the Component could in theory kind of hack your whole website because you've just ran inner HTML.

[00:06:45]
I looked into the Lit HTML tag template, and it's really interesting. It does some sanitization, and stuff like that. So you're not gonna, open up a big security hole doing that. So, I think just in general, the practice of using inner HTML, it's sort of a quick and dirty way to do it.

[00:07:04]
I'm not super [LAUGH] good at experimenting but we could try. I mean so one thing you can do like this.renderRoot.textContent = 'Hello'. I think I can, see now I'm in Lit and I'm mad, cuz I don't know what Lit wants. But we could try entering HTML whenever. [LAUGH] we could try this and see what happens.

[00:07:34]
It not liking that. So I don't know if Lit specifically is preventing us there. But I can experiment and try to figure that out. So, I don't see it that often which makes me think you don't want to do.