The Good, The Bad, and The Web Components

Spanish audio is available in the player settings
Rate this content
Bookmark

There has been no shortage of both fair and unfair criticism toward Web Components from a wide range of folks that build for the web, including but not limited to JavaScript Framework authors in supposed competition with the platform. In this talk I'll show you how to navigate and simplify the multifaceted landscape of web components, satisfying common criticisms and showing how you can Use the Platform most effectively today.

Zach Leatherman
Zach Leatherman
29 min
01 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Web Components are a piece of reusable UI enabled by web standards and built into the web platform. They offer the potential for faster component initialization and less library overhead. Web Components can be created from scratch and utilized with existing component libraries. Shadow DOM and Declarative Shadow DOM provide benefits such as scoped CSS and server-rendered components. The tradeoff between not repeating oneself and achieving full server-side rendering support is discussed. User experience is deemed more important than developer experience.

1. Introduction to Web Components

Short description:

Today we're going to talk about web components. They're good. They're bad. Hopefully, not ugly. Here is an example of a component. Look at that. It's a button. We have our nice JavaScript up top. We have our JSX on the bottom. Some of you might be familiar with what this example comes from. It's from Vercell.js. There's a ton of component abstractions that exist in the space. But today I want to talk to you about Web Components.

How's everybody doing? Got some coffee? Bruce, I guess we're old friends. Great. That's awesome to hear. Well, you couldn't really tell by that introduction, but that's fine. Bruce and I get along really good.

All right. So today we're going to talk about web components. They're good. They're bad. Hopefully, not ugly. So, yes. Web components. Animations. Gotta love it. Web components, right? I don't have to convince you all that components are good, right? Components. Yay.

All right. Here is an example of a component. Look at that. It's a button. Woo-hoo! Thank you. That's been my time. Yeah. So we have our nice JavaScript up top. We have our JSX on the bottom. This is great. And some of you might be familiar with what this example comes from. It's from Vercell.js.

So if we look at some of the other component libraries that exist right now, there's a ton of them, right? There's a ton of component abstractions that exist in the space. But today I want to talk to you about Web Components.

2. Web Components and Design Systems

Short description:

Web Components are a piece of reusable UI enabled by web standards and built into the web platform. They offer the potential for faster component initialization and less library overhead. Examples of Web Components in use include MSN, material design, and Adobe Photoshop on the web. According to Google Chrome's Web Statistics, nearly 19 percent of page loads in the browser utilize Web Components.

So Web Component is a piece of reusable UI, it's enabled by web standards. It's built into the web platform. It's provided to you for free by web browsers. And really the benefit here is you have the potential to initialize your components faster and run with less library overhead, which is great.

So as Bruce introduced, my name is Zach. I blog on zackleet.com. I built Eleventy, which is a static site generator. And I work at Netlify. And just to kind of convince you that Web Components are a thing that you should care about, I'm going to show you some examples. Hooray. This is peer pressure. This is social proof. And after these four or five slides, you all are going to be convinced that Web Components are amazing. So let's get into it.

Web Components, really the bread and butter of Web Components right now is design systems. People love the portability of Web Components. They love that they're built into the platform. And that's really where the most examples you'll see of them are in the wild. Microsoft built MSN with Web Components. VMware has a nice design system. Google has material design which exports to Web Components. IBM has one, Salesforce. My personal favorite, Nord Health built with 11-D is a really good example of that. GitHub uses Web Components. Adobe actually brought Photoshop to the Web with Web Components using Lit, which I think is great. And that's using Spectrum Web Components which is a wrapper around Lit. So are Web Components a thing? Look at all these logos, logos, logos, logos. We love logos. Does that really convince us that things are good? Yes, I think so. If you go out to Google Chrome's Web Statistics, they have as of April of this year, measured that 18, almost 19 percent of page loads in the Google Chrome Web Browser are properties using Web Components.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

It's Time to De-Fragment the Web
React Day Berlin 2022React Day Berlin 2022
34 min
It's Time to De-Fragment the Web
Top Content
Over the past few years, the number of web frameworks available to us has exploded. In some ways, the breadth of choice is a clear win for our ecosystem. However, for many of us, it also comes with harsh drawbacks: - Have you ever used a popular open-sourced component built for framework A, and wished it existed in framework B? What about a design system library? - Does your company have frontends built in different frameworks, and your web teams are frustrated about the wasted hours needed to achieve a consistent design system? - Does your team build SDKs for web frameworks, and must manually re-write them for each framework? The solution to all 3 of these problems exists today. To fully understand it, we must first examine today’s web frameworks, re-think what a component should look like, and introduce a new Intermediate Representation of our components. This is what we have done at Builder.io when we created Mitosis, and we’re excited to share it with everyone.
Web Components, Lit and Santa 🎅
JSNation Live 2021JSNation Live 2021
28 min
Web Components, Lit and Santa 🎅
Get started with Web Components – enabling you to define new HTML elements that work everywhere regular HTML does. This talk will focus on Lit, a suite from Google that helps you create WCs with features you'd expect like data-binding and declarative definitions. It'll also cover how we've used them to build one of the web's jolliest sites, Google's Santa Tracker 🎅
Authoring HTML in a JavaScript World
React Summit US 2023React Summit US 2023
21 min
Authoring HTML in a JavaScript World
 In this talk, Tony shows how an authoring and semantic HTML-first approach to JSX template work leads to more readable, maintainable, and accessible UI components. He demonstrates how to think through implementing a UI prototype in a semantic way, authoring HTML before visuals. He shows how accessible markup improves performance, reduces DOM size, minimizes time spent on CSS, and reduces cognitive load not only for developers, but also for all our users, no matter how they consume our sites and applications.
Immutable Web Apps
JSNation 2022JSNation 2022
20 min
Immutable Web Apps
Resolving dependencies when they are all bundled together is easy. Resolving dependencies when they are in being loaded via script tags is much more challenging. The goal of this talk is to explain how Meltwater handles dependency resolution when building native Web Component based applications that rely on packages published by many different teams.
Web Components are awesome!
JSNation 2022JSNation 2022
10 min
Web Components are awesome!
Ever wondered how by placing "video" or "audio" into your HTML, you get a media player with controls included? Or how, depending on the type attribute, "input" can be a button, a place to enter text, select a date or file, color picker and more? What if you could create your own element? The answer: Web Components! 🤯 In this talk, we’ll take a look at what Web Components are, how to make one and include it into an application.
Let's talk about Web Components
React Advanced Conference 2021React Advanced Conference 2021
32 min
Let's talk about Web Components
Before the dawn of some of the most popular frameworks (read: React and Vue), there was Web components. Web Components take one of the best parts of these frameworks (reusable components) and combine it with the best parts of web development (native browser support and not needing to set up a build process). As if that's not enough, web components allow you use the same functions across any framework.If at this point, you're wondering "If web components are so awesome, why haven't I heard about them before?", then you're in luck because that's exactly what this talk is about.In this presentation, we'll take a look at what web components are, why web components are awesome, why web components can be a pain and how we can use web components both as a standalone tool and together with frameworks.

Workshops on related topic

Web Components in Action
JSNation Live 2021JSNation Live 2021
184 min
Web Components in Action
Workshop
Joren Broekema
Alex Korzhikov
2 authors
The workshop extends JavaScript programming language knowledge, overviews general software design patterns. It is focused on Web Components standards and technologies built on top of them, like Lit-HTML and Lit-Element. We also practice writing Web Components both with native JavaScript and using Lit-Element. In the end we overview key tooling to develop an application - open-wc.