Web Components are awesome!

Rate this content
Bookmark

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.

10 min
16 Jun, 2022

Video Summary and Transcription

Web components allow you to create your own HTML elements that can do anything you want, and they are supported by all modern browsers. Many companies, including YouTube and GitHub, use web components to enhance their websites. There are extensive tooling and libraries available for web component development. The Model Viewer Web Component enables the display of 3D models in Virtual and Augmented Reality without needing to know underlying technologies. Web components can be used with various frameworks and libraries, and there are resources available to help with compatibility.

1. Introduction to Web Components

Short description:

Hi, I'm Dwayne, a JavaScript developer advocate at Vonage, and I'm here to make the case for web components. Web components allow you to create your own HTML elements that can do anything you want. They are supported by all modern browsers and many companies are already using them. For example, YouTube and GitHub use web components to enhance their websites. I personally use web components to save time when creating websites and to add functionality like displaying data and creating countdown timers. The tooling around web components is extensive, with many libraries and frameworks available.

Hi, I'm Dwayne, a JavaScript developer advocate at Vonage, and the good folks at JS Nation have given me 10 minutes to make the case on why I think web components are awesome.

So, what are web components? Have you ever used the video, audio, and or details HTML tags? Ever wondered how just by putting the tag with some attributes and properties, you get fully working media player interfaces with volume controls, play and pause buttons, and more? Or a dropdown that just works out of the box? Now, imagine creating your own HTML element that does whatever you want it to do.

What does the browser support look like? All modern browsers have support for web components. You may be saying to yourself, that sounds cool and all, but are web components a thing yet? Luckily enough, it's a website. And the answer is yes, that's it. Just kidding. This site lists some companies that are using web components. And as an exercise for everyone watching, as I scroll down, if there is a company or logo you recognize, say Ding. Here we go. It's a long list. Seen anything yet? The list keeps on going. There's quite a few. And this is just some of them. How many times have you said Ding yet? Keeps on going. There we go.

Now, here's a couple of specific examples. If you view the source code of YouTube, you'll see many HTML tags that begin with YTD. YTD is not a normal prefix for an HTML element, so that's a good clue that it's a web component. Now, when you do things like creating a repo, pushing changes, and or merging PRs on GitHub, you can see how long ago your activity happened. Those are web components, and GitHub is offering them for everyone to use in their own projects. Now, I like to make websites, a lot of websites. For each, I like to have an about page that goes over the who, what, and why I made the site. Now, creating the page over and over again became a chore, so I created a web component called dwayne-made. I can pull the data about the website from an endpoint in the project and pass it into the web component, and dwayne-made knows how to display that data. It saves me a bunch of time to focus on the application itself. Another awesome feature is that a web component can have multiple uses. For example, isn't it cool how the humble input HTML element can do so many different things with just a change of the type attribute? So along those lines, I made dwayne-timer because I was dealing with a lot of time and dates and personal projects and didn't want to hassle with it over and over each time. Not only can it display a date and time local to the visitor of the site but it can also be a countdown timer just with an addition of a property to the Web Component. Now, the tooling around Web Components is pretty awesome. There are so many libraries and frameworks to create Web Components.

2. Web Component Development and Resources

Short description:

Want to use TypeScript or JSX? Check out WebComponents.dev for templates to kick start your Web Component development. Open Web Components provides guidelines and best practices for consistent development. Explore WebComponents.org for existing solutions and add your own. Easily create WebXR applications without extensive knowledge of underlying technologies like 3JS and Unity.

Want to use TypeScript? There are multiple libraries you can use. More familiar with JSX? No problem. A good resource to give these tools a try without having to download them is WebComponents.dev. Now, WebComponents.dev can do a bunch of things but it can also give you templates to where you can just kind of kick start a Web Component to kind of see if it's what you like as far as coding.

