React vs Web Components?

[Applause] mmm so glad I got coffee what a team very nice to have you aboard as always today we're gonna be talking shadow DOM custom elements web components generally react pre-act JSX all that good stuff stick around I'm sure it's gonna be fascinating but before we get into anything of course over-the-top intro [Music] [Applause] okay so a couple of days ago I saw this tweet that was talking about how web components and react were in Cabana always seem to imply they were incompatible in some way and I thought no they're not there's maybe a difference of approach or attitude in some ways but they're very much okay to be used together so I thought I'd talk about that a little bit the other thing I've noticed is that there can be a lot of confusion within the web community about when you should use custom elements or shadow Dom or web components and people feel in line they're not quite sure what's what in that world so I thought again I deal with some of that today so firstly custom elements essentially instead of using a div a customer lets you use your own element instead it lets you define your own element and the only requirement of that element is that it has to have a dash in its name otherwise it's an unknown element by having a dash in its name so like my dash element then you can be sure that it is in fact a custom element or it can be a custom element so that's it basically it's like I would have used a div now I'm gonna use my own custom element and when I'm coding that in JavaScript land I can instead of passing an element to work on a creating one on the fly I just put the markup in the HTML put the class definition in my JavaScript and when I'm writing it I extend HTML element and I refer to whatever api's I need to on my own element like this dot append child for example will append a child to my custom element in terms of support it's actually pretty good and getting better and the polyfill is small and very effective does its job not a problem they're really dumb the next one is shadow DOM and that's more complicated if you did the full rundown I'm not gonna do the full rundown today I'm gonna give you my little take on how I use it my approach to it there's plenty of documentation if you want to kind of go deeper in all around links without below in the description as always shadow Dom as I like to think of it helps you contain the gross because you know when you're making some kind of element you have markup and styles and yeah and really just want to kind of wrap it all together and go yeah it's it's a thing it's it's my element it's a carousel it's a an infinite scroll it's my element don't worry about the details I'm hiding that inside that's what shadow Dom is really there to let you do and the main functions that it provides is scoping for styles so if you have some style tag inside style element inside the Styles will only apply up to the shadow Dom boundary so anything inside the shadow Dom will get styled anything outside of it those styles will be ignored so you get a nice and capsulation there the other thing that it lets you do is it lets you remap events and that doesn't sound like something that's all that interesting to begin with but imagine this you've got all these divs and the gross that you've contained inside and you've got event handlers like oh when I click this or whatever I want it to do something else I want to dispatch some event in my app I want my element to dispatch some a wobble event sure you can call it wobble if you like that's not a problem what shadow Dom is gonna let you do it's going to let you capture from the shadow root that there was a click event and it's gonna let you remap that and then fire out a new different event so what happens is the original event the click event gets held at the shadow Dom boundary and it stops there it doesn't bubble up like all the other normal events which is what you'd have typically in your Dom I click that event bubbles all the way up to the document root and anybody who needs to listen to it can listen to it if they're in that chain of parents well with the shadow Dom it stops and so that's actually a good point for you as a developer to step in and go 1/2 I have a better plan I'm going to change that click event to something that means something in the context of my element Wabble whatever foo bar Baz BAM whoo-hoo whatever you need to call your event I'm not judging I've come up with some of the best worst event names ever that's the web that's me enjoy and then you can dispatch that on up and your app can now listen to more semantically mean full events than just click so there's good news in this bad news for shadow Dom the good news is that its support is okay it's available in Chrome it's very close to shipping I think in Firefox edge have just announced that they are going to support it or they're working on it Safari I think has it as well I'll double check if they don't I'll put that in the description I should check I'll check the other thing is though it's one of those features that's almost impossible to polyfill there's the shady Dom polyfill from the polymer team which is as close as you're gonna get without causing significant performance issues the first version of the polyfill that they created it was I think it's more feature complete but it had performance challenges because of the way that they had to make it work it's just one of those features it's really difficult to fake in the browser until you get the for reals version okay so back to that tweet here's some thoughts if your whole team is using react or angular it may make sense for you to create your components in that way after all you've got a switching point where you're sort of thinking is this custom ant or a web component or is it not and it might just be easy for you to stick in one sort of paradigm or model and go all the way to the end and if everything's a reactive component well okay fine however if you're in a mixed shop as in you've got some people on angular some people have reacted some people on view some people who go vanilla the web component model paradigm thing is the only one that you've got that's across all those different approaches and so it gives you that a way of saying well you can just reuse my component now there you go that's it it's an image carousel or it's a video player do feel free to use it wherever you need all you need to do is include the styles and the JavaScript or it may be just the JavaScript if you put the styles inside that's a whole separate conversation about CSS and JavaScript will go there another time we'll stay where we are for now so then where does that leave pre-act or reactor or all these things if you do want to do the component reuse well you can treat them as a really really exceptional way of doing dipping or taking state and converting it into Dom but instead of using divs as your sort of final output target you just render web components if you've got somebody else's third party web component or you've got something from another team it becomes incredibly powerful just to be able to say here's the component but I'm going to use one of these other things as the glue one of these libraries frameworks depends on how you view them as my way of tying all these components together and so without further ado let me show you how pre-act and custom elements can be combined on my screen I have an element that extends HTML element done I've called it my element mmm production ready now inside my element I have attached a shadow root and I'm just attaching it as a property of this class called root I also create a message inside a div that says custom element and then I in the connected callback which is the lifecycle callback that says by the way this element got attached to the Dom I append the message to the shadow root I'll come back in a moment and I'll show you about the event stuff at the bottom here there's a custom elements that define which is this global that you find in the window unless you define what tag is looking for when it finds said tag what it should instantiate which in this case is my element over here in pre Ackland I have a bit of code that's I mean I'm quite literally pulling in pre act as the module here and then just calling class extends the component from the pre act model and I am just rendering arm I mean I'm rendering out a div here but I have my element as one of the elements that is being rendered out by pre-act and that's about the size of it so over here on my screen I have hello world which came from sort of raw pre-act land in the JSX and I have custom element which came from my element over here in the panel inside of dev tools you can see I have this div span from pret and then here we are his my element and you can see the shadow route that got appended and inside there is the custom element div that I added so I've contained the gross always a good idea but one now of that event stuff that I talked about before containing some of that gross that's an interesting one let's step back into my element over here here's the add event listener call that I call when I construct this element first time around what I do is I say on the route itself on my shadow route I'd like to add an event list then I'm gonna listen for clicks inside of the route when I do that I actually create a new custom event which is a like any other event except I can added detail to it and in the detail I have this message that says wobble and some styling for the console just because why not and then I dispatch this custom event called wobble and here it is this dot dispatch event and then I pass it the event and this will dispatch a wobble event well what do we do with this inside of the JSX glad you asked here's the answer what we can do because of the way that pre-act works and I think reactors is the same okay so editing this video and I'm thinking I should just double check that react works in the same ways pre-act when it comes to custom events and it doesn't it's slightly different the thing to bear in mind is that you're gonna have to do an event listener and stuck with ref actually stick around because there's a website I'm going to show at the end by Rob Dodson which covers actually you know a lot of the details involved here nonetheless I still think you can make it all work there's nothing problematic here you might just not do it as an if you're thinking I'll just think with react shop fair enough but if you are in a place where you either won the Interop that you get from web components or you've got a group of you know people who's someone using views from using angular and so on it still is a really good idea to consider web components so let's carry on you can say on wobble so when you get an on blah so if you dispatch the main core blah you'd have unblocked I've dispatched an event called wobble and so I get on wobble I'm not sure I should be allowed to write code whatever so when it fires we get detailed or mm details of s which comes from my element so detailed M is just this percent C whatl percent C is the way that you get the styling in people pro tip there and detailed s is the way that you set those starts so I'm basically something wobble with that and I've got bubbles true so that it can bubble up through the Dom so it's going to start at my element and it's going to bubble up so what's happened the event was the click event happens inside the shadow root bubbles up to the shadow root boundary we pick it up here we to turn it into this wobble event this click event and we dispatch it again back out and so we've converted and made what was just a generic click event into something that is specific to our application now does that work yes it does let me show you that running so if I just click now you can see in the console I see Wabble as a surprisingly large red piece of text so let me close out by pointing out Rob Dodson's excellent website custom elements everywhere that's his project to make sure free works and customers can be bffs is he basically gone through and added a bunch of tests about how the two should work together whether it's whatever the framework is and custom elements and if they don't work he explains why and what's going on and you opens issues just a generally phenomenal mashup of those two worlds so if you've not seen this site before go ahead and check it out so with that said I hope you've enjoyed this video do click the thumbs up if you have it it helps me a load subscribe if you haven't already and if you have subscribed thank you I really appreciate every single one of you don't forget you can click the notification bell if you want to get notified when I upload one of these videos try and do it weekly if you'd like me to go to a regular schedule do let me know as well I mean I'm happy to try and lock in but if you like the slightly in random as I'm currently doing then either don't say anything or let me know that as well and as always folks I will capture you on the flipside [Music] newcomer up

Channel: Paul Lewis

Views: 37,735

Rating: 4.9042821 out of 5

Keywords: react, jsx, web components, shadow dom, web, web development, preact, custom elements, components

Id: plt-iH_47GE

Length: 14min 17sec (857 seconds)

Published: Mon Oct 22 2018