 Hi, everyone. My name is Karin and yeah, my talk. So I was working for Zunkar a bit recently, and my talk is about using back component and view or like using your view as a back form. Yeah. Before getting into the talk, I would like to tell a few more things about me. I'm a Naplibata, a JS enthusiast, and if I may say so, I am an Audubike. The first one is just a pencil to say that I'm a dreamer. So yeah. So I would like to start my talk with a story. Story of a front-end developer like you and me. Let's call him Goofy because why not? And bear with me, there's a lot of weird gifts coming in. So yeah. So this Goofy is really a good front-end engineer and he tried to follow a lot of principle when he's building stuff. And one of which is DRY. Don't repeat yourself. So what has happened is one fine day, his PM comes to him and he's like, Goofy, you know what? I need a gallery slider on this particular page of a website. And Goofy goes like, okay, I can do that. And he looks at the code, he find it is on view and he was able to build it out on a given point of time. And everything was awesome. It was like 60 FPS and everybody was happy. Wish it was the end, but it was not. So on the other day, PM came back and said, like, okay, you build this really cool slider. I need it on any other page on the website, right? And Goofy was like, okay, it should not be a big deal. I have already a component in view. All I have to do is like, I have to use it there. And he was like, very happy. He was like, okay, that should not be a problem. I will do it in very short span of time. Then he saw the source code and he was like this. Reason being, to his surprise, he found out that part of the website was not in view. It was either a middle JavaScript or let's say on react. And only option he had then was to rewrite the whole component, maybe in react or whatever the language it was on. And he was really unhappy because he built a really good thing and he can't use it anymore. So Goofy wondered if there's a way he can use his existing work into a different environment. And I'm just wondering how many of us have been in that situation before? Like Quick Show Offend, if that is the case? Okay, cool. Very few people, but that does happen, yeah. So I was in same situation sometime back and yeah. So, but Goofy then did what all of us love to do. He Googled and he Googled a lot and he found something called Web Component. And he was really interested into it and he was able to do it and he was happy. So yeah, just again, Quick Show Offend, how many of us even like have heard of Web Component? Like we know what Web Component works, awesome, awesome. Yeah, that's a really great number. So let's get down to the problem what Goofy was facing in first place. So if you component are limited within the Vue.js environment, you can't use directly inside a browser. Browser natively do not understand what Vue.component has to do. And the solution which Goofy has in his head was let's convert the Vue.component into a Web Component or a custom element with browser can understand right off the box. So that is the reasoning behind why Web Component. I have like already told what was the reason he looked after Web Component. Let's get to the definition, like the bookish definition. Web Components are a set of platform APIs which allow you to create new custom element, new custom reusable encapsulated HTML text. Lot of words there. Let's break it down. Custom, custom tags, it means that you can have your own tag which browser will understand and it will do the specific thing you want to do. And it will be similar for a browser like any other div header list is reusable because we'll get into detail how it works. Essentially it is like you have a JavaScript profile which defines how that custom element is fundamentally and then you use it in places where you want to do. All you have to do is like include that JavaScript file and include that markup where you want to use it. So that is the part where the reusability comes in. In capsulation, this is really interesting. So Web Component uses something called Shadow DOM. We will again get into detail what that is. What it enables us to do is like it encapsulate all your styles within a tag. So no matter where you are using it, the parent style will not interfere with the component style. And yeah, that's what it does. So before this, in definition we said like it is a set of web APIs, right? And essentially those are like four fundamental things which compose together to be your Web Component, custom element, Shadow DOM, HTML template and ES module. And I think at least with ES module, we are like we know what ES module is at this point of time. And I hope most of the people already know what templates are. So custom element, what a custom element. I think I have defined that pretty well. As a web developer, we are able to build an element which serves our need. And yeah, that's pretty much it on the custom element side. It has its own behavior. In short, like we have input type calendar, right? And then you somehow magically get the calendar inside the form. So that is a sort of custom element. Let's get into the thing which we were discussing before, the Shadow DOM. So in some sense, it fixes the CSS and DOMs because now you are writing a component which is custom, right? And you want it to be reusable. So how many times it has happened that you do a lot of names spacing to make sure that if you are using this component somewhere else, no other style is causing that component to break. So what Shadow DOM does is it encapsulates all the style implementation and although dev and all those structure within that. And so the parent component styles will not be directly affected, will directly be affecting the child component. So sorry. So Shadow DOM is basically a normal DOM. Only difference is how it is created and how it behaves in relation to the rest of the pages. And ES module. ES module is nothing but, sorry, my bad, Estimal Templates. So Estimal Template is just a mechanism to say that this template exists. Browser will not render anything within that template. But you have a way to handle that using JavaScript. So that is how you do templating within the web component. And then ES module. So OK. ES module. What is a module? Module is just a JavaScript file from which you export. That is the basic understanding of what module is. And then you can export and import the module and function. And you can call each other's function. And you can get that functionality within where you are trying to import that module. A lot of jargon. I know you might be feeling sleepy already. So web component in action. So as you can see, this is the home page of zoomka.com. And we are in process to adopt a web component in this place. And if you can see this whole thing, this whole search bar is actually a single web component, the definition is somewhere here. It's like you are including script as a module. And you're giving the part to it. And then you're defining the markup. So this is the reusability part. We have this scenario wherein we have this search widget in multiple pages, like one place where we just have HTML CSS, a few places where we have view in place. So that is when the web component shines because you only have a single component, a simple markup, which takes care of all the implementation details. So this component does a lot of things. We'll get into detail in coming up slides. So you must be, OK, this is all cool. But I'm here for you. And why are you telling me web component for so far? But the point is, the problem Goofy was facing. He had a component in VU, which was working fine for him. But he wanted to use it somewhere else, maybe in React. How he did that? He did that using this module, web component wrapper. So basically what it does is it wraps your existing view component into web component. So only thing which you need to remember is it still needs view. It's not like you're getting rid of. So it's not like it's when you're bundling it. It's not like you're getting rid of view altogether. You have to have view because in the end, it is a view component wrapped as a web component. And yeah, let's get into how we can convert our view component into web component. So in this example, in typical scenario, you import view. You import the wrap function from web component wrapper. Then you import your element. And then you define that element and maybe some option if you have. And then you wrap, basically, your component using wrap function to create a custom element. And this is the last line, which you can see line number 12. It's basically a standard way how you define your custom element. So your element will be available with the name of my half an element. In this case, this element actually makes a props with a message and shows it to the user. So in next slide, we are going to understand how you can use it. So as already discussed, you need to have view because this component does not build. View component wrapper does not build and takes view inside your component. Reason is you may have multiple web components. And you want to make sure that you're not having redundant code. If you are putting view inside each and every web component which you are wrapping, it will be a lot of redundancy. Then you have the element definition which we saw before. And then you can use it. And if you notice, you will find that the props message is directly working without any other work. So remember, this is a web component which is running on normal HTML file. And to make the props look, we don't have to do any other work. It will just work. And that's all you need to use the web component which you have built it just sometime back. So the thing to notice is all the props, event, and slots are actually being proxied. What I mean by that is if you have a props defined for your component, it will be available for your web component as well. Same goes for the event and slot. Only catch in slot is the scope slot here is not supported at this point of time because it's a view-specific concept. Yeah, that's about it. That's all you need. But the problem with this approach is you have to always wrap your component into using view component wrapper. And if you want to get rid of that, and you must be wondering how that can be done, that's a relatively very simple step actually. You can have this inside your package, Jason, and which essentially says that build this with the target of web component, wc is time for web component, and then the path of the view component you want to give. And if you have more than one component, you can give a streak here. And you can pass some sort of name scoping. So what it does is it takes the name scope the first, and then it takes a file name and build it. So if you include this step, what you can do is you can have your view component in your project working seamlessly. And then you can also build web component, which you need to be used in other places. Yeah, so that's pretty much it actually. And that's all you have to do to make sure that your view component whatever you have built so far works everywhere. Enough of talk, let's get into the demo. So remember I told the problem Goofy was facing? So if you see, this project essentially is a React project. And if you can see this is, I'm not sure whether it's visible, it's visible. You can see that inside this, this looks like an etcher tag already. And then we have shadow root, something called shadow root. And I was talking about style encapsulation. This whole style is a part of this gallery component. So point is, then all the style and everything which is required for this component to work is resized within them. And the parent style will not interfere with any of the things which this component has to do. So this one what you're looking at is a React application. I will get into the code if time permits. The other way is this. This is again a typical HTML file which has this web component. And inside, I think, I have defined, I think, I have said, I need view and I need definition of that component. And then you just write it as a markup and it will just work. So sorry, etcher. So again, you see the underlying implementation within the web component remains the same. It works as if it's, so basically because it is natively supported. It does not require anything else in sense of like customization to make this work. And all the props and property will, yeah. So what you're looking now is the view component because it's a view project. So I can use the component which I built inside the view directly. So that is the proposition here. You don't see a web component implementation because it is not required. That's it, yeah. And yeah, we are done with the demo. But I guess there will be some people like, dude, I know web component. But tell me if I have a web component, can I use it inside a view project? And yeah, actually you can. And it is even easier. So when you have a web component, essentially it means that you have the definition for that component and the tag. All you have to tell view is like, please ignore this tag. So bit context on this. So modify search, what you're looking at is a part of the search, which search widget, which we show on search result page. And we don't want view to complain about this element has not been defined because this will be the part of the template that we are going to render it. So we just say that please ignore this way. That's all we have to do to make sure that web component is working. And the places where you want to use it, you include the script file and the tag and the props, which is required. We will get into like how that is implemented. And this is, yeah, it is an action. So what you're looking at right now is that modify search widget. And it has a couple of things going on. So what you can see here is a radio button basically, but it's like a tab. So there's like each component in each tab. And then this whole thing is again a component which is comprises of two small components. So here you can see a pattern of composition. Idea behind that is, let's say you want to only use address speaker in some other places, right? You can use only this button. You don't have to have everything else. And similarly goes for the calendar component. And then you can compose it together like we compose our diffs list item or header or whatever. So it is very much like you do your typical web development. It's nothing special going on here per se. So let's look at the code of that, of the very same thing of the modify search widget. So here the definition of the widget itself, like whatever the behavior, the skin, you see the style. And this is how you use it. So this is very much, I understand there's a lot of noise, but let's get into like specific bits. So what you're here seeing is like there's a attribute which is a binded to a very like scalar value in this case string. And then you also have attribute binding and the reactivity works flawlessly. So in this case, the desk address, the source address and everything else is actually a view data. So basically a variable which is binding to the search modify custom element and same goes for the reactivity. So what you're looking at if like you can see line number 23 here, this web component is actually when you click on search or modify, it is firing a custom element, custom event which is named as modify search submission. And when it is firing that you can actually listen to it inside view and then you can handle it and what perform the action, whatever you want to do. So the crux of all this is, it is like your web view component. It's nothing different. Yeah, I think this is redundant. We have talked about this bit. Cool, let's get into performance. So the problem is like when you're using, when you wrapped your view component as a web component and you're using it inside, let's say react application as we've seen before, you are actually loading view and then web component definition. And this is not a production screenshot. This is just a basic gallery, what you have seen performance of that. But if you notice all the matrix is same except performance because my understanding is web component needs to load few other things to make it work. And this is given, I'm not using polyfill. If you have to use polyfill, that's another performance. So this boils down to the decision wherein you have to make sure that your component is complex enough, which is not worth building it again, maybe in some other framework. And if that is a thing and you are able to take that little bit of performance hit, then, and you are saving huge time here. That is the proposition behind using web component in other frameworks. So I will touch upon a few best practices, which you should keep in mind. And I had a few of them, which I have learned hard way. First is encapsulate your style. What I mean by that you, because it's a shadow dorm, right? So the limit shadow root ensure that regardless where it is be used, if you apply styles within the component, it will be same. And specifically when you have a shadow root and then inside that you're using another web component. So that goes nested and that creates a lot of challenges if you're not encapsulating your style properly. Then yeah, create your shadow root as the constructor. So I have not given the brief understanding of like how web component looks like in general, like they had their own life cycle and stuff. So when you're creating your shadow root, you want to make sure that you're creating it inside the constructor, but not somewhere else. For example, connected callback, like please connect offline if you want to get more detail into this. But yeah, and place children of the element created into its shadow dorm. So if let's say your web component is creating new children, you want to make sure that it is getting placed inside the shadow dorm. Again, for the same reason that the JavaScript and CSS will work seamlessly if you do that. Otherwise, outside JavaScript may affect or interfere the new child's. And yeah, the fourth one is really interesting. So point is, let's say you are setting tab index. You are initializing tab index to minus one. And if you do that, that component will not be accessible using keyboard. That will not be focusable, right? But when you do that, you won't, and maybe that is what you want by default. But you also want to respect what author has to say. So author in this case is the person who's using that component. You want to make sure that if author is giving it tab index zero and he wants it to be focusable. And if you're not listening to that value, what is coming from the author and you're setting it by default to minus one, what will end up happening is your component will not be focusable from user. So that is one thing which, so this goes with any other global attribute which an element has. And so the fifth point I actually had to spend a lot of time to get it right because when I was building component, I had this assumption where the properties and attribute of an element will always the same. And that is not the case. So basically properties are the things which can take rich data set. For example, objects are ready, but that is not true when we are calling, when we are thinking in terms of attribute because attribute can only be scalar, maybe a Boolean number or a string. So you want to make sure that you pass this data using attributes, I'm sorry, using property not attribute because otherwise you have to JSON dot stringify, make it to the string and then pass it inside the component which is not good for performance. Oops, yeah. Okay, there's some back. Okay, two more things in terms of best practices. First is like internal component activity, dispatch events. So for example, you have this component which makes some API call. And then you want to make sure when that API call is success, you dispatch some event. So the parent who's using that component is aware, but if the component itself does not do that, the challenge is the parent will not know when something has happened. So if you're doing something and you want to make sure the parent is aware of that activity. And the seven point goes with it, like if a parent is setting some value or, yeah. So if we are dispatching a value when the parent is setting that the problem is, now you may have circular data dependencies. So what I mean by that, the parent is setting some value and then you're dispatching an event. Maybe parent is listening to that and setting other value. So that may get you into infinite data loop which you don't want to be in data binding system. Yeah, and like every other technology on web, web components are also not perfect. So there are like things which you have to do manually and you have to figure out what works best for you in case of build system. And the distribution is now relatively sorted, but there's like a lot of boilerplating when you create your hello world component. You will see that there's a lot of things which you initially at least I wondered why I'm writing all of that. And then mapping between properties and attribute is something which you want to make sure you do that. Otherwise you will be like, I'm setting this attribute here, but I'm not getting any property. So you have to have a proper setter getter for that. And let's look at the browser support at this point of time. So I'm going for the four pillars or like four fundamental APIs which comprises web component. Custom element have around 73, this is global actually. HTML templates are pretty decent right now. It's like 93 and shadow DOM is somewhere around 75. So accumulatively, if you look, it's pretty much decent. But so there might be scenario where you want to make sure that web component works in like older browser as well. Or maybe in some places you want to have a polyfill. So web component loader is something which you can use to make sure. And what it does is like it only loads the minimum number of polyfills which is required by doing feature detection. And there's also a standalone working lightweight version of W3C custom element specification which is already in production by Google AMP project. So yeah, they are using it heavily. Unfortunately, there are a few things. For example, styling encapsulation which cannot be polyfilled. Yeah, so that's about it. Thanks for being such an awesome audience. Yeah, thank you.