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.
Web Components are awesome!
AI Generated Video Summary
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
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
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
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
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.