Transcript from the "Web Components and Frameworks Q&A" Lesson
[00:00:00]
>> Why would these guys, these companies, use Web Components? Is anyone notice anything about these companies, a commonality? It's question and answer time. Stumped, consistent brand. That's good, that's good, they do, they need a consistent brand across multiple properties, right? And not working on one app. They kinda have a lot of things.
[00:00:34] For me, it's like these are all big, right? They're all very big companies. And their design systems have to go more places, right? They don't just have the React app. They don't just have the View app. They don't just have the Svelte app or the Angular app. They have the old Rails app, right?
[00:00:55] They have the crusty old Java app that just barely works. Who knows how it works, but it still works, but it still needs a UI. They have the WordPress site. Have you tried to put React inside of WordPress? It's not the supraspinous thing. You can do it technically and decouple the head and stuff.
[00:01:13] But not the easiest thing to stuff a React build process inside of WordPress, or the Laravel site. Laravel is a really great PHP framework. It works very well, do I have just to have components? Do I really have to decouple whole front-end just to have components in my UI?
[00:01:35] Web Components sort of just gives you the ability to not be whole hog invested into a single framework, if that makes sense. And even if you're to replatform [LAUGH] something, someday one team on your site really wants to use View, for some reason. And so you have to basically reimplement all those components into another framework.
[00:02:00] I heard somebody recently call it the [LAUGH] million dollar button or something like that. Just you spend all this money to rebuild something in another framework, and then you have to have tests that match and stuff. Web Components might be a way to skirt some of this stuff and truly is it this?
[00:02:22] Okay, I'll talk about it later, but different frameworks, JavaScript frameworks, have different levels of support for Web Components. So you may find that your Web Components work inside your View app. They work inside your Svelte app just fine, and you can use them without re-platforming your whole Svelte app.
[00:02:47] So maybe a way to increase your distribution without breaking your neck in the process. All right, let's recap, and then we'll take a break. Web Components are little bundles of HTML, CSS, and JavaScript. They're your Lego. They're your component. Web Components are a set of web standards. There's the four web standards template Custom Elements, I'm blanking, Shadow DOM, and import ES modules.
[00:03:17] Web Components are growing in usage. And big companies are using Web Components on big apps like Photoshop and Wordle. That's the biggest sell I have for you right now. So on that note, are there any questions? We can do a quick round of questions if anyone has them, and then otherwise take a break.
[00:03:35] Yes, sir.
>> You were talking about how Web Components can be used across frameworks. And I've heard that React, in particular, they're kind of difficult to use with, and I primarily use React. So I was wondering if you could speak to those difficulties if you know about them?
[00:03:50]
>> Yes, yeah, and so there's a site, there's a custom elements, gosh, this does not bode well for the live coding session. [LAUGH] So Custom Elements Everywhere. This basically ranks or runs a set of test suites against frameworks. And React is the notable outlier. This number has actually gotten a lot better in the last year.
[00:04:22] But it deals very specifically with how React treats everything as a prop, right? Like attributes and everything's a prop. You can just ...props, and they all just splay out into props. HTML, props and attributes are very different things. Like your ARIA selected attribute, [LAUGH] in the canonical HTML sense or your image source, is different than whatever, what would be a property on an image.
[00:04:55] I guess, some custom image thing you would want. I don't even know how many clicks or something. The size xy or something like that. That would be like a, I guess like a prop on an image, right? So React treats everything like a prop. In HTML, props and attributes are different.
[00:05:18] But, sneak preview, there is an experimental branch of React. And we think React is saying, maybe in React 19, that it's gonna support Web Components. And I think it's a slightly different syntax on how you use props, but I think if you have to support it, you totally can.
[00:05:41] And I've heard it's pretty good, so people who have tried it out. And then there's one other thing I could point you to, lit.dev has a labs section, okay? And they have a wrapper for React. So you basically just import your React element, put it in this createComponent wrapper, instead of just returning JSX or whatever you do.
[00:06:21] And then you maybe have to supply, here's what the custom element is. Here's this and here's the initial state. It's a little more involved than just the custom element defined. But yeah, so there's this wrapper. So if you have a system in React right now, and you wanted to move to Lit, or just offer a Web Component version, you might be able to consume your existing React components using this.
[00:06:46] You just make a, I don't know, a sidecar to your React system, [LAUGH] that offers Web Components. So might be an option, something you could build out. Your mileage may vary, if you're doing wild stuff, it might not work. But in theory, the React API is very strict.
[00:07:07] It's just a few things. So hopefully it should work. So yeah, so that's kind of it. So maybe React 19 is kind of the TLDR, so.
>> We kind of touched on browser compatibility. Have you noticed any differences between desktop and mobile browsers support?
>> The big thing is probably Chrome on Android is always gonna have the latest, greatest.
[00:07:31] So I think the limitation would probably be, again, mobile Safari, particularly in the US where mobile Safari is a lot higher than the global average. So if there's a feature you're depending on, it just, no, we know. But you'll see kinda through the next section there's a lot of progressive enhancement, to bring back an old idea.
[00:07:59] [LAUGH] There's a lot of progressive enhancement possibilities with web components, and it may not be a huge deal. So that's kind of maybe you can dodge a few bullets, if for some reason, a browser doesn't support. But there's, I think, yeah, mobile Safari and then on Samsung Galaxy, I think, also locks their version of Chrome.
[00:08:26] The Samsung browser is locked a few versions back. So you may, if you hear something's out, and then all of a sudden, it doesn't work in Samsung phones. That's kind of why so.
>> One person's asking if Web Components increase the file size significantly, but you kind of talked about that being the entire point is that it's built in the browser instead of [INAUDIBLE] overhead?
[00:08:47]
>> Yeah, it's gonna reduce your file size quite a bit. And I'll talk later, but where React is a 30 kilobyte, just React. React with React Dom, which kinda need for, [LAUGH] it ends up being about 100 kilobytes. Lit is, I think, 7 kilobytes. And it offers a very similar API.
[00:09:15] So you may just shave off 90% of your wait times, load times, just by switching, potentially. I will also throw a caveat out there that, you can write bad code in any language you want, so. [LAUGH] So people can write bad code and it can take a lot longer.
[00:09:37] But, yeah, we'll kind of explore different ways. But it's not just file size there's other reasons you might actually want to use React, and so, but yeah.