 asking you all these things because After this talk, I want you to realize that it doesn't matter It really doesn't matter what you do Because what you're gonna have to do it's just to build the component and and share that with your team, right? Doesn't matter. So let's stop that war right away so quick agenda because we only have 25 minutes and Basically this talk It's designed for a good hour because and then we go a little bit into devil So I'm gonna speed it up because I want you to see a bit more the code part But I'm gonna brush a little bit things about web component showing you how old it is and then a bit how new it is right now so You we're gonna go through all these These elements of the agenda of the most important part will be the specifications and we're going to focus only on custom element and Shadowdom, okay So and then a quick reference on the framework world. I just asked question right now We saw kind of react one angular second viewed third and once again That's part of that that line right here, but and that war should end and right now. That's that's the point So what is a web component? Someone want to answer but doesn't have the mic, right? I'm gonna answer for you and so Before before we even dive the question is actually what is a component if I say, you know, what is a component you raise your hand? So there is a part of the room that doesn't know what is a component and what is Wikipedia tell us It's basically a component is a piece of software that is encapsulated extensible composable and reusable Some people call that in software engineering a clear module it has It has a behavior and then it gives you an interface to interact with right And there are a few keywords right there can see encapsulated extensible concept composable reusable those are the four the four keywords and This thing has been around before the web even started if you think about it But we haven't used this concept in the front the front and engine in front of engineering. Okay Component for the web Let's dive a little bit into that So if you want to build a component a few years ago, you know, I know some people see that and they're feel like oh I've been doing that It's okay. It's okay That's work and then you get basically AngularJS that came with directive. It was amazing and then you get all these new frameworks view React I didn't put Angular because there were no space and I had already AngularJS there, right? so You have those options you had these options in the past and now when you you go back to these definitions You realize that all of them they were actually approaching component that way okay, so If you take this framework, what is the component for each of these framework? I know the react people are about to say Everything is a component Right react right we good. Everything is a component about Vue. Yes. No You don't have component there, right? No, I'm kidding, but you should have components everywhere So the the main part here is the fact that regardless of the framework that you use The idea of a web of component is like it should be able a component without being web component first The interoperability is the most the most important part of what we're trying to do. Okay, so now we move from component to web component Well component we pick Wikipedia says a lot of stuff about it Right, so I'm not gonna read that for you. I'll give you two seconds We good now. I'm gonna highlight Part of that definition that makes sense to all of us so What component? We have HTML and DOM specification. Yeah, it is just a specification What does that mean means if you able to implement a framework that respect those those Specifications you're good to go then It helps you build a set of reusable widget This is also something really important widget within component within reusable. We've done that all the time Even though we have already tons of framework or component library We keep rebuilding them all the time because we want we think oh no that one wasn't good I'm gonna do that my way because my way is better and we end up rebuilding widget over and over Those are web component without being web component without being called web component. Okay but most important part is the fact that software engineering has been around before the web was and That's basically the same idea of component based software engineering that that is brought to front-end development. Okay so If I give you this and I ask you how would you build that in? jQuery What I say jQuery you guys feel like it's it's possible, right? You've been doing that before we have to pure you were doing it. Okay. I know I'm saying I'm old but We all we all did that at some point Okay, this is a web component But if I show you the code base of this and I ask you to to pinpoint web component You will be like what are you talking about? Right, that's not a web component. That is just HTML CSS and tons of stuff and I don't even know Where is the nav bar? Okay? I like putting comments. You can see it right there, but we can do better We can do better What if we were to write that this way? Now we we have something cleaner already We know we have a nav bar and that nav bar should represent just that that is the component There is something about that component that is not right someone can tell me empty well, okay, so someone got it right it is a component and it has and Clearly a behavior so when you render that thing it shows you that nav bar, but there is no way to interact with him Okay, so but he still served the fact that we have something we can reuse But yeah, we won't be able to change CSS and stuff like that. So that thing translate to this Okay, so Which technology would you use to build this? Okay, just for the screen someone say JavaScript, which is which is obvious and hopefully we're in the JavaScript dem room and Very very thank you for your answer Okay, let's let's push. Yeah, really the question like doesn't matter or does it It doesn't matter and it shouldn't matter So let me dive a little bit into the specification quickly Specification for things custom element shadow dome HTML template and HTML import. We good You don't know any of this. I Have a resources page just for you because we have 25 minutes But one of them the most important parts here It's probably the custom element and shadow dome Okay, those are the two things I want you to to pay attention to so How many people do JavaScript in the room everyone? We agree on that before we even started. Let's say HTML Are you guys doing JavaScript with that? How about CSS Now you're allowed not to do CSS when you do JavaScript, but not HTML We're good So look in just one question. I can prove you all web component developer because that's all you need To be a web component forget about those react angular and Vue. Yes, that's all you need to build you a web component And yes, if you use things like polymer frameworks and stuff like you using this thing Out of the box without any fanciness or things like that to make your your code look react or Vue. Yes ish so And my point with these slides is just to show you that before we dive into any framework Well, are you all web component developer? So let's build web component. So how do you build custom element? If you can't read this code raise your hand and We're gonna have You can't read it. Okay. We're gonna have a one-on-one at the end Yeah, it's my goal to teach people JavaScript. So if you if you don't if you can't read it that's talk to me at the end I have a class That extended HTML element There is no transpiler here or any of this is just JavaScript raw JavaScript your browser supports that Then I have Windows custom element define app selector and Then I just pass the class That's defined that object That element and then I can use that this way in my app and Voila, we have a web component That was difficult, right? But I'm still available after the talk If you don't get that part, okay, so a few points extend HTML element custom element define and Then using it in the browser Look if we have that as The base the fundamental to build web component. Why can't you do that in Vue.js or react or Angular? Sure, you can you can literally reuse all these things and have your web your your view and React component to be web component ready. So I'm gonna dive a little bit further When you have the class you get this life cycle hooks that helps you enter right with the component when it enters the page and One is leaves the page Well, it feels like in react. We have something called component Someone said did not you're right and then component Will and mount Those are here We're not advancing stuff. We're just reusing the the same mechanism that exists out there, okay? And then you can you have these life cycle and you can even go further for example here. I want to track that attribute disabled attribute I'm just using a class. I'm just Have observed observable attributes and then I'm tracking this disabled Thing here and then when it's disabled, okay, it just returned the get when I when I put the attribute I just Read as attribute and then this year refers to the element on the page So far so good Okay, and you can see how I use it right there just pass disabled there and then I have my component working So there are a few other things you can add on top of a custom element the fact that you can extend native component You have an image you can just say I'm extending an image and I'm adding my own features on top of it People you've been doing that already if you use angular Directive things like that you take a component and you start adding more property on it You've been doing that already observing change to attributes. Well bindings You've been doing that as well already with your frameworks for go see web apps that it's a long story short, but It's a long story, but literally progress you web apps with web component. You you you kind of get that. Okay? Today, it's kind of free just to get these behavior with web component and And the other two things are not really the most important parts here, but Custom element is One of the fourth and it's probably the most important part of them then shadow them Anyone shadow them Like like you want to say something about it, and I will just repeat that you wanted to say what You get you get that there. Yeah, very good. So I don't have to repeat that but just a long story short If you see the shadow don't will look something like this So you get your your HTML dome But really pay attention to that HTML is up here and Then this is the entry point the closing point and then I have my component That's we're going to build in a few minutes, and then I have the shadow route here So basically there I get a kind of dome within the dome. Okay was the dome a dome within the dome so The one of the main rule here is the fact that your CSS style will be encapsulated Within that dome here. So the the the linking process saying like you have a CSS file That is general and we you put it on the top don't do that And then you expect it to pass all the CSS down the page. Don't do that But obviously with shadow dome and this is something you don't get anymore and it's good because it helps you think in term of component Okay, so Let me just go back here quickly shadow dome Self-contained scope CSS Possibility to to write a more declarative code It it helps you focus on just CSS in one one component, right? So if you if you use those rules you start building more focused component So the other two HTML template and HTML import I put that in the resources because we only have 25 minute so now and Actually only 10 minute left look platform support. Where are we? It's green Do it Every day from now, but I need to show you quickly how you will do it, but it's green Yeah, don't look don't look here Right, but it's green Okay That they're doing it. Okay That part is really important before we dive a little bit into a bit of code. So I'm benefit. I'm just gonna put them right here interoperability lifespan Portability portability is really important. You can reuse that and And and mix them everywhere you want those slides you're gonna have them So I need to push a little bit. So the framework war Look the greener you are here The closer you you you you are to the the standard so Polymer skj s x tag and there are other other web Web framework friendly framework out there that are already doing it Angler is the most advanced on This tree because it gives you already tools that you go directly to a component React is a bit red ish, but I'm gonna show you a way to get it a bit greener in that so Move on here. So I Think I only have like eight minutes Maybe less than that. Let me jump into the demo because I feel like we're gonna miss on something so This is this is an angular app. You see a Component here. That's an angular app. I Want you just you to recognize some bit of code That is used Here Remember the create custom element We saw before and then we have custom element define these These things here and then you will hand up with this pop-up element that you can now use in your code as Just a tag pop-up element Okay, I'm gonna show you how you will use that in a in a in a code in another app in a few seconds But I want you to to see this one and this one yet year Component react so this one will be much easier to digest So I have a simple example right here So it's not to react related is literally JavaScript. Yeah, it's react, but I get the Tool here an MPM module called react web component is not really well maintained But he was already doing the job before even every everyone thought about it at some point So you have this component, but instead of instead of saying I'm gonna start the project using I'm gonna mount it in the dome I'm just building it. Can you can you see it? I'm just gonna put the team. Maybe white. Is it better? Yeah so React web component dot create. I'm inside a react app This is a small component. He just does Hello first them right and Then I have my component. What do I do with that? I go inside my index HTML and I just put my component there But that's a small app. That is a literally a small app if I if I run that you will be like that's that's That's too simple But he does already the job like you get a component out of that and your component hand up being I Expect to something that I didn't give him. Yeah, I was trying to do this one and Web component react. Yeah, this one and let's do that again. Thanks for your help So push. Okay, so This is a small app But I'm gonna show you with the bigger app how I can turn an entire app into a web component and reuse that somewhere else So look hello first time. I know you disappointed, but it's there Does the job? But look this this literally this is the code that took us there if you keep the same the same idea and we kill that that app and Open a beautiful app that we build just for you so a few hours ago, we thought like netflix wasn't doing a great job of Shipping us movies. So we decide to rebuild it. I'm not kidding. It was a true thing and then If you go inside this act flicks app I'm gonna go back here. I have my app in here This is the entry point of my app as you can see I'm just like a react web create I did the app and then I turned that into my act flicks component Okay, so If I go here and I run that that app because I still have three minutes. I Should be able to see something that looks Pretty cool. Yep coming Yeah, I just killed some stuff here. So let me bring that back So someone said I just need to import Yeah from No two minutes so It's called react Okay, let me look at my computer and that's will be much better React dumb and I think I should just do that this way and Then keep it this way again perfect people of you So let's go back here and then We should have Thank you very much Well, we have we have some problem. No worries Still have two minutes. So let's make sure that this works. So so down It's gonna be fine. So if we say react dumb what he wants he wants he's saying that Yeah, indeed you need to tell him like instead of doing that. Let me put it a div here thank you, sir and Then you say ID should be good Now if we go back here Yeah, that thing works So The the style style is broken But that's because I turned that into a web component So I kind of reverse the thing and the style got broken but look what is happening here. I'm type I'm I need this thing to run the app So if we take it if you remove that part and then I Go back here. Just say Use this instead and Go back inside my app. Look my app is literally this huge component It's this this component with all the logic here knows where to get the data and stuff like that So if I go back here and then make sure that I run my app the import Thank you accept that There is another one This is this is what happened when you do live coding, but this thing here. It is just a web component That's it. So if you take if you take that code. I'm just I just turned that into a web component