 which is basically first blockchain platform in Singapore to issue the education certificate on blockchain. Hi, I'm Martin and I'm also working as a software consultant at ZNES and I've been in software development for nine years and also building Android Redstabs using Web Components for So today, as end guys, we will go through the basics of Web Components and then we'll talk about the elements of Web Components and we will build a 2-2 demo using Web Components, can we say? And after that, we will build a check application using Lake Element, which is one of the Web Components framework and then we will talk about how we can integrate Web Components with the existing project, which you just saw at Party Library like ZEA, Tangular or Vue.js. Excited? Yeah, it seems so. Okay. So Web Components is the set of standards to like modular, reusable and encapsulated HTML elements. Basically, in today's world, if you are working on the front-end side, so before proceeding, I just want to ask one thing. How many of you have worked on Web Components? Like raise your hand. Ever heard of Web Components? Okay. How many of you are working on the front-end framework? Like any framework heard of Components? Okay. So basically in today's world, everything is on the components. Everything is component, which can be reused, encapsulated and can be modularized for your application. So every framework, React.js, Angular by Google or anything, they have all introduced components, but the only problem is technology is evolving really fast. So if any of you have worked on Angular 1 and when it switched to Angular 2, it was the drastic change. The whole application was broken and they were written from scratch again. So you cannot depend on the third party library framework always. For that, Web Components has been there for quite a long time. But since quite a few years, the support on the browser for Web Components has been drastically moved. And now most of the latest browser supports the Web Components. So while they are useful, they are framework agnostic. They don't depend on any framework. And they are written in vanilla JavaScript. You don't need any kind of secondary language for that. So why Web Components? It's basically HTML is not semantic enough to understand. There is no standard templating system. There is no native encapsulation in browser. Basically, you cannot encapsulate your styles or your markup so that it don't get overrides by the global or parent CSS. There is no way to reuse the existing HTML and everything is component, as we talk. So what are the goals of Web Components? It's basically to reuse our existing code to encapsulate the styling and markups. It provides the separation of concerns. It provides the better composition. And for theming purpose, it's really best when you want to provide the theme to your application. And it's pretty much expressive because you define your elements by yourself. And it's semantic. This is the browser support. Basically, if you see most of the latest browser supports Web Components, except for the Internet Explorer, which is developing the support for especially custom elements and Saddodom. And apart from that, Chrome, Opera, and Safari pretty much support Web Components. So these are the four parts of standard Web Components, basically templates, imports, Saddodom, and custom elements. Templates are nothing but reusable HTML, which you can define and use in your application. Imports are basically introduced in ES6, if you know. They are basically to import the HTML file in your application. It gives the flexibility so that you can write your Web Components and dot HTML file and import in another HTML. Saddodom, it's basically to encapsulate your markups or CSS. And custom elements, which basically gives you the flexibility to define your own elements. So let's talk about every standard of Web Components. So custom elements, it basically gives you the flexibility to author your own component. You can name your own component, my cool component, or whatever you want. And you can define your component and tell the parcel how you want to parse it in your application. What are the events you want to handle on that event? What are the markups you want to handle on that particular element? So how elements of that particular class will react to some changes? You can parse the props, you can parse the attributes. You can define properties on that particular element. And custom elements always define in a prefix hyphen name. So you will always have a hyphen between the custom elements so that it doesn't get messed up with the native HTML elements. Next one is Saddodom, which is basically to encapsulate your styling and markups. So whenever you define a Saddodom, it's basically attach a dome subtree to your dome root. And that dome subtree is encapsulated and doesn't get overridden by your global scope CSS or markups. It's really great for modularity so that you can just use that modular components anywhere in your application. ES module is nothing but it's for the use and inclusion of the JS documents. In part, it's also you can use it for HTML and CSS to import in your application. HTML templates, it's basically defined using template tags. And it's good because this HTML template code doesn't run by itself until you activate this code. So any kind of image, any kind of script written inside that HTML tag won't get loaded until you will activate this particular code. These are the life cycle provided with the custom elements. It's basically a constructor by default with any class you can define. Connected callback is every time your components get created and it gets attached to the dome tree. Similarly, disconnected to clear your memory and clear your detach your events. Attribute change callback is similarly whenever you pass a property or attribute to a component, this particular life cycle method will get called. And adopted callback is nothing when you reuse your custom elements from one dome element to another dome element. So here is the short definition when you can use the constructor. It's basically whenever your element gets created, your constructor gets executed. And it's good for setting up the initial state event listeners, binding the event listeners, and creating the shadow dome. Connected callback is when your custom elements inserted into the dome. And it's basically good for fetching data, making ejects call, and setting the default attributes in your application. In this connected callback, similarly, to detach your event listener or cancel time intervals free up memory of your application. Attribute change callback is called like any time of element observed attribute changes. So there is one static method which is provided in the custom elements. Observed attribute where you can define your variables or observables which is going to change in the future. And these attributes can fire this attribute change callback lifecycle method every time. So it has three parameters, name, old value, and new value. Name is basically the name of your attribute which you have defined. Old value is the previous value. And new value is the change value of that particular element. Adopted callback, as I told you, whenever you change your dome or move your dome to a new document, it gets called. It's basically useful when you're using iframe in your application. And there's one more method which is available which is custom elements.define which is used to register your elements into the JavaScript. And it uses custom elements registry, and it defined using window.customElements.define. You will give the name out to your element and provide the class you have created for that particular element. So this is the application we are going to build now. So before that, I'm going to start with one basic example which is hello world. And for that, I think everyone is connected with the Wi-Fi. So one thing everyone can do, can download HTTP server. Everyone has NPM with them installed on their computer. Just install this HTTP server which will help us to basically run our server. And we will use this to run our website. You have placed the site? Sorry guys, thanks for waiting. Okay, so for the new people who have just arrived, we have just gone through the basics of web components definition and what are the parts we are going to use to create our web component. So we are going to start with the demo of hello world, which is the basic demo. And we will modify that demo to create a to-do app later on. So I hope everyone has installed the HTTP server which I'm going to use to run my server. I think everyone has installed the HTTP server, right? Yes. Let's just start with edging1index.html file. And we will add the body tag in it. And if you want, you can add the tag with it also. With that, we are going to include our JavaScript file which we are going to create. So I'm going to give a script tag a source that I'm going to create one file helloworld.js which will be included here. And this helloworld file will define a web component which is helloworld which later on I'm going to use it. Okay? This is the very basic HTML file in which I have a body tag and I'm loading one script and I'm defining one web component. Let's open a new tab and write a JavaScript file. So we are going to use the self-invoking function. Basically, we don't want to expose our context to outside. So I'm going to use the self-invoking function inside which I'm going to define a function, basically. This is the self-invoking function in our helloworld.js and in this, I'm going to define a class helloworld. So every web component, every custom element we define, it extends one class which is HTML elements. I'm going to inherit that class. Okay, so let me just save these files so that it will look good. I will give it an index.html and I will save this file as helloworld.js. Okay? So first of all, we have defined a class and we have extended the HTML element. HTML elements give us the flexibility to attach all the native HTML elements properties to our custom defined elements. So now we are going to use the custom elements.define property to define our element. So we will write and we will give it a name helloworld and we will type the class here. So this line tells JavaScript, okay, this is the helloworld tag which has been defined by the user and it can be used as a helloworld in my index.html where I have loaded this. Everyone okay? Now I'm going to define the constructor and I'm going to call the super. Super is basically to inherit the props from your parent class which is in our case HTML element. So before that, I'm going to need my template also. So I'm going to define a constant template and I'm going to create my template here. Now I'll say I'll just put the inner HTML to some hello and currently I'm just going to put it as a void. Now I'm going to attach this shadow with the mode open. I will explain this mode later like why I have used this mode and I will tell it like... Would it be possible to increase the font size a little bit? Better? I'm going to append this as a child, my template. Okay, so what I'm doing here, in this current context, I'm attaching the shadow DOM and in the shadow root I'm appending my template contained and cloning its content to its shadow root. So now let's try to execute this code. You can just run your server using npxhttp-server and just copy pasted. Let me just open the another window. It's your HTML. Inner HTML? Another file. Inner HTML. Yeah. Sorry. Okay. So we have our hello void here. Let's try to modify this hello void code and I'm going to put a dynamic content here with the hello summit or something. And we will pass this name as a property to our web component. So as we said before, what all the selectors or all the template is starting will be here in connected callback. So we are going to define another cycle method, connected callback. And I'm going to say this dot element is equal to this dot shadow root dot query selector. And I'm going to select the strong here. And I'm going to use the attribute change callback lifecycle method also, which is going to update our inner HTML of the strong. It's basically takes three parameters, your name, your old value and the new value. So I'm just going to do this dot underscore element dot text content is going to new value. So when we define a variable properties or attribute on a custom elements, we learned before that we have to define a static method, which is observed attribute inside which we are going to define the attribute. So we are going to define this method here is static get observed attribute, which basically returns the area of all the observed value. We are going to give this attribute a name and even you can check it here if you can just call it here. And we are going to pass this name as a property here. Everyone is following here. This basically defines in your custom elements what are the variables are observable in your custom elements. So which are the observable variables you are going to define in this array. So any other property if you want to pass like anything name, surname or year date of words, you can define it here. And whenever you will use this attribute and you define different kind of name here. Suppose I'm going to say so this observed value will call this attribute change callback method. One right left. Which one? Let me just check. I think I need to define it here. So there was one problem. We need to define the element inside the constructor where we are using our query selector. And inside the attribute change callback, we are defining the text content using the new value. If you have done it, you will see like for different instance of our hello world component, you will have the different value with it. And if you will see the source code for this, you can see the shadow root in your inspect element. And you can see an open written after the shadow root. This open basically gives you the flexibility to access the reference of your custom shadow root outside the dome. So after this shadow dome, if you want to reference your hello world element support document dot query selector hello world and you want to perform any operation. With the open method, you can do that as soon as you will make it close. You won't be able to access the reference to the hello world of shadow root outside this particular complex. So this is the dynamic method. Next method we are going to try using slots. So everyone is following. So next method we are going to try using slots. Slots are nothing but place holder in your template which gives you the flexibility to dynamically change the content of your template. So instead of using the strong, I am going to use the slot. And I will give, slot has this name property with which you can reference the slot in your application. So basically I am going to say, okay, my demo is the name of the slot. And I am going to comment this. I don't need. So whenever you use slot, you don't need to pass this property. Instead, you define your native HTML elements and it like dip and you give it a slot property and inside this you will reference your slot name. Which is basically my demo. And you will pass it over to it. And I am going to write something. Similarly, I am going to use it here. Another dip. I am going to write JS coms. Let's try. In JS instead of a strong selector, I have used the slot. And I have given it a name my demo. Then I don't need to use the query selector or anything in my template. So this slot will give you the flexibility to add the dynamic elements in your custom elements. Suppose you have defined some URL attribute and you want to have the dynamic li attribute inside it. You can define that using slots in your application. Sorry, it's just closing. There is nothing else. All the code is commented. You just directly put the slot that side. Which one? I am referencing the same slot but the content is changing between both elements. This is the same element but the inside content is different. There is JS coms text. Yeah, that's same. So slot is a place holder in your components elements basically. Which is dynamic. It's basically the children of your elements. Which is purely dynamic and variable. So this section which is here. I have defined this slot. I have given it a name to reference it into my HTML. To reference it into my any other HTML or components where I want to use this slot in my template. Second part. Here. JS coms is not shown in all my posts. I have only the first one. You have defined this slot. Okay, variable HTML. You have defined there, you have defined slots. Hello world closing, there is closing. Now, where is your JS? JS. Here is your JS, you have defined slot. My demo. JS coms. JS folder. Okay, you have defined the slot. The way is in front of you. It's your whole course. My whole course. This is my can find it. I have a, I have a, I have a, I have a, I have a, I have a, I have a, I have a, I have a. This is also working. I hear you are running this code. Actually, there is just this error which you are using. You have to define this lot here on your element. You have to define it into your HTML element. Why is the second one working? The code is the same. Okay. The second one is going to work. One more. You just need to define this lot here. So, you have to define this lot here. You need to define this lot on your element. Now it should work. Yeah, I know this. Okay. Slot my demo. This is wrong. No, no, no. You cannot do that. Okay. Good morning. Yeah. That's why it's not working. The slot should be on your native HTML element where you are going to define which part you want to make the variable and difference it in your template, basically. So, this part is going to be variable for a placeholder for my custom element. So, I'm going to define this lot here and give it the text. So, if anyone's code is not working, please make sure that you have defined this lot on the native HTML element. Everyone is okay? Okay. So, for the to-do demo, can you please clone this code on your local system? We are going to use this repository, which is basically for our to-do demo and the next application, check application. We are going to use it. It has two folders. One is completed code, which you can use it for reference. And one is our demo, which we are going to work on. I'm going to paste it as I point out. So, everyone has cloned this apple. What happened? Refresh. Refresh. Refresh. Refresh. Refresh. Yep. It shouldn't be right. This is going to be a new demo. This is going to be a new demo. This is going to be a new demo. I think I need to check it. This should be... Flicking should be so don't be there. If you not check from the... It's still flash. You will see. It's like... Normally, it doesn't do that. That's the flexibility of web components. It just only changes the text itself so that it won't give you the flicker. Everyone has cloned this, Rappo. Wi-Fi password is here. Is that it? No, it's in the... Wi-Fi password is written here. Password is JSCon. Wifi is Lajalep. JSCon. Anyone need it, please copy and paste it here. In your code base, there would be two folders. One is the check demo and one is the todoMBC. We are going to cover todoMBC right now. Later on, we will check the check demo which is basically using the late element. For your reference, there is a completed code is also written in the demo complete which you can check out later on if you need the reference. So for todoMBC, we have defined three components for our application. One is the parent component which is todoDemo and then todoList and todoItem. TodoList is the wrapper component which is going to render all the todoItems inside it. So let's start with the todoDemo which is our first component which we are going to write. Similarly, like Hello World, we have defined the template here, created a template and put one innerHKML here. In the innerHKML, I have defined three sections basically. Header, section and photo. Header is nothing but your input box where we are going to type the todoDemo. Section is the list which will show you the todoList and photo is showing you the count of the todo which are active right now. So this is our template which is going to render in our application. We have defined this todoDemo class and we are going to define this element first. So let's use window.customElements.define and I will give it a name todoDemo and I will pass the class here. Now let's go to our constructor. It says we need to bind these two methods first. So we are going to bind the method.newTodoKup and we are going to bind another method also. Now in our connected callback we are going to append the host. So before that we also need to define the... We have also defined the disconnected callback which is basically just to remove the event listeners or unnecessary cleanup on our code. So we are just going to use this.innerHKML and we are going to assign it append the root.appenter We are just going to append the content of the template here. Next we are going to bind some event listeners which we are going to use. I am going to reference them from the complete demo item. So we are going to use keyup and todoListChange event listeners. So keyup is basically nothing when we press the enter to our input box we are going to add that todo into our demo and todoListChange is nothing but to refresh the count in our application. We are going to remove this listener in our disconnected callback. So I have just copy pasted this listener cleanup from the completed file. So I have added to listeners keyup and todoListChange and removed these listeners in our disconnected callback to clean up it. Apart from that I am going to need few query selector to put the operations to put the event on my todo list. So these are the query selector which I am going to use. So our todoList query selector is nothing but the placeholder which is going to show the list of all the todo's in our application. And new todo class I have selected to get the event to our input box in our todo demo. Then another main class which is basically nothing but the section class the list of todo's we are going to perform some operations there like delete, remove or edit. And the last word not least todoCount which is basically we are going to show the count of our todo's in our application. So let's try to run this code for now and see the UI like how it looks. So if we will run this code this is how our UI will look. We have put the CSS and everything already there in our HTML file. And if currently I will do anything it will do nothing for me. So what we have done till now, till now we have defined the todo demo custom elements. And inside that element we have defined our templates for todo demo which is basically the input box and the list we are going to show and the photo section. Inside that template we have also introduced one another custom element to todo list where we are going to render all our todo's. Inside our connected callback we have used all the query selector to perform the different operations and we have attached all the events key up and todo change. And then we did the cleanup in our disconnected callback and these methods I am going to explain it later on. Let's go to our todo list file. So inside todo list if you will see we have created a template element and give it a slot. So slot is nothing but the variable content inside your template. So here in this section we are going to define some content we are going to add some content which will be your particular todo's content or text which we are going to show there. So as we saw in our hello world example we are going to append templates to our todo's root. So before that we are going to attach this todo with the mode open and we are going to clone our template. Everyone following? Sorry. Before that we also need to define our components actually. In our connected callback we are going to add one listener to listen for the slot change. Every time the content of the slot will change and in our disconnected callback will similarly remove the listener. So every time our slot content will change what we will do we will remove all the nodes which are unknown to the todo list elements. So for that we are going to use the node type element which is nothing but we are going to look through all the child nodes and we are going to check for the node type. If node type is one which basically tells it's a native HTML element and we are going to check its tag name. If it's not a todo item we are going to remove it from our list and then we are going to dispatch the event basically. So I am going to dispatch this custom event todo list change and with that I am going to deliver the todo item element counts which are basically all the counts which I have assigned to my slot here. So this can be accessible through assigned nodes to that particular slot and this slot is nothing but the query selector of this slot which we have in slides in our constructor. Let's see what it will change. It's an object. Yeah I have created it an object. Okay. Change todo list change todo list change. Let me just check it from here. Just not dispatch event. It's dispatching the same going to be here. Okay. So this todo list is going to give us the functionality to listen for that todo change event and update the number of todoes we have added. So now we need to add the list of todoes which we are going to show down here. For that we are going to work on todo item. So by default whenever you define a template and set a root its host element has the styling markup of inline. So by default it doesn't take the height and width. So it's better for you to define some height and width on your host. So you can either change the styling of your host or put some and if you don't need the height and width on your host you can just use the existing styling. So here I'm going to give it some styling from my todo item. So for my host I have made a display to block and I did some border and font size here. We will add all the styling letters on the CSS part. Again we are going to similarly define the elements first and similarly we are going to attach the todo and clone the template into the todo root. Apart from that I have added few methods which are basically checkbox or a different operation on our todo which we are going to see later. And similarly I have selected few elements from my todo list templates. So this is my template for the todo. You will see there is an input box level to assign the level for my todo to destroy a button which is basically to remove the todo and there would be an edit button to perform the addition on my todo. Inside connected callback I have just added all the listeners on different for a particular todo what I am going to do. I am going to edit the todo, change their text, remove the todo and update the todo. So I have added different kinds of operations, click events and double click and blur of events. And in the disconnected callback I just remove all the listeners attached. And in attribute change callback I am going to just check for a switch case which will check for if it is a label or completed and I am going to assign the value to it. So it is nothing but this code. So what I am going to do if my attribute name is label I am just going to make a text contain to the new value and my attribute is completed. I am going to mark a checkbox as a check with the disk.completed property. One thing you can also notice we are going to define these two properties as our observable also. So I am going to define these here, label and completed basically. Let's try to run it, set and get a setter and get a for the values and the setter get a also. Once we define, I have put some code in here getter and setter code inside it which is basically used to set or get your observable properties in your custom elements. So I have used two methods, set completed and set label and similarly get completed and get level which is basically to set our observable attribute and these are the different methods which we are going to use to make our todo list to perform different operations. Basically we are going to blur the text as soon as you click on the checkbox and you can double click on the todo list to edit it and there should be a remove button. So we are missing some CSS here. I am going to copy paste it from the original elements. So this is our todo list demo using vanilla JavaScript. Next we are going to look into lake element which Martin is going to explain but before that we are going to take a break for 10 minutes. For the second part of our workshop, we just witnessed how we can able to build web components using just vanilla JS without using any library or using any framework but for the second part of the workshop we will be using lit element. So there are already libraries and frameworks that help us to build web components. So libraries such as hybrid, polymers, Kate JS, lit element, SlimJS these are the libraries that we can use for us to be able to build web components a bit faster and easier. So for the frameworks we also have this custom elements everywhere.com where it lists all the... it shows us how compatible the framework is when it comes to the web components so we can try to take a quick look. So for this one we can see that Angular has a good rating, AngularJS, HyperHTML, LitElement, Polymer. ThinkRack is somehow a bit low when it comes to web component support but hopefully in the future they will cover most of the features and yes, sir class is Belty and Vue. So yeah, also apart from that I guess frameworks like Angular and Vue also had their own tools for instance for Angular they have this Angular element for Vue they have this Vue web component wrapper, I'm not mistaken and also Stancil also is a framework that helps us to build web components. So yeah, we're going to use Lit but what is LitElement? So LitElement is basically just a base class for creating fast, lightweight web components that work in any web page without any framework. It uses LitHTML properties are observed by default, elements update as synchronously when their property change. So we can think of somehow LitElement like an enhancement or an improved version of the HTML element. So LitHTML is the templating library that we're going to use later on. So basically LitHTML allows us to define or write our HTML templates using just plain JavaScript with the use of template literals. So if you notice on my right side you will see this is how pre-app VDOM re-renders or reruns every time they have an update while on the left side this is how LitHTML does its re-rendering. So if we take a look at the H1 element what happens is the whole node is actually being re-rendered while in LitHTML only the dynamic text which those numbers represent are the only ones that's changing. So thank you for code burst for the image. So basically somehow LitHTML is a bit or slightly faster compared to VDOM. It's like 30% to 40% faster depending on your browser. And then I think the only slight problem that we have for LitHTML is actually during its first render it's somehow a bit slow. But yeah I think in the future they will improve that because actually LitHTML is not using any VDOM overhead or it's not using any diffing algorithm. It's purely using web standards. So it's leveraging the web standards like it uses the built-in parser, HTML parser of the browser. It uses week map, tag template, literal. So for this slide I want you to somehow focus a bit on the template bindings because this is what we're going to use mostly later on when we're building our chat component. So to do attribute binding we just simply do let's say class attribute then the data CSS class nothing that's special but when it comes to Boolean attribute we need to use question mark for property binding we need to use the period and for event binding we need to use the at sign. So as I mentioned earlier LitElement is like an extension of HTML element so all the life cycle that was mentioned by Sumit earlier can still be used when building LitElement but apart from that LitElement added some couple of life cycle but I won't be able to discuss each one by one because we won't be able to tackle everything for this workshop as we don't have that much of a time but just to give you a quick overview the LitElement update cycle starts when we set a property so then afterwards LitElement will request an update if there is a change in the property so by default it tracks whether the old value is equal or not equal to the new value so after that it will do the performed date then should update this should update is somehow similar to I guess the React life cycle component should update where in by default this one returns true but if you want to somehow prevent the component from re-rendering you can return false on this part for the update no need to override, no need to implement it's just LitElement has this life cycle in between should update and render where in this update the reflection of properties to attribute is happening and then we have this render this one we will use this one most of the time this is where we define our HTML templates and the first updated is like this one is once the template has been created it will be called but this one only happened once so any one time work that you need can be implemented here and then the updated this happens once the the updated or the element has been rendered and finally the update complete actually this update complete is not a method it's more on a property that resolves into a promise but this one we also won't be covering for this workshop so in LitElement we have we declare properties somehow like this we need to type in static get properties then return just an object with the property name and then the property options so for the property options mostly we will be using the type reflect and no access so for the type these are the types the default types that we have for LitElement is string, object, array, Boolean, and number so for the attribute this is also going to tackle that but if you see by default if we do reflect if we mention that reflect is true then if we change the property to value to something it will get reflected to an attribute also called as property to so if we specify an attribute it's like just whenever prep one has changed the value will be set to the or will be reflected to the my-attribute, ATTR so I guess that's it these are the property options that are available for LitElement so what we're going to do for today is we're going to build just a simple chat component so it has four components so the first one is the chat demo this is the main component or the entry point component so in this one we will just need to identify whether we should show chat lobby where you can see once we're... so at first we will display the chat lobby then afterwards once we enter the username we now see the chat room with the chat messages so I think we can now start so I hope that a while ago that you have already downloaded the repost that was mentioned by Sumit so if you can go to the inside demo chat folder you'll find the client folder so for this one we have five folders one is for Angular, one is for React one is for View, Server, and Client so for the integration it will be covered by Sumit afterwards so basically in these folders these Angular React and View folder we will see how we can integrate the chat component that we built into these frameworks so for now the client component that we're going to build is located in the Client folder I also have Server folder it's just a plain web socket server if you want to try or run but this server is actually not necessary you can skip it for now but we will be able... we will see just a single error when we're building it's like a WS or web socket connectivity error but it's okay because it will not crash our application so running server is like an optional thing so before we begin first as we look into the package.json so what I have here is just... I'm using of course the lit element I'm also using the OWC dev server but you can also use Polymer CLI if you want to run a server or any server but for this workshop I prefer to use OWC dev server and we just have a roll up for bundling maybe afterwards we will use this bundling just to somehow integrate the chat component into React or View and yeah I only have start and build script so first what we need to do is we need to npm install so now let's create a source folder it's rcd and in here we will first create the chat message by the way for this one we will just use plain javascript but you can also use typescript if you want but yeah for this workshop it's just purely javascript so first thing to do is to import the lit element and the html and dcss helpers so yeah now let's start creating our class so let's name this one as chat message which extends instead of html we use lit element so somehow this looks familiar because somehow this is similar to what we did earlier when we're building a web component using vanilla js also we need to define let's call it chat-message and the chat-message so for lit element the three basic requirements that we need is first is we need to define our template second is also we need to provide our styles and yeah we need to render it so let's start first by creating a render function so we need to write this is where we will write our html template so just to check that this is somehow working we can just write chat-message and then go into the index html then for this one we'll use esx module so type should be module then source let's point it to the chat-message now we use the chat-message so to run this one we should be able to run it just npm start and yeah should be good to go yeah we were able to create our first component but of course this is not final yet but we can somehow see that we already have our chat-message working so what to do next the next thing to do is we should define our own styles just simply so for this one we need to use dcss helper it's similar on what we did for the render and then we put in our style we can add background and let's just say that this one display black yeah so we were able to apply our style so as actually we can add our styles here as well we can add this style or external style sheet we can add it here however as per lit element it is highly recommended to use the static get styles instead because somehow what lit element does is it tries to use the constructable styles sheets object so if the browser supports the constructable styles sheets object somehow what the constructable stylesheet object does is it allows as to parse and reuse these stylesheets only once so for maximum efficiency they're using constructable stylesheets as well only if the browser supports it so I think one more thing that we need to do of course later on we're going to change the styles and the template so we can also define the properties so first is we need to return an object then let's say I think for the hello world sample if I'm not mistaken we use name as the property so we can also do that then for the type it's just string then we tell lit element to reflect whenever the property changes we tell lit element to reflect the value to the attribute so to see that happens let's use the property that we defined under properties inside the render by the way if we need to somehow initialize or have a default value for our properties we should do it in the constructor so let's say the default value for name is equals to hello yeah we see sorry it's not that clear maybe we can change the color to white yeah so now we have the name property the name property default value is hello so there's two things that we can check here is first is since we mentioned that whenever our property changes it should reflect to this attribute so yeah we can try that here let's say we change the name to well we see that this changes as well as the attribute here the attribute name here but what if we change this or we remove this one what will happen so what will happen is whenever we change the name property yeah it will not just reflect so if we want for a property to get reflected to the html element we just say reflect to so I guess that's I mean basic to get us started for building this chat message so starting now I might need a bit of a copy paste skill so let's go on to the chat message so for this one I'll be copying this one first and then for the properties we're going to have two properties one is from and the other one is outgoing so what this is is from it's more on the name of the server so that we will be able to see in the chat message where the message came from and outgoing is just a flag for us to identify whether it should be a line right or a line left so I also need to copy all the styles so I think we now have or we have now completed the chat message but just to have a quick idea of what is happening on this render portion so first is whenever this or the from property changes we will get the value and if the from is null or undefined or it's not set so by default we will have the anonymous as a value then the initial is just like the first we'll get the first letter of the name then for the html template first is just the badge we just pass in or bind the initial also we did the same for the name and we're also using slots because for slots we want the content or the content of the template of our html tag to be projected on this portion so if we now try to modify this chat message and we add let's say Martin then say hello so now we have this element so we can also see how it looks when it is an outgoing so basically if it's an outgoing the direction will be on the right side portion but if it's not we should see it on the left side so if we since we do reflect so we should see outgoing here so I guess since now we have the chat message we can now proceed on creating our chat room so we first create a new file so since we already done the basic stuff so as much as possible I want you to create this chat room maybe just the skeleton or in you add the or you import the lit element then you write in the class with a chat room message that extends lit element then add the static get styles and the render also don't forget to define your element so yeah so I hope that you're able to come up with this structure so first what I'm going to do is first is we need to have two properties username and the message list so we can type in string and the message list which is an array so for this one I'll just copy the styles and I'll just quickly copy the render so if one thing that we use in these styles is if you're familiar with CSS variables the native CSS variables or the ID custom CSS properties we're currently using that here because later on when we try to integrate this one in React or in view we will be able to somehow change the look and feel of our chat component so for this one it's I think it will be somehow I assume that everyone have is familiar with tag template or template literals so for this one we can do the loop here but we need to return the HTML element if not we won't be able to see this one rendered if we're not using the HTML element for displaying the element so if one thing that we need to see is this one so this we use the Boolean attribute binding so if in case you're wondering why we need to use the Boolean attribute binding for this one if we change this one to this we have some error earlier in the future because what will happen by default is if this message outgoing is not false or undefined the outgoing value will be undefined string since which is not what we supposed to do that's why we're using the Boolean because if we use the Boolean what happens is the value that this outgoing property will receive is pure just through our false not string Boolean so I'll also be copying the rest of the code so what we're doing here is first we define our own custom setter and getter if you still remember earlier in the slide I have mentioned the no accessor so by default LitElement provides the accessor so they do LitElement the setter and getter by default but for this case we did our own accessor so we added our own setter and getter so for this one we actually don't need these request update because the we're not using the username for the rendering so we don't want the LitElement to re-render whenever the username property change so one of the things that we need to take note is if we add our own custom accessor we need to trigger the request update manually and pass in the name like what we're doing here earlier we need to pass in the name for this case username and the old value for the Lit HTML to do its rendering again we need to trigger this when manually when writing our own custom accessors but for this case as I mentioned we don't need this as we don't need LitElement to re-render whenever the username changes what this does is just whenever we provide him the username it will try to connect to a web socket server and for the one of the life cycle hooks that was mentioned earlier is the first updated so in here we can have our reference to the input on this case and also you can also put your let's say if you're going to do focus on the input after the element has been created for the first time you can do that on this life cycle so I think that's it for the chat room so if we go on to the index.html and if we replace this to chat room I hope we should be able to see we're inside the chat room so one thing I want you to take note of is if you see whenever we add in oh I have an error we need also to import the chat room at the chat message rather because we remove the chat message from this one from index and since we need the chat message inside the chat room we need to import the chat message so now we should be able to so yeah we just have this undefined error because we didn't provide a username I think what we can do is instead of yeah we need to provide now we have this name and the message and the initial so if you notice we have this error but we can ignore this one as I mentioned earlier but for this one I want you to take note of this because what we did is whenever we add a message to the message list it's like we're getting all the message and concatenating it with the new message this is because by default if we do mutation change on our array or object the element will not be able to know if something has changed on that object or on this array so one thing we can do is we can actually try to use push we can push the new message object instead but for for the lit element to be rendered we need to mention the request update manually but first I just comment this one first so that we can see that our app is not working I mean we're adding but it's not re-rendering because as I mentioned if we do mutate the object or the array by default lit will not be able to identify whether change happened in an array or object so we need to trigger request update manually so now if we type in we see the same result so we can get this one and now I guess we can start creating the chat lobby so let's first create a new file and call it chat lobby so we're just going to do the same thing first we need to import lit element then the HTML and CSS helpers then we create our class let's name it chat lobby and extend lit element also we need to define our element so we call it chat lobby and we pass in the chat lobby class next thing to do is to write the static get properties if we need but for this case I think we need if I remember it correctly we also need to provide our styles and lastly the render so for this one I'm also going to copy and paste I guess we don't have that much time yeah so I need to copy these styles first or maybe just copy everything so what is new here I guess there's nothing new it's just we're doing the same we also have provided or exposing our CSS variables for the chat lobby and then I think the new thing that we're doing here is we're dispatching an event a custom event which we did it earlier I guess and to do this app if you remember correctly we also dispatched our own custom event so we just we also added that here so this is for us to identify whether the user have entered his name or not or if he already wants to enter the room or not so we dispatched an event once the user clicks on the join room so for this one we we did as well as we bind an event as I mentioned earlier one binding event we need to use the at sign and then yeah there's yeah I guess we also did the event binding earlier so we can or should we should now try the event the chat lobby rather for the chat lobby we don't have any properties required so if you notice we don't have these static yet properties yeah and by default if you remember earlier we're manually cleaning up all the events that we have added for the to do list app but in this case let HTML handles that one for us so we don't need to worry about cleaning up the events that we have here but if of course if we do our or if we add manually our own listener in this one then we should remove that manually but by default if we use the lit HTML event binding cleaning up the events is being taken care of us by lit HTML so we now added the chat lobby in the index so yeah we're now able to see that this is the chat lobby so I guess finally we need to create last component which is chat demo so for this one there's only few lines on the chat demo because what this does is it actually just toggles the chat lobby and chat room but for this one let's try it first for the chat demo if you notice we also imported the chat lobby and chat room so we only have two properties the joined and the username so join is just an indicator whether the user joined the room or not and username so for this one if we can now see if we type in our name and join the room we were able to successfully hide the lobby and show the chat room instead so another thing that we can do here is instead of doing this hidden Boolean attribute binding we can also have conditionals inside so let's try that so what we do instead of hidden we remove this hidden so we remove the Boolean attribute binding so we can then check whether it's not if the user is not yet joined then we show the chat lobby otherwise we show the chat room so for this one we also need to return a template result so we were just doing some ternary here so we're checking if the user has joined or not if the user is not yet entered the room so we will display the chat lobby otherwise we'll show chat room sorry sorry sorry sorry sorry sorry oh we can try it but I think it will still work it's like this one right both will work I believe so just return this right but just to make sure that we have sorry just to make sure that this has changed let's try to add a fake attribute or say class say class so if we enter so any approach will work but I think this one is a bit cleaner so I guess that's it for the chat demo for the integration of the chat demo it will be done by Sumit so for the last part we are going to use web components basically see how we can integrate them with our existing projects which we have already written in third party framework so do you guys need a break before that so we can have a 10 next break and then we can see how we can integrate it into our existing projects with any third party library framework so I'm going to show you how we can integrate it with React and there are similar steps which you can follow with mostly Angular or Vue.js or any other third party library so there is polyfield you will need to install if you want your application to support for all the browsers especially for Internet Explorer and there is one polyfield available Web Components JS which you can always install to support it apart from that there is vandal copy which is available for zxjs to copy all the vandal files into your own repository so in your packet.json you can write a post install script which it basically will whenever you do npm install this post script post install will get executed and it will execute a vandal copy script which basically what that takes the custom elements ES5 adapter and polyfield which is Web Components vandal.js and copy it into our public folder so that later on we can utilize this in our index.html and in your index.html you need to add these three files now three lines basically you are including the same copied file in your index.html that's how you can support it in your react or any existing application where you want to integrate the Web Components so if you see we have like one of the we have put all the code for angular react and view into the repository if you want to look at it look at them apart from that if you will see here in the codebase so in my packet.json I have added my vandal copy script which will do the copy of all the Web Components polyfield and ES5 adapter for me and I have written this into a post install script so whenever I do npm install it will get executed and in my app.js I will just if I am writing my Web Components in this folder directly structure I can directly import it here for this I have created that as a package and I have installed that package and I am importing from that package chat demo and I am using that directly as a component inside my app.js and if you will run this it will be similar as we saw previously and we can just execute this and use this command so it's really simple to use Web Component in your legacy project or any existing project you can plug it in any time you know any kind of project and similarly it's really simple to integrate with view for angular it's a bit complicated but we have provided some difference for them and you can always go through those links and check that there are some best practices while you are working on Web Components always create a sado root whenever you want to encapsulate your styles create your sado root in the constructor always place any children the elements you create into the sado root so that it should be inside your DOM elements set a $host display style default it's an inline means it doesn't take the height and width so it's better to set it to block or inline block or flex it's always better to set the display property for the hidden attribute on the host it's basically you will never be able to assign the non-property to a host element so whenever you are passing the data or passing some kind of Boolean's numbers or strings try to pass them as a property as we saw like name in our hello world example do not try to override them in your custom elements always accept primitive data as either attributes or properties so whenever you are passing the data or passing some kind of Boolean's numbers or strings do not dispatch event any time from a host to downwards to your children always pass them as a property or attribute dispatch events from your children to your parents so as we saw we saw to do change or other events which we pass from our children don't forget it basically tells us like what you should always keep in mind when developing any custom element accessibility of your elements it should like be accessible using the whole attribute if it's taking all the area attribute if it can define you should always put the accessibility of your custom elements performance try to not use much of debounds or any other performance lagging method which can impact the performance of your element script agent always the answer if there is sometimes like you can use the native HTML only don't always go with the web components custom elements be responsive try to define your components in a responsive manner and always test your components as much as possible these are the differences we went through to collect all the content and if you want to go through it especially the last three which are used for to integrate a web component with angular view and react these are really useful when you are trying to set it into a project that's it that was the workshop and if you have any questions you can ask any time