Right now there are 64 templates that you can use. Now, if you're on a team and want to ensure consistency across all the Web Components you build, there is Open Web Components, which provides guidelines, recommendations, and best practices when creating Web Components. They also have a CLI tool that will scaffold a project so that all Web Components will have the same file and folder structure, making it easier for every team member to get up to speed on a component they have never seen before by knowing where to look.

Now, the fact that there are so many people working on Web Components means that there is probably something already built that is similar to what you are looking for. No need to start from scratch, which is awesome. WebComponents.org is a good place to start to see what's out there and even add your own to the list. I'm a big fan of WebXR, Augmented and Virtual Reality on the Web, and always wanted to create an application but didn't have enough experience to be able to create something from scratch without studying a long list of different technologies like 3JS, 3D modeling software like Unity and so much more.

3. Model Viewer Web Component

Short description:

The Model Viewer Web Component allows me to display 3D models in Virtual and Augmented Reality without needing to know the underlying technologies. I created a WebXR Tic-Tac-Toe game with voice chat using this component. Check out the demo at xoxr.games.

That's where the Model Viewer Web Component comes in. It does everything I need to do to display a 3D model in both Virtual and Augmented Reality and more without needing to know the underlying technologies that went into making it work. With it, I was able to create a WebXR Tic-Tac-Toe game with voice chat in about a week. Here's a quick demo. Now, as you can see, on the laptop to the left, I have the 3D version of the Web Component, the actual Tic-Tac-Toe board. On the right, I have the augmented version of it, and I'm able to pass the moves back and forth using Vonage APIs. Also, I can enable audio chats, and that's also done through the Vonage APIs. And so we can see the moves are being played back and forth, and then at the end, when there's a winner, there's some confetti. So if you want to give it a shot, you can give it, you know, play a game or two. I have it deployed to xoxr.games. I'm hoping to add more WebXR games to it as well in the future.

4. Using Web Components with Frameworks and Libraries

Short description:

Web Components can be used in your favorite framework or by themselves. Check custom-elements-everywhere.com to see how well-supported Web Components are with various frameworks and libraries. I created a set of Web Components for the Vonage Client SDK, which can be used regardless of the framework. You can include them in your application and style them to match your design. Find more information in my Web Components blog series.

Now, another awesome thing about Web Components is that you can use them in your favorite framework or by themselves. This site, custom-elements-everywhere.com, lists how well-supported Web Components are with various frameworks and libraries. So let's take a look. Just a quick scroll through. Now, just take a note of your... see if your favorite framework or library is here and how well do they work with Web Components. It's quite a long list. There's a lot of different libraries and frameworks that this website uses and tests. All right. That's enough. You can check out the website itself if you'd like to see if your favorite framework is on there.

Now, I created a set of Web Components to be used with the Vonage Client SDK. Each one knows what events to listen for and what events to send when needed. So, they are a straightforward way of using the Vonage Client SDK regardless of the framework you choose. Now, I've written a series of blog posts on how to use them with Angular, Vue, and React, with more coming soon. Not only can you include them into your application, but you can also style them to look like a part of your application. Here's an example. This is the VC text input from the client SDK UI Web Components I mentioned earlier. So here's the default styling. And if I uncomment this, you'll see it changed to a totally different styling, which is pretty cool, I believe. And so I think that is awesome.

Well, there it is. Just a few of the things I think make Web Components awesome. Thanks for listening. Hopefully you think Web Components are awesome also. Now here's a link to my Web Components blog series. My contact info is on my website, life-long.dev, if you'd like to discuss Web Components or anything Vonage. Check out our APIs if you want to add some real-time communications to your application via video, voice, text, SMS and many more. If you found them to be awesome and want to learn more, you can check out our APIs. Once again, thank you for listening and have a great rest of the conference.

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

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.
JSNation 2023JSNation 2023
29 min
The Good, The Bad, and The Web Components
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.
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 🎅
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.
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.
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

JSNation Live 2021JSNation Live 2021
184 min
Web Components in Action
Workshop
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.