 Can you hear my voice at the back? No. Hello? Okay. Good evening, guys and gals. So my talk is regarding web components that works everywhere. So I assume most or majority of here are front-end developers. And these front-end developers are working for several tools and JavaScripts like React, Angular or Vue. And then some of us is working on calendar, like to example calendar. So we can create calendar for React and then we can create a calendar for Angular and Vue.js. And then when I try to search date picker in NBM, I found 1,532 packages. So there are packages for React, there are packages for Vue.js and packages for anything. So what if our date picker is the same functionality with the input and button. So we can place this in our React, we can place this or we use it into Vue.js and then everyone is happy, right? So by the way, I'm RJ. My name is RJ. You can call me RJ. And then I'm front-end developer working in a bank and then I have an open source project also, a lead custom element. I'm currently starting it. And then I have create custom elements. So most of our open source are working on web components. So what is web components? I highlight is it can be used with any Java save library or framework that works with HTML. So if you're working with CSS, HTML and JavaScript, web components is there. So basically it's standard for our browser. So there are four specifications for web components. So this is founded by W3C or the web components org. So these icons or images, first is custom elements. And then the second one is shadow DOM. The third one is HTML templates. And the last one is the new one is ES modules. So since I have 30 minutes, I can tackle or discuss two, which is the most important, which is custom elements in shadow DOM. So I will talk first the custom elements. What is custom elements? Custom elements is provides a way to the authors to build their own custom elements or DOM elements. So it's just like input or button you can create on your own elements like RJ dash element, something like that. And then it can render a button with the color of blue, something like that. So on how you create your custom elements, this is the way how you create. So HTML elements is just the base class, HTML element is just native to the browser. So you can found it in Firefox, Chrome, Safari, or even though the opera. So just create a class and then extends the HTML element and then you can create a constructor and then have a property. The next one is we can create our own render. So we can do this, this that in our HTML and then we can do hello this name. And then next one is we can custom elements or native custom elements has their own lifecycle also. So when the DOM or element is append to the DOM the connected callback will be the one to execute. So that's the time it will execute this render method. So for example, I will create my custom element as hello name and then it will append to the body. It will call or also it will call the connected callback. We can also have since custom elements has features also that you can create your own properties. So you know this value, name, you can create this. So by doing this, you can static get observe attributes. So by the way, this is a standard you can found it in web components org. And then every time the property will change it will have attribute callback change. So it will execute this. So the same thing with the reactor it's a lifecycle also in the view also there's a lifecycle. So getter and setter. So since we are doing ES6 class base custom elements has features of getter setter. So you can do this like for example, you can query by selector and then set the property we can do that. So this is the way how you can declare it. And after that I just slightly modify our code something like in connected callback. So I just find all the properties or yeah, the property attributes and then set if we have this initial value. So for example, hello name and then I have name hello Jane something like that. So I will set that. And then this is how you declare your custom elements. So custom elements that you find and then hello name and you can pass the function or the class. And then this is how you put in your HTML. So there's hello name. This is the property or attributes that we have and then it goes to Jane. And then this is the one additional markup. And then this is how your custom elements render. So it says that hello and then the name Jane. Five components everywhere. So as I see there's a property also right. So you can do this also document query selector hello name. You can set also something like that. So it will change it will trigger that attribute change callback and then it will render. That's a pretty short definition on how to create a custom elements. Next one is a ShadowDom. So this is another important or the most important specification of the web components. So what is ShadowDom? So ShadowDom is defines how to use encapsulate style and markup in your web components. Have you tried notice that if you create your own component and then you have a bootstrap CSS right and then that bootstrap CSS can override your styles. So you have noticed that it will change the color or it will change the spacing in padding. So the ShadowDom will trap or will prevent this doing the changing of your styles and elements. So how you do that? So custom elements you can do in the constructor these that attach shadow and then you can do open. And then we can change slightly on our code that since there's a shadow we can do this that shadow root and then have this element in tags. So this is how this our custom elements render. So you notice that there's a shadow root. So it will prevent or guard of your element inside the shadow root. So we can change slightly our code. So in the head I will have find all the p or paragraph and change the color of thread. So you notice that only the this web components works everywhere is the change the color. So it doesn't affect inside the shadow root. So it says that no, I will not allow to change any of my elements inside the shadow root. So this is also one of the good features of the custom elements or the web components. So we can do also add styles to our custom elements. So I put style and then I will color all the paragraphs inside my shadow root and then make it a blue. So you notice that only my custom element change the color. So it doesn't change outside my custom elements. It doesn't change the color outside my custom elements. So as I said that custom element guard you of modifying any styles and DOM manipulation inside your shadow root. So I see that document the query selector I will query all the p or paragraph it returns only one. So meaning that it cannot find any paragraph or any other paragraph inside my shadow root. So to summarize this is our source code to have a shadow root. So first constructor render and then I have a connected call map and I gather. So this is a native to the browser. So you don't need to use any other frameworks for this to create your own custom elements. By doing that why should I care? So why should I use this? Because I use React, I use Vue.js, I use Angular. It's really cool. So in some other enterprise company like I work in a bank so we have a lot of teams and a lot of projects. So some team A using React, team B is using Angular. Because team A and team B are productive to this framework. So one of the advantage of this is brand consistency. So consistency of your branding because in our enterprise company they have their branding colors fonts. You need to follow all of these things. So with this web components you can create your one web components, custom elements and reuse to other frameworks. And then business perspective. It can save money, right? So you don't need to repeat or create like for example what I said is calendar. You need to repeat it. In Angular you need to create in React, you need to create in view. So why not create one calendar or one date beaker and reuse it. And then developer experience. The code will be more consumable. Code can be shared between teams more easily. So if one team is using date beaker they can reuse this also in their project also. So they don't need to rewrite it. So the next one is even use these things. The answer is yes. Because most of our modern browser are supported custom elements. So rather than the edge. So IE it's dead now. So don't do that. Anyway HTML elements, Shadow DOM and ES modules all are supported in Safari in Firefox, recently in Firefox supported. In Edge they use polyfill to run your custom elements. But I think recently they announced that they're using Chromium. So Chromium is based on Chrome. So since Chrome is supported custom elements so usable. So my last part is demo. So I have created for demos using Angular, React ViewJS and then native VanillaJS. So I create input element and reuse this to various framework. Red is Angular. So blue is React. And then I have green. Green is ViewJS and the black one is native one. So for this I have the input element is a custom element. And then the card itself is they build on their own library or framework. So you can see that it's almost the same right? So you can reuse this. I just create a script tag and then put a source of my custom elements and then I can reuse it. So it's the same thing. I can search and then also in ViewJS I can search also. So this is created in the... I already placed the URL so that you can take a look if you want. I use code signbacks to do the coding and then stack leads of the coding for the custom elements. So I think that's all. Sorry. You showed us the list of all the desktop browsers. How is that where the mobile browsers to the custom element work there already? In my experience it's Chrome. I tried. So I'm not sure of other. So maybe I can test when I get them. So you demo different framework. Yup. Which I think is... And you also mentioned that different teams use different framework already. Yup. So like which parts you see going down? You see frameworks providing the capability to compile or transpile their component things into web components. Or do you see going the other way around where people will write web components and then they'll have a react wrap up for it or an angular wrap up for it? For me, you can do vote because if you are productive with, for example, there's angular elements so you can create your web components into angular and then convert it. And then you can do that in Vue.js also. You can create what you call that web components in Vue.js. The only thing is there's an additional bundle that you can integrate it. So while the native one is just or the browser already provided it to you. So why not use the browser provide a browser API that you or they provided it to you. So for me, because in our previous my previous employer, we use angular elements also and then later on we decided that what if we can convert these angular elements to the web components. So we converted half of our angular elements to native one and then the bundle is almost half. The bundle is almost half the size. So since we're doing I don't know because the bundle size matters to us because we're using some other places are like 2G or something like that. They're using 3G only a network. So bundle size matters. So back to your question some other teams or some other company preferred using Vue.js to for example convert to share their components to other teams. So if you're not planning to share it it will just in your team why you convert to web components, right? At least web component used in Vue.js So the last I know is Stencil.js I haven't it's just for the hybrid only. So I'm not sure for the react native. So because react native is just another layer for the hybrid. So I'm not sure for that. I haven't tried. Do you have any any example for event handling? Yeah I love that. I still love that. For the for the web components, right? Your question? So this is me and my colleague create some like custom element TS so we just have something like sort behind the scenes we create a decorator to make the developer easy to to use. So we have this what do you call that? I have input, right? So input so I have this dispatch and then dispatch mean in web components is just exposing exposing events to to the developers. So for example like for example this is ar.change I will expose this event to the developers. So when they listen to this event it will trigger. So I have created also we will created a listen so meaning it will listen to any event. So you can see that we listen to the key up and then the other parameter is just like the input or the input field that you want. So what in native is just a simple this that add event listener and then for the native for dispatching it to create an event is this that dispatch. So we just we just convert this to to more presentable and then easy to use. So we have this dispatch decorator and then we have a prop. So meaning it's a prop is just like a toy binding when you change when you change this property it will watch watch and prop will be combination. So prop is just like when you change this the property that you need to expose property and attribute you need to expose to the developer when you change this you need to implement a watch. Sorry. Sorry for that. I can see right. Okay. So I have a prop right. Prop is just the one you need to expose to the developer. So if this will change you need to trigger a watch. Watch is just watching your attribute and property. So as you can see that when the value change I will execute this. One last question. If you have company how can we pass data from company you can use dispatch or you can use an event. So in a native event there is a bubble you can sit to bubble to true and then there's a compose to set to true to make it up. So it's just like rxjs that you need to to bubble up. So you can need to dispatch it. You can pass all through attribute also. So you can pass it through attribute or you can pass by event. Event is a global so you can dispatch it and then listen so if your child is listening it will it will receive your data. Yup.