Web Components are awesome!

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.

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.

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.

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.