Video details

Dwane Hemmings - React X Web Components: How it is and how it could be - React Live 2022


Dwane Hemmings - React X Web Components: How it is and how it could be
In this talk, we'll go through how Web Components are integrated into current React applications and compare that with a possible future implementation.
#jsworldafrica #jsworld #jsworldconference #frontendlove #frontenddeveloperlove #javascript #reactjs #angular #react #vuejs #vue #vue3 #typescript #graphql #jamstack #amsterdam #conference #svelte #sveltejs #next #nextjs #staticsite #css #html #nuxt


I think we're good, right? Thank you very much. Before I get started, can we please make some noise for the event organizers, for throwing such an amazing event. Keep it going for yourselves, for coming out and supporting an amazing event. Just keep it going. All right, so we're going to talk about React and web components, how it is, how it could be, as I understand it, because things change all the time. So April 2022, going to put a time stamp on that. Hi, I'm Dwayne. I'm a JavaScript Developer Advocate Advantage. And I'm here and I'm super proud and happy to be here speaking with you all. Not nervous at all because the screen is the size of like ten of my homes put together. That's fine. So real quick, who's heard of web components? Please make some noise. I like how everybody's like on a roller coaster. So I'm going to need you all to kind of keep me right? Because again, this is as I understand it, and I could be wrong, so just keep me in check. Who hasn't heard of web components? Please make some noise. Oh, that is awesome. So feel free to hit me up with any questions or anything that you may have. All right. Now, have you ever used any, like, the video elements or the audio elements or the details elements? Have you ever found it amazing that just by putting a video tag with the source, you get a fully functional working with UI, you can control the audio, you can mute it, you can download it all just with that pretty amazing, right? Web components. Now imagine if you could create your own web component, your own elements, right? It's kind of cool. So now how it is, because it's a React conference, so I want to tell you all how it is with web components in React. Have you ever tried using web components in React? Then I know you're paying because it's not that great. And most of it is because of the way that React handles the data and the events coming from your web component. And so React love strings, apparently, because if you only have strings passing into your web component, no problem. But if you're trying to pass in like arrays, you're going to get a string of the elements in your array. Try and pass in an object, you're going to get the dreaded and totally useless object. You ever seen those? Terrible. And then as far as the events, because React has like the synthetic event thing, you all know what I'm talking about. I mean, you all React developers. So I would hope so it can't listen for the regular custom events coming from your web component. But there's hope because how it could be, there's an experimental version of React out now, out for a while. How many people knew about this? And that's why I'm here. So I'm trying to rally the group. You know what I'm saying? Rally the troops so that we can make this happen. And so, yeah, as you can see, fully supports React Web components. So now I'm here to kind of talk about the benefits of React fully supporting Web components. And so first we're going to talk about some very underappreciated folks, at least from what I've seen. So now there's people who work so hard, especially like in their free time, to be able to create these things that we use to make our lives easier building these applications. I'm definitely not talking about me because with me, you're going to get some documentation on the Web component pretty thorough. You're going to have some graphs, diagrams, and you're only going to get one set of Web components for me. You're also going to get a blog post on how to use the Web component in your React application. Pretty thorough as well. I go all the way back to what was like before 16 three. I cover the wide gamut, hopefully up to hooks. And so you can see a lot of stuff here. And also feel free to reach me on Twitter. Lifelong dev because I've been doing this for a minute. And also the Vonage Community channels. Always down to talk with folks about Web components. If you talk to me for like five minutes, you're going to hear Web components about like 20 times. So I'm sorry for anybody that came to the booth. And I just kind of talked to you off about Web components and then also workshops. So I do a lot of workshops talking about Web components. Because again, web components, web components, web components. Big shout out to everybody that came out yesterday and to the Web components talk. Anybody was at the Web component workshop yesterday? All right. Oh, you don't know about the workshop? I think they have it reacorded so you can hit up the crew about it again. And feel free. I'm down to talk about weapon points. All right. So now I'm talking about folks and maintainers like Corey Laviska, he created Somebody Beatbox. Oh, it's me doing this. All right. This is not an alarm going off that would have freaked me out. So I'm talking about Corey Levisca, who has created and keeping up to date Shoelace. Because if you go to his site, as you can see, a forward thinking library of Web components. And so he has, like, has anybody seen Shoelace? Anybody aware of Shoelace? All right, cool. Well, hopefully more folks are aware of Shoelace really great framework. And as you can see, it has a lot of things. But what we're going to talk about is that first class React support, right now, the thing is, on his site, you can see that React, that Shoelace offers a React version of every component and there's a lot of components. And it provides an Itinematic experience for React users. You know, it's how it's react, it's a totally separate thing. And you can easily toggle between HTML and react examples throughout the documentation. And then you can see angular view is like, yeah, shoelace works awesome with angular and view. Enjoy. And so I asked him because he may love actually having two separate things and maintaining it, and I spoke with him and kind of asked, I want to have like, an actual person. I didn't want to be like, yeah, I think that maintainers thinks this stuff. I want to actually place a face with it. And actually, Corey is a nice guy. He's like, well, the work is already done, so I'm fine with it. But he has an issue. That one of his biggest gripes right now. He has to maintain two different examples for each demo in the docs, and it makes the docs slower. And I'm sure Cory would have liked to do other things besides having to maintain two separate examples. Who here likes to double your work? All right, awesome. Now also about yourselves, a big benefit will be helping you, all right? So would it be nice to not have to jump through hoops to be able to use a web component that's widely available everywhere else just to be able to use it? Right, that'd be nice. By the way, I'm going to sell this as an NFC afterwards, so if anybody wants to place a bid, I'm joking, unless you're going to actually buy it. So now let's take a look at how it is to use web components within your react application. So first you have to use the user, and then you set that to null because it doesn't exist yet. Then you have to use effect to be able to set up all the event listeners to listen for on your web component. And then you also have to return the remove event listener because you don't want to have like, memory leaks. You all do that, right? You don't have to worry about that, right? And then this is where you return the actual elements in your application. So you have to wrap it in surrounding div. What's with okay, sign up quick, right? What's with the empty brackets? Is that just a react thing? What? Does that thing exist? That's weird. I always found that strange. Is that a thing that's normal, like in other things? Because it's like the only place I've ever seen it, right? It's a reacting, I guess, right? Explains it. All right, so now let's talk about how it could be that. So instead of all the use effects and the use rep, you're able to just place your element in there. And then you can see I'm passing in some things. So this one only uses the strings, but you could pass in like, arrays and objects and understand it just fine. And as far as events, it will also actually support okay, so it supports like, Pascal Case event. So if you name your events that are coming out in Pascal case, Camel case, Kebab case, Kebab and then there's a thing I didn't even know caps case. Have you ever heard of Caps case? Like the first section is all capitalized and then afterwards I've never seen it. So maybe it's a react thing. You can see here, all you're doing is I have an on digit added and this is a key bad component that I made for our Vonage web components, because keypads are awesome and you can use them in so many things, like to make a phone call, to enter in a security code, even to play like a game you can have as a quiz thing. And so you can see, you just put on and the event and then you put the function that's going to handle that event. And looking at that now, I would like to get your response on how it could be. So let me know what you think makes a noise, if you think it's cool and how about how it is? How it could be, how it is, how it could be. I got you. All right. Also you will be also future proofing yourself because who remembers less than 16.3 to get a reference that was this and this ref. And then in 16.3 I did not move. You saw me, right? I have not moved. React, create, ref. And then now with hooks we have used ref. At least with this way in the experimental version, you do not have to worry. Am I I'm sorry. That's cool. I'm afraid to look behind, I guess it was good for you, man. All right. And so, like I said, you'll also be future proofing yourself, I think as JavaScript reacts developers, we believe in the web, right? And so I'm asking once again that you believe in web components. And so if you want to like learn more and things, I quickly set up this website and so it's just some information and it has a link to the GitHub repo if you want to be able to have more information. I just went through that for no reason. So just to quickly put together website. I own the domain webcomponents in because I own many domains. Some call it a problem, I call it learning opportunities. I have some ideas for what I would like to do with webcoponents in, but I'm always definitely willing to hear from the community on what you would like to see on something like that. And my website, Lifelong Dev, you can see all the random projects I create and where I'll be in random things and for a list of all the different blog posts that I've done, because I've done blog posts Weber points, but also other things like on how to use them and other things and how to style them also, which is super cool. How many of you all know about parked in web components? Is that a cricket. For real? Wow. I'm impressed. But, yeah, you guys go to Dwayne Innvonage and find out my randomness as I type things on the Internet, and you can check it out. And yeah, so, again, check it out. Let me know if you like what you heard. And I'm tired because it's been a long day, and I've been, you know so, again, thank you very much. If you have any questions, feel free to let me know, and hopefully this thing will work if I clicked it. Don't know if I clicked it. This holds me something cool. It's not cool now because I actually let me see something here. All right. Hopefully I actually have time. So anybody have any questions or anything? Because I literally oh, thank you, Dwayne. Excellent. So funny. Oh, you have a question. What's up? Web components, web components, web components. Greatest thing ever. So feel free to let's get this campaign going. Let's get into React 19, because 18 just came out, and this thing's been out for, like, two years. So let's try and make this happen because it's awesome. All right, thank you once again. Bye.