Web Components Adoption

[00:00:00]
>> So this sounds like it fits into this question, but they're asking any reason not to use Web Components.
>> No, the answer is always no. [LAUGH] Any reason not to use Web Components? I think this slide might address some of it. But there's a few foot guns, especially around styling, which we'll talk about in nauseam.

[00:00:31]
So there's a few foot guns and a few things you have to learn before it clicks. But there's really not a reason I would shy away from them. I'm trying to think of like, but this slide might address some of it, if I can continue, is that fine?

[00:00:51]
Okay, I like to say Web Components are slow like brisket, and in the sense that they are web standards, right? Web standards take a long time. To get a new element in HTML takes like ten years, it's a long time. To get new browser features, they can happen kinda quickly, but that stuff takes a long time.

[00:01:17]
So, if there's one reason not to use Web Components is because you may want some weird feature, some micro feature like partial hydration. I have to have partial hydration, I don't know why. I don't know what it means exactly, but I have to have it. That might take a while to have a full baked in the browser solution.

[00:01:40]
So you may have to roll your own, you may have to find one, if you really, really want a certain feature. So it's gonna move a little bit slower than hot new framework JS, it's gonna move a little bit slower. But the trade off is you're building on a very stable foundation.

[00:02:00]
You're not gonna get sideswiped by a major version change, there's been a few in the history of coding that didn't go so well, Python 3. So there's a few didn't go so well. So, if there's a reason I think not to, it's just wonder, your sense [LAUGH] of, my gosh, this is getting better every day, might be a bit slower than it is in something newish, so.

[00:02:32]
Does that help in answering the question, anyone, yeah? So it might be worth looking at like, who is using Web Components? And I found this list of no-name companies over at ourwebcomponents-a-thing-yet.com, some fruit company, a rainbow, letter company, a shipping truck company. [LAUGH] I don't know, a company that makes a solitaire game for your computer.

[00:03:05]
These are just no-name companies, I'm kidding. A lot of these big companies Apple, Google, Amazon, Microsoft, GitHub, YouTube, Adobe, talk about that NASA. There's Web Components in space, why not, IBM, Red Hat, ING, Salesforce. These are big companies, right? They're all sort of using Web Components. Web Components are actually on the rise.

[00:03:33]
Over the last year, we actually saw a jump from about the 10% to about 18% of all page loads in Google Chrome are using Web Components. That's a shocking figure, but if you think of something like YouTube uses Web Components, that's gonna be a big chunk of page views, GitHub as well.

[00:04:01]
What caused that jump? We don't know. I mean, I talked about web components just before that jump. So I'd like to think I had, that's the Dave Ruprecht bump. But, [LAUGH] I think the true answer is maybe this, Wordle. Wordle, which sold to the New York Times for seven figures, is made with Web Components.

[00:04:22]
And you can crack open the browser and view the source and guess what you'll see, you'll see game-app and then a bunch of Web Components kind of revealed in that shadow DOM. So Wordle, built on Web Components. And there used to be, [LAUGH] a little bug where the solution was an attribute [LAUGH] in the component so you could just look at the attribute and solve it instantly.

[00:04:44]
But we don't cheat, right, we're not cheaters. I obviously did not do very good this day. So Wordle's built with Web Components, but that's a toy game. That's not a big deal, right, tiny game, very popular. The new Photoshop is built with Web Components. So, Photoshop's moving to a web-based client, they built it with web components.

[00:05:10]
And there's an article here on web.dev, yes, question.
>> Yeah, would you say that these companies are using frameworks to compile down to Web Components, or do they usually natively just write it in web components?
>> So, in this one, that's a good question, are they using frameworks?

[00:05:32]
This is using Lit, which is more like a library than framework. But it's using Lit, and just to almost bring syntactic sugar to the component system. And behind the scenes, there's a whole bunch of wasum web assembly happening, and that's doing all the image stuff, image compression. A lot of the graphical processing is happening on a different thread in wasum.

[00:06:03]
So that's a whole other Front End Master's course I'm not qualified to teach. [LAUGH] But it's kind of a cool thing. So they'll maybe write something in Python, or C, or whatever they were writing in before, and compile the brains down. But the web component is just talking to the brain, the binary file inside.

[00:06:26]
Does that help answer your question? Okay, yeah, so Photoshop being built with Web Components. And so if they're so popular, why am I not using them? That's a good question, I have big opinions. I think they're too low level, first of all, and we'll see it here. When you start using a web component, you're like, this is not fun to write immediately.

[00:06:55]
And that's because it was designed for framework authors to build stuff on top. It was sort of a low level primitive in the web platform for people to build on. However, the framework authors didn't use it. So, they had something that worked. And for them to be like, I should move from something that works in every browser to something that kinda only works in Chrome.

[00:07:23]
No, that's a past, I have customers, totally fair. And then you pile on some social stuff. There's a bit of heavy handed advocacy from Google. I'll put them on blast like polymer, and the AMP team, sort of like, if you wanna keep making money, you should use these Web Components now, [LAUGH] not quite that level.

[00:07:48]
But there was a bit of like, sort of like shaming, like, you need to be using Web Components, and they're like, I can't, it doesn't work for me. And so there's, social stuff, basically it's Twitter's fault. And then there was some confusion about HTML imports, I talked about how they were killed off by Mozilla.

[00:08:11]
I'm still not mad, yes I am. It sort of left the future, what's gonna happen to these? If one of the four legs of the stool got kicked out, does the stool still stand? And then, truly Web Components didn't land in all major browsers until 2020 when Edge switched to Chromium.

[00:08:38]
So we had to literally kill a whole entire browser rendering engine to get ubiquitous support in all the major browsers. And if you look at the history, 2011 was when they're sort of pitched as an idea, 2013 stuff start showing up in Chrome, 2016 Safari gets the V0 implementation.

[00:09:02]
Firefox didn't get it until 2018, they had a big overhaul of their whole entire rendering engine. And then Edge didn't get it till 2020. So if you weren't using Web Components before 2020, yeah, that makes sense. [LAUGH] You were probably an early adopter, which is why now I think it's a really great time to start looking at them, yes.

[00:09:24]
>> As someone who's using Web Components in production, can you speak to Safari's support at this stage? I've heard in the past, I don't know if it's FUD, that they support some but not all aspects.
>> Yeah, so there is a tension, right? So, it's very Google led, but like I showed, Microsoft is now getting involved too.

[00:09:50]
But they all commit to the same browser engine, or they influence the same browser engine. But historically, Safari has not jumped on the new web component proposals, who knows why? Apple keeps things pretty tight to their chest. They don't really broadcast what they're doing, [LAUGH] they just kinda show up one day and say, we made a element or a new CSS animation thing that you can use.

[00:10:20]
And so, I think, historically, but I do think it is getting a little bit better. I personally expect the speed to go up, but there's a few things I can show you that are implemented in Chrome, but not in Safari. And they would be cool if they were in Chrome, or in Safari, but they're just not.

[00:10:41]
So, stuff like declarative shadow DOM, I think, element internals, and stuff like that, so.
>> I think that those tend to be nice to haves in terms of web component usage, as opposed to like, yeah, template just isn't processed by WebKit?
>> Right, I think there's no gamebreaking features.

[00:11:00]
I could be wrong here, but I think they support the V1 spec entirely. I think there's now a V2 sort of like additions that places like the community group, or Web Components back authors they want included. So, I think there's stuff like that, so, but they're, to be fair, a little hill draggy on it, so, and we don't know why.