Comparing Web Component JS Libraries

[00:00:00]
>> So let's compare some web component libraries. This question has come up. But let's just look at them and see the shape of them, and maybe understand the differences, maybe. I'm not gonna go through all 61. We could, I guess. But [LAUGH] we're gonna have to pay more for our Frontend Masters subscriptions, but we'll look at some of this here.

[00:00:22]
We've kind of been staring at Lit, and we'll actually show a bunch more Lit examples. So this will be kinda, it'll get almost old to you at some point, but this would be a classic but encounter, right, increment, decrement, and you render the HTML at the bottom, right?

[00:00:39]
So and then this is kind of a custom directive, and it calls these things, yeah, okay, right? Pretty familiar shape, not too different than React, I'd say, or kind of a React and Vue hybrid. Speaking of hybrids, [LAUGH] here's one called hybrids. And this one is really interesting.

[00:01:01]
When I first saw it, it gave me sort of Svelte vibes when I saw it. It has a render function that uses the HTML tag template literals. But it has just a bit more, I don't know, functional programming aspect to it, right? So that's good. Lit can be functional too, but this would be kinda just an example of that.

[00:01:25]
Stencil.js, which powers the Ionic framework is very cool. But it's got these JavaScript decorators, not officially a feature, but it's coming soon. But they're leveraging that, so you're gonna have some transpiling sorta thing happen, but looks like they're also using TypeScript. So kind of future TypeScript stuff going on here, but it's pretty nice, it gives me kind of Angular vibes.

[00:02:00]
If you've used Angular, I hope that's not a slight, but just more of the strong typed way of programming, so that's the vibe I get. But one neat thing about Stencil, it has a superpower. I haven't messed with it, but I've heard about it. Stencil's kind of designed to actually transpile to different frameworks as well.

[00:02:22]
So if you need to turn this into a React component, you can do that. Or if you need to turn this into a Vue component, I think there's tooling in place to bridge that gap. So that's kind of a neat thing that you may wanna check out. Again, your mileage may vary, but I was told it existed.

[00:02:40]
Now, Haunted, Haunted is maybe my favorite. It's Lit with hooks. So it's kind of the React hooks sort of look, shape to a web component, and I actually like this quite a bit. [LAUGH] I like hooks, but I don't use React, so this would be a great chance for me to use hooks more often, so pretty interesting.

[00:03:07]
But wait, there's more, there's always more. You may not even have to switch JavaScript frameworks to use web components. If you already have something in Vue, or Svelte, or Preactor, Angular, or something, you might be able to take that code and spit out a web component, as well as use web components, kind of cool.

[00:03:31]
So let's take a look at what that looks like. Svelte is maybe the easiest. [LAUGH] You just write the code, and then at the top, you say <svelte:options tag="my-counter" />. And Svelt's compiler, or commandline tool figures out the rest, and spits out a custom component from this. Looking at that, all the ways to make a web component [LAUGH], looking at that, Svelte comes in at kinda one of the smallest.

[00:04:06]
So Svelte may be one of the best ways to make a web component, who knows, depending on how you measure that, but pretty cool. Vue is kind of in this class of, they have a function called defineCustomElement. And it's basically a wrapper, so you'd import your counter from Vue.

[00:04:32]
It's just a Vue component that looks like this. But then your customElements.define("my-counter", defineCustomElement(MyCounter));, really verbose. But basically, you use this Vue function to spit out a web component from view, okay? So this might be a good way if you have a system in Vue, and somebody's WordPress blog really wants to use those components, but you don't wanna put Vue in front of the WordPress blog.

[00:05:02]
Maybe you can use this to offer a alternate version of your existing system and provide some some components. Your mileage may vary in production, but it works, it's supported, and they score good on that custom elements everywhere. Preact, sort of the same thing, has a createCustomElement. You'll notice it's not using JSX, it's using the HTML from htm/preact.

[00:05:30]
So again, another sorta tag template literal. And then you customElements.define("my-counter", createCustomElement(MyCounter, ["count"]));. I think that's you have to put in the props that it's gonna watch, and stuff like that. So all right, cool. There is one holdout, this question came up. Notably, React is not being offered here in this course, but the React situation is getting better.

[00:06:01]
And according to custom elements, and there's an experimental branch of React that should hit in React 19. React 18 just came out at the time of this talk. But React 19, in theory, is gonna get support for custom elements and web components. So could be an exciting time where you're able to export components from React, and you're able to import web components into React.

[00:06:27]
So everything you learn here today, or in this course, could actually work in your React project in a year's time or something.