 Hi guys, am I audible at the back so a very good morning to everyone and welcome to this DSPU on a Friday skipping your offices I hope you are all liking it you must have had your breakfast and we will go through this very quickly I have a lot of content to share just yeah so just introducing myself hi my name is Rahat Khanna I will be available on most of the social media websites using an alias called m-app mechanic and you will be able to find me on twitter github and these stuffs from this so I have worked on HTML websites or web apps since beginning I have worked from jQuery jQuery to angular to ember ember to react and a lot of this stuff at the back end also so so as going through all of these different frameworks you can see that the talk which we are going to do web components has become so dear to me because I have been the pain all of you have been okay so going to the next slide what will be the agenda for today so today we want to cover most of what about web components in a very simple manner I will not be going to talk about very complex frameworks or as such and as you know that web components is not a framework by any one organization any one community it is an open framework which has been introduced into the web standards by W3C or by the standards organization like HTML working group as such so we will through the course of this session we will be knowing what are web components what are the main parts of web components and then we will try to build one small web component like a spooper button and then the we will do the best thing we will use that web component in angular as well as in react and I will show you how to consume them so starting up how the evolution of front end dev has been there so there were very static HTML websites we could see some websites we which went to the server then the response came back you could see a wide blank screen which was not at all a great user experience the second era was of Ajax DHTML a lot of animations a lot of mobile web started to come up mobile web was also at a very nascent state and then the era in which we are currently era of single page apps era of CSS 3 animations era of PWA server rendering and all that stuff so you see that how front end world has evolved and how complex it has been for all of you front end devs from the beginning to now so there are a lot of problems everyone has a lot of problems we will discuss a few of those problems which we face in our day to day lives in our offices in our work so the first of problem how many of you have seen or learnt more than four frameworks in two years time just raise your hand so around 80% of you so you'll know that every other day every somewhere in the world someone would be making a some new framework today while we are talking here so everyone wants to make their own new framework and then if it gets popular then we have to learn it becomes open the next problem is that device sizes every now and then Samsung or Apple or any other device manufacturer things that no now this device size is not good enough for the users now you come up with a new device size so there's a new device size then we have to take care of all our responsive websites on all those device sizes all those browser quirks and all then the problem of dependency management how many of you have used a MacBook dev device which had only 128 GB and then if you install three node projects and all your space is consumed by those NPM modules and all how many of you them a lot of them so this was a pain that different dependency held even though NPM came up with the flattened dependency and all but there's a lot of different dependency management tools which we have to learn and we have to cater to then there are again comes the problem of a lot of build management tools again the biggest problem I always faced making my build pipelines was figuring out which webpack loader to be used for which type of content then figuring out it for the deployment process and all and then learning grant, girl, roll up and all of these things I don't know when a new build management tool will come and then I have to shift all my deployment tools to that right so the final problem is that this is not of a problem right now but still if you want to use five different frame libraries of frameworks right now also you have to import all of them you have to import earlier you have to import the HTML file the CSS separately the JavaScript separately and the markup separately so if you wanted to reuse something from bootstrap you have to copy paste the markup separately you have to import the bootstrap CSS separately and then you have to also import the JavaScript file the JavaScript can also get two JavaScript the code JavaScript there's a code plus one JavaScript code plus two JavaScript so so many of JavaScripts so it has been a problem so problems are not stop signs they are guidelines we should not see the problems like we have to do with it or stop learning new framework so the community thought that we'll build we'll use this problems to create something new and someone somewhere at Google or somewhere in the community proposed a new guideline that why don't we make this interoperability or make this standardization across the browsers so that no one has to cater to this problems or no one has to face these problems okay then came web component but there's one secret which I want to tell you which all the browsers never ever told you do you know what you have been using web components since a lot of couple of years and you don't even know it you have been using web components day in day out I'll just show you quickly how you use the web components day in day out just give me a second so if you go to YouTube and you have all used video element you have used input type is equal to date element input type is equal to number element and you see that all of these elements have their internal markup or they have some their own logic like the date picker shows the native date picker and the number input type number shows a counter and all how do they even show these things if you just give me a second yeah so in Chrome if you go inspect element you can actually see the internal DOM for this particular that is called the shadow DOM so when you go to settings and you go show I'm disabling this show user agent shadow DOM this is the one which will enable you to see but now if I go to this element it is normal video tab right there is nothing associated with this video tag can you guys see it is it visible is it visible now still not visible okay let's continue so if I go to settings and then say show user agent DOM and enable it then you will see that inside this video tag there are a lot of other things like all these dip tags all these media controls and all so you might have wondered that all these media controls or all these calendar controls are some native browser controls but they are actually HTML CSS and JavaScript and nothing else so you all have been using web components in one form or the other every time let's get back to our slides okay so now what are web components so web components can become a strong weapon for web convergence and I will urge you that after we make a web component today we should go home and build a web component either for your work or contribute to open source so web components right now have four things in its umbrella. So the first most important thing is custom elements. So custom elements is a spec which enables you to write a new HTML tag and we'll see how the second thing most important thing is shadow DOM. So shadow DOM is one of the best things that has come which will help you solve a lot of problems which you have been facing every time then the third is HTML templates and HTML inputs HTML templates HTML imports are still very at a recent stage and they are not still adopted by a widespread community. I'll tell you what are the other alternatives you can use in production apps today for this. Let's go into some of the history of web components. In 2013 first so you see that web component still although it has taken like four years to come into normal picture but in comparison to HTML files which took 10 years to come into production it is still a good amount of time and you should try to utilize this. So it was introduced by Google then all the community came on board and the last two points are very important. In 2016 officially in most of the browsers the V1 custom element spec was added and in 2017 now the shadow DOM is also natively supported by most of the browsers. So you don't have to worry about a lot of polyfills. We'll see the architecture. So as you see the architecture of web components will be the simplest architecture you have seen of a new framework or a new standard altogether. It is nothing but it is just simply your native JavaScript HTML and CSS utilizing some native browser APIs. So what are those browser APIs generally? So the custom elements V1 spec has a browser API so that you can register a new custom element so that the browser can understand that this is a new HTML tag which it has to associate some logic or some CSS to it. The second is shadow DOM you had to attach a shadow DOM to a custom element so that that styling or that DOM is not conflicting with others. We'll discuss it about more and something to look here is this block which is like the polyfills block. This is like Polymer, JS, XTAG and a lot of other polyfills which are there for just current moment. Please understand that web components is not a new framework is not a new library. It is the standards that are coming to web by default but till the time those standards are not there in each and every browser and you can start building apps using these standards. Companies like Google or some communities have made these polyfills and these polyfills are very minimal shames that you can just take out whenever the native browser APIs are there. So they are not a bit of like a lot of things. But so this is like a pluggable box right now it is there as soon as everything is there inside your native browser you can just take out this block and your web components you don't have to change much in your code after that. So why and where should we use web components? So as you saw that we have Angular, we have React, we have Ember or we have now Vue, JS, we have a lot of this stuff. But now if you remember that if you have gone through this phase in most of my previous companies I started then I started with a company I started with one framework then that project got over. If I shifted to another project that was in some other framework the third project was in some other framework but I had some reusable building blocks which I always use like some button element, some input elements, some phone validation element, some reusable logic. And I had to code it every time say different component in React, different component in Angular, different component in Vue, JS. But that JavaScript code the behavior of that component was similar to everything. And also in large organizations we have to maintain the branding, the color ratios, the sizes and all. And then I have to like bloody write the CSS in different all of these frameworks. Do you agree it is a pain? So that pain is going to solve with web components. So web components is currently for those small small components which you want to reuse in all of your building the bigger apps. It can be used as Legos in building bigger apps. So it will only act as building blocks and not the app itself. You can use any framework for building the whole app because frameworks provide a lot of good design patterns. But the underlying building blocks can be written once and then reused in all of the frameworks in all of the building architectures. Okay. So now starting off with custom elements. What are custom elements? As you may see that these new things like my app, my header, my content, all of these can be new HTML tags that can act as a custom element and you can build those and use them in any framework as per say. So how do you create a simple custom element? So a simple custom element is nothing but associating a class, a constructor and an object with a new selector HTML selector using the browser API, which is only this method custom elements dot define. This is the selector which you write. This will be the selector which will act as a HTML tag name which you which you use in the HTML. And this is the class either you can use ES5 to make a constructor function or you can use ES6 which is now present in almost all of the browsers available as native support and use them here and pass it here. So this is very simple. And there you can have all the normal gettersetters and all the constructors. The new thing is now when we make a component, we have to hook into the lifecycle of the component in Angular in React. We always want to do some some of our custom logic when the component is being connected to our app or connected to our DOM. So all of these lifecycle methods and callbacks or hooks you can say are available with custom elements which you can create inside your JavaScript class ES6 class and they will initialize or they will be called whenever that particular lifecycle event has happened during the course of your custom element. The first one is connected callback. So whenever your component gets connected into the DOM or it gets rendered into the DOM connected callback is called whenever it is removed from our document or DOM it is disconnected callback. And now we all know that any component has two main parts. One are inputs. So you need to pass some inputs which define the behavior of that component. So there will be those in HTML terms are called attributes. Whenever you create an HTML element you pass some attributes. So similarly in web components there is nothing different. You pass an attribute and then also the component has to emit some events to the top. So using these attributes only or using some callbacks into your DOM you can also emit some changes. We will see later. But now when your attribute changes in real time what if the value of your attribute changes in real time? So angular react always automatically adds watchers or they have their own internal stuff which keeps on listening these changes and then reflect into their cycle to digest it or to re-render your component. Similarly the re-rendering part of web components you have to take care of yourself but you can hook up to this attribute changed callback so that you know when the value of an attribute is changing and you can do it yourself. Let's dive into the code. Are you all excited? We will be creating our first web component right here right now. So I have this GitHub link which I will share with you later on. Right now you don't need to note but it has all the step by step procedures which I will be going through. I don't have much time so I'll probably be a little fast but I have nothing complex to show you just HTML CSS and JavaScript nothing else. So let's start with the first thing. I'll create a new file called super button dot HTML. So you can create a web component either in an HTML file or in the JavaScript file. I am creating right now in HTML file because earlier web components used HTML import but recently like in last one month a lot of web components are being used as imports or native modules in ES6. We'll talk about this later but I'll add a script tag here and I have this small piece of a simple ES6 class which I want to show like this class has nothing. Is everyone able to see this? It's nothing but simple class with a constructor which I want that once I initiate it once I run it in a server it should console out lock the output. I have to also write the consumer. So this is my web component. I have to consume it in a normal file. I will start up a new index dot HTML file and what I'll do is I copy this normal and you see that here. I have just use this super button as a new HTML tag. So the browser should understand that this is a web component and associate that class with it. So now if I go back to my browser open it right now you will be able to see nothing and zoom a bit but you will be able to see that console lock because that constructor was initialized as the browser. C parsed my custom element tag it knew that it has to associate that ES6 class with my custom element with my web component right. So going ahead what I'll do is I'll also now add some callbacks the connected callbacks so that I want to change the text content of my inside my button. I will not do any modifications to my DOM elements right now but only add the text content of my this new HTML tag in my connected callback and also have to attribute so that I can set label text as an attribute. So I have a getter and a set a normal. So now the next thing is I will write some code inside my consumer to have that label text. So I have nothing but this label text property passing some text which I need to which will be done when my web component will be connected the text content of inside this this element will be written with this text which I am passing. So nothing but right now nothing fancy there are two elements and my these elements the inner text of this component is added by with the label text which I have passed everything good till now. Let's move ahead now I will show some other life cycle methods as well so you can check the disconnected callback by removing manually your web component from the DOM and this disconnected callback will be running. I will not test it right now but now I want that my web component will not be simple text it will be very a complex HTML element which I want to abstract from the outside world or wherever I am consuming it right. So now I will include some this custom element into this button we are creating so I will create a div element for my button. So I will copy this and put it in my super button class. So nothing but just whenever this element is being connected this will represent the DOM object instantiated DOM object of my web component or my custom element. So it will have all the DOM API is like this dot query selector this dot inner HTML and everything I am just doing this dot inner HTML and changing some text. So now it will look more like a button I have just added some appearance added some styling to my component. Now what I will do is so what I want to do is I want to set the color background color of this particular element based on some attribute which I want to pass. So what I have done is written a normal getter setter for a color and then I have written this small function this function is nothing but it adds some classes class related to that color. So the color values I have given using some classes to my element and inside this function I want that whatever new value or old value is being passed by someone it should update that right now the default color will always be gray. So I need to call this method after the connected callback so that it picks up that color from this dot color attribute right this dot color is my attribute. Now I will go back to my this and for one of the methods or one of the buttons I will say color is equal to red. And now you see the by default if I have not given any property to the second element it is taking the default color and the first property the first element is taking the red color. How they are taking they are having an internal DOM element like div class and they are just adding this red color or they are adding the gray color the gray CSS class. Everything okay till now very simple very basic web components are not something to dread upon but they are very useful to be used in all places. Now let's go ahead and move to the next thing now we want to change that dynamically when someone will change the attribute or programmatically during the life cycle of your web component it should reflect in that particular part itself. So what I have written is this small attribute callback changed callback which will have like switch name so the name of the property and then the old value and the new value. So based on the name of the property I will do different things if the label text is changing I will change the text content of my button and if the color is changing I will call this refactored method which will update my color right. One more thing to note is that only this attribute change callback will not work because you can associate a lot of attributes on your HTML elements and you want a lot of attributes are only for initialization time you don't really want to add a watcher to that. So this custom elements API provides us a property we can create a static property on our elements which is called static get observed attributes. So this static get observed attributes will tell us like which attributes you want to watch for the changes if you don't include any property inside this particular array the attribute change callback for that attribute will never be called. So the next thing is I want to add some dummy logic inside my consumer so that I will be creating some dummy stuff to change my color attribute and label text attribute at runtime. So I will just give me a second these are some dummy variables and some dummy input elements so that I can change I will just show you. So now I have an input element and I want that based on this input element what I have done is I have just got the value of this input element got my button DOM element and I am setting the value of that input element as a new attribute to my existing web component which is already connected to my DOM. So if I write something here and click on update my internal text content will automatically update if you really want to see what is happening. So if I add a breakpoint to this attribute change callback so whenever I am calling this method actually it is calling me with an attribute change callback with the appropriate property name the old value of it and the new value of it. It is like your simple watcher in Angular or simple update event in React right fairly simple till now but useful the use will show when you see it working similarly in React as well as Angular. Let us go ahead just adding that color change also I am just creating some dummy method to update the color attribute as well. So again I have added a select box I will just skip this I have added a small select box so that when I click this it will update the color of my second button green is not there in the list so it is not updating to green. Okay yeah let us move on to the next part so the third part would be now coming back to the slides for a moment. So now we have seen this is all about custom elements this is what you can use to create your own custom elements in HTML and use them. So now coming to Shadow DOM so now how many of you have used hash important if you have to just quickly resolve some conflicts I guess even if you don't raise your hands every one of you have used it in your life. I will be shy to tell me right now because maybe the best practices in your organization don't allow that to be done but so there are a lot of conflicts between your CSS and stuff like that. So Shadow DOM allows you to create a different DOM all together what if the benefits of Shadow DOM are isolated DOM scoped CSS you can have a composition simplifies your CSS and adds a lot of productivity which will not waste a lot of time figuring out why my styling is not showing because some other specificity of a class or an element is overriding my element right. So coming to next is how you create actually shadow DOM so shadow DOM is always attached to an existing element existing element can be any div element it need not to be a web component or a custom element. So these are disjoint specs custom elements is an separate spec shadow DOM is a separate spec when they come together they have the power of web component but you can attach your shadow DOM to an element or a custom element and there are some styling. There are new pseudo selectors for your shadow DOM like you can see which so we'll talk about this so now what is shadow DOM so you are consuming your web component somewhere. So the place where you are injecting your web component will be inside some HTML tag that will or the web component tag or your custom element itself will become the shadow host because that is in your main document. So this left side is your main document shadow is host is the host to which you will attach your shadow DOM okay and then what you are attaching to your shadow DOM will become the shadow root because it will be its own DOM tree right. Then there will be this normal DOM which will run in the normal consumer app and then there will be this shadow DOM shadow tree. So the normal DOM is sometimes called light DOM and the shadow DOM is the normal the shadow DOM itself light DOM is just to specify the difference between it will be more clear when we see the example for it. Then there is an HTML template element this is nothing more but just if you want don't want to inject your DOM elements in a custom elements using this dot inner HTML and you want it more to look like an HTML tag. There is a new HTML tag in which you can create something which will not get rendered. It's simply like this template element which you can use in even without shadow DOM and something like that we'll come we'll come to the coding and then you'll see how it's being used then there's something called slots. So now what if I want to deliberately place my normal DOM structure inside my consumer and put it somewhere inside my web component. So when I want to selectively put something from my normal DOM into my shadow DOM slots are used we'll see the example. Then the HTML import which we have done to import our in if you see in this code in my index dot HTML how my shadow DOM or how my web component is imported by a simple HTML import super button dot HTML. These days which we should not use this but it's okay going ahead with how to show shadow DOM I'll just create a certain conflict in my CSS in my this part. So now if I go and see now the color font size of my web component DOM has increased but it's really not in my web components is it's outside I have given to a normal button class. This button class is not should not affect the inside DOM elements of my so what I can create is I can create a shadow DOM. So shadow DOM is also very easy method that on any element just a second so all on any DOM element you can call this method called attached shadow. So this represents this custom element which we have done then the attached shadow then there are two modes open or closed. You don't have much difference but the internals you can read later then I'll attach this inner HTML to my shadow root and remove from this connected callback. So I've done nothing but inside my constructor did this dot attached shadow and updating that inner HTML which I had given to my this DOM object to my shadow root. And we'll see that it has now worked normally but now what has happened is that earlier I had used dot this dot query selector to find my button class but now my button has gone from my normal light DOM to my shadow DOM. So you what you have to do is you have to find this everywhere and replace it with this dot shadow root dot query selector. So the shadow root you have attached will be available to you at the shadow root part and now it will be available here your shadow root part. So this is all about how shadow DOM is selected. You can see more things about how shadow DOM changes the values and it's not affected. There are certain code which you can hop into the selectors which have talked about that there are some shadow root selectors which you can use to style your shadow DOM as well. And the next thing is you can also have some CSS variables being passed from the consumer. If you want to give a customized styling branding from outside your consumer to your shadow DOM like this border color dash dash whatever variable is starting from dash dash will be given the value. And you can consume it inside your web component or shadow DOM like using var and then the name of that particular variable. So we have around 2-3 minutes more of the demo. Now I want to move rather than showing the slot thing right now I want to move towards how we will consume this web components into react and angular. That is the more important part we will create web components we know JavaScript we know CSS. But now how can you use the same web component inside react and inside angular that has been a dream for every front end developer right now. Right we have always tried something like running angular with react react inside angular but nothing has worked. Let me let me show you an example. So I have some 2 identical apps. So this you can see this angular icon. This is an angular app. Okay. I can't zoom much here. So this is a new angular app. I have added a normal angular watcher stuff like that and this is working. Let me just open. So this is my angular app. What I have here is my app component. So I have a normal app component with some variables like the colors of the buttons or some normal and I have a method that toggle flying of them. So I want that I use my super button and then from my super button emit an event which will call my angular method and angular will change this variable and my Superman should start flying. So I have nothing but these 2 buttons which I have consumed and what I have included here is like a normal attribute. I will change the attribute color. I have showed that how you can input an attribute from the angular world inside your web component and then how you can emit an event from inside the web component to outside your angular part. So what will happen here is inside my web component part. How do we really emit this event? My web component will not just the minute. So it is not in my web component but it's inside my angular app itself. So angular has one important thing when you want to use custom elements with your angular app. You have to use this custom element schema and import it as schemas into your main angular app. The second thing is how I am attaching my this on button click angular is one benefit that you don't have to do anything else. Apart from including this custom element schema to use web component I will be able to use this directly. This is normal angular working and then when I click on start Superman my web component is emitting an event to my angular. Sorry my web component is emitting an event to my angular app and it is starting running this. So also similarly react is working. So the react code also has the similar thing. It has a bit of caveat which I will just tell in a couple of more minutes. So the react thing what you have to remember importantly is that this if you want to add an event listener. You have to add this event listener imperatively not declaratively in angular we added the event listener from our web component to our angular component declaratively. But in react you have to manually add this event listener so that your web component will dispatch an event and you can receive that event here. So I'll show you so this is same this is like normal react and exactly same like in angular exactly same in react and I am using the same underlying web component. Due to short of time I can't explain more of these codes but surely after this session I will be able to show just quickly running through the two more slides. This is the browser compatibility chart which shows a lot of green which will boost your confidence using this in production. And now there is a website called custom elements everywhere which has been introduced by Rob Dodson in the polymer summit happened last month. And it has a very good suit of tests for every framework in their world that how web components can be used in them. And they have some examples also so you should surely go visit this website. And then I showed this demos and these are a lot of big companies which are using web components in production today. And you might have seen if you inspect element youtube.com the youtube.com web app is completely used in web components and polymer today. Thanks guys thanks for Q&A we are just in time for a minute of Q&A one or two questions. I think you may have time for one question. Okay so who is the lucky ah I think I see the lucky person now let's get you a microphone please stand up. We just saw the. Yeah sorry I'll just quickly show one second. So that code I had a hosted file in the CDN to work this. I didn't show that let me just quickly see that CSS code. So this is a file which I already uploaded to the CDN. Yeah so in order to update your event you have to use this normal DOM element method called dispatch event. So you can normally dispatch an event from your inside your web component and your angular or react will handle that event. Sorry for that I didn't show this code. It is not shadow DOM so the things inside your angular component or your react component is in the actual DOM. All the scoped CSS and all can't happen. We can set it to native it will have to shadow DOM. Seems like this is becoming more of a conversation than a question. So perhaps you can take it offline. The round tables in the banquet area would be a great place to gather to hear and talk about this again. Thanks everyone thanks a lot. Thanks for hot. And you will be available for questions later.