 So we're moving to a more design focus talk today can already see html 5 is going to be a focus Varun is a software engineer and a blogger and he's going to be talking about How do you actually do web development today in 2013? How do you use? Components, how do you use modular development to develop much more quickly than you can? so Okay, so am I audible audible at the back? Okay, okay, let's get started So today I'm going to be talking about the web components and so what we have in future for Developing components on the web So my name is Varun as Rahul introduced So this is my Twitter handle and I actually use Google plus you can follow me on as well Okay So once upon a time web was just a platform for creating interactive and Navigable contents So it was just a static contents and people so people were using html to define static text and images And so we were using the JavaScript to put up some animations or some interactions on that page And CSS was just used to just just show some basic So it was a presentation layer thing which we were using the capabilities on the browser were very much limited and We need to depend on back-end servers for accomplishing most of the user tasks So there are lots of heavy lifting was still but done by the the back-end servers Things have changed a lot and so if you look at today's web So we have this powerful combo of HTML 5 CSS 3 and JavaScript Browsers are becoming more and more powerful So we can do lots of stuff on the so web applications of today are almost as powerful as the native applications So we can do lots of stuff on the web platform itself So we can do for example We can do we can build applications which can work offline so you don't need internet It'll download all this stuff locally and you can build applications with that nature and So apply your web applications can have access to your camera and it can access the devices And we can even have a databases and a complete file system on the web platform So we can even do real-time communication and lots of so web has web as a platform has I mean we have gone so far in the web platform So with great power actually comes great responsibility. So as a front-end engineer as more as web applications are getting complex as we start building more and more as we start putting more And more features in the web applications. So there is a need that we should follow better Engineering practices so we should so back-end engineers have been Have been organizing the complexity have been modularizing stuff and so they have been enjoying lots of facilities on the back-end servers But as a front-end engineer so so it's a need so we also should start building code that is maintainable So as a front-end engineer, so we should also start writing code which is maintainable and to achieve that the code should be modular and it should be encapsulated and So it should be reusable. So basically what it means is we should start building reusable components Which anyone can just plug into your page and so they can use it So some may form examples of this reusable components are so for example, even this Google plus like button plus button and Facebook like button. So all these things are components. So what do you take? So what you do is you take these components and you put it on your page, okay? So as I said back-end engineers, so they have been Achieving some of these things using the object oriented language So any language will inherently support will help us get there, but how do we get there on the web platform? So before that, so let's see what's actually missing on the web platform today So let's say so I'll go back to the same example of the Facebook Like button and the Google plus plus button. So let's say after that if you are so if they are providing some sort of commenting capabilities Okay, so so they'll show some text box or some way to actually share your the current page Okay, and so there is a chance that it could lead to some sort of name collision So whenever you have both these components, you have two components one from Facebook and one from Google plus So there is a very good chance that these guys can collide and so a comment button within a comment Xbox within a Facebook component can interact with actually a Google plus component So there is no way of dumb. We can't we can't do any sort of dumb encapsulation today And so that could lead to problems like Collision of dumb contents so you could it could lead to some same ID collisions and things like that And it could potentially lead to broken styles Let's say if Facebook is trying to apply some sort of style for its its text box So that might get applied to Google plus also Of course, there are ways of overcoming this so we use some conventions So like all Facebook will have some prefix or we use some suffix or some other conventions to overcome these problems, but inherently Web as a platform doesn't provide any sort of capabilities to overcome these So that's what we are going to look at today So I mean as web applications get complex. So there is a set of frameworks which are becoming popular So we call it as MVC frameworks or in general we can put it as MV star frameworks So these help us to some extent So so they'll help us to organize the complexity in our application So so we can separate out the contents and the presentation layer to some extent with if you use any of these MVC frameworks, so we will be able to separate out the contents and the presentation layer So I mean there are so many MVC frameworks available So I'm not going to get into any of the MV star frameworks, but I'll just talk about how in general any any of these frameworks work For example, every I mean if you take any MVC framework for example So it will be it will provide you an option to define views views are a template So that is how you are that's that's sort of like the presentation layer and then so you'll be associating a model with your view So you'll be creating a model object and you'll associate that with the view and then so we'll have to provide a way for Monitoring the changes so all these libraries provide some sort of mechanism for data binding So when whenever the model object changes So it should reflect immediately on the views and whenever the views changes it should reflect on the model object So that's the principle with which any of these MVC frameworks work So let's see how these guys are able to achieve that in today's web So this is so first let's look at how templates are there today So there are various mechanisms in which you can create a template But one of the still commonly used method is Creating a DOM which is off-screen so you can create a DOM and you can either hide it or you can put set its display to none So this is how we do it So we generally create a development or something so which has all the all it's so it's like an abstraction it brought it I mean, so it's composed of all its comp parts and then as you'll hide it initially and whenever you want to show it on the screen So you'll change its visibility, but then it has its own problem So one of the obvious advantage with this is so we're working directly on DOM elements So say it's a declarative so you don't have to use JavaScript to achieve any of these things It's declarative But then so some of the obvious problems are so as we create this template So whatever resources you are trying to load within that page. So those all the resources are preloaded So it's not so whenever so the moment you create this template. So at that time itself The images and everything will be loaded. So it doesn't wait for you to actually can start consuming that template So that's one problem and it doesn't solve any of the problem with encapsulation which I talked about like whenever The same name is being used somewhere else. So it doesn't solve any of those problems So that's the first method So in the second method, what we do is Yeah, so on the previous slide you had hidden as a value there as an attribute. Yeah, is it valid? Yes, so it actually works if you simply say hidden in the DOM Instructions CSS. Yeah, okay. That's new. I didn't know about that Okay, so it the only difference between that and display none is so this will still occupy the space So it'll occupy. So let's say if you're diverse of with some hundred pixels, so it will still occupy that space So that's the difference between hidden and display none. So this effectively does the equivalent of visibility colon hidden. Yes And the second way of second method of creating templates today is so so we can either use strings So whatever the contents which we want to put it up in the template So we can have a string content or the other commonly used the technique is putting that content within the script I mean or overloading the behavior of scripts. So you can set some type something other than Javascript so that the browsers doesn't load that So so here the problem is so we are sort of Getting into parsing this string parsing and so this could lead to other cross-site scripting attacks and things like that So this this opens up a new set of problems So we have two methods today. I mean so we can roughly classify the techniques into these two buckets But both of both of these techniques have its own a problem So let's look at so this is templates of today and now let's see how models are. What is there in JavaScript space? So in JavaScript things are a little more better. So we can organize the complexity to a better extent Because of its module pattern. So generally when we create some model or model object or something on JavaScript So we and we actually tend to create a mod we use module patterns or Javascript object constructed to achieve that So if you look at any of the implementations of any MVC frameworks like backbone or something else So what they do is they'll provide you with one base class for your model And so you will have to extend that model to create your model class So the reason for that is so whenever you are trying to change any of the property of your model So they need to know the changes so there so inherently there is no way for you to monitor changes in an object So the that's I'm talking about present today's web So things are going to change in the future But in today's web, so there is no easy way for you to monitor for any new Property changes of an object. So how these libraries achieves so they'll provide you a wrapper object so you'll be using the accessors of those wrapper object and So once you use that object, so they'll say they'll get to know that you're trying to modify this property And so that's how it is handled today. This is for the model changes now coming for the other side of binding So for whenever the view changes, how do we map it to the model? So for that we use we can use either DOM mutation or some of the event handlers But so these are not very efficient. So I'll so I have a later slide which will talk about The I mean what are the better approaches so but so in today's web So even though we are trying to organize the complexity through this MV star frameworks So there are some still inherent. There are some problems which still exist today So let's see how we can achieve encapsulation today So this is actually a fundamental Concept of object oriented programming. So it this this helps us to separate the code which we write from the presentation layer And then so in web also we have this to some extent so we can achieve this with the help of iframes So iframes help us to abstract stuff to some so it's it help us to make things very secure But then so it has its own problem. For example, so it doesn't fit fit well So whenever so it doesn't resize depending on the contents. Let's say if your content is Big I mean it doesn't resize to fit the contents. So that's a problem with that So there is a new spec which is coming up. It's called seamless iframe. So it's actually an attribute which you set on The iframe which will help to solve some of these problems. It's still very much new. It's not available in all the browsers But so that's something you can watch out for So what we have seen so far is we have seen what is the principle behind any MVC framework So what are the different components of it and then so how these things how we are achieving all these things using today's web? So there are of course, there are lots of problems in these so whatever stuff which we have discussed So in today's web so there are inherent problems in the web platform. So how are we going to solve all this? Web platforms is the solution to all these problems. So it's actually a set of it's not a single API So it's a set of API which is going to provide you some of the some of the functionalities. So let's look at all those things Okay, some of the key players of web components are template So this is a native HTML native way of define defining a template so you can define any inner chunk of Cloneable DOM and so you can use it later So I'll talk about in detail about each of these things and then also using web components It will provide your mechanism to create custom elements. So let's say if you want to Extend so currently there is nothing called so we have divs we have spans paragraphs and stuff like that But if you want to create a tab control tab container natively in HTML So currently there is no way for it So we use some sort of JavaScript library or some library to get there But so using this custom elements, so you'll be able to create some tab container element I mean any element for that matter And so later you will be able to declaratively use it And the next one is a shadow DOM. So shadow DOM is actually the building block of encapsulation that will help you to abstract Some of the implementation details to the consumer. So we'll see all these stuff in detail And some of the supporting things are so we have something called style encapsulation So which will help you to specify a style to a particular scope. So we'll see all these things We'll start with templates So as I said, so this is something which is not available in browsers today But you can expect it so this the spec is so there is a spec available for this and browser vendors are working on it So we can soon expect this in different browsers So how it works is so we can define we can use this template element And so we can give an ID for this template and you can define whatever the DOM elements Which goes inside that. Yeah, so again, we are we're talking about declarative way of defining the component A quick question see if you see scripts don't run in your template. Yeah, what happens with browsers that don't understand the template Currently they'll just render it as in line. Yeah, okay So basically that means that you now need a way to also preserve browser compatibility in something that is supposed to be inert Yeah, okay. Are you covering that? I hope you are No, actually, I'm not covering that but I'll see I'll try to see if I can link it to some so so today To Jason's point, right? I think the way they will maintain backward compatibility will be exactly like they did for the The new HTML 5 elements is that they'll put div tags inside. We'll have to handle all the backward divs that Will hopefully have styles that will hide and they will have to script will have to script it to an extent so that we don't end up with Things being visible right in old browsers Yeah, so the you know you can just put a display none on template and hide it by default in old browsers But what do you do with scripts? How do you tell the browser to not run scripts display? None isn't the only problem. It will still create all the image resources It'll do a whole bunch of issues will arise when this happens Yeah, so the advantage here is again, we are directly working on DOM So it's a declarative way of doing things and then so the other advantage is so the contents are not parsed and So they're not rendered so you won't so whenever if you have any images or anything within your template So those things won't get loaded So this is how you get you have to use it So you can just select that template Whatever you have defined and then so you so T dot so the template dot content content will give you the document fragment So whatever you have defined within that template So you will get hold of that contents and you can clone it and attach it anywhere So wherever you want to use that template So all you have to do is so you just have to clone that content and you just have to include it Upon it to the place where you want to insert Okay, so so this all all the problem which we discussed so we are not doing any string parsing So the content scripts are not loaded. Of course, there is this backup backward compatibility issue But other than that so it solves all the problems natively on HTML5 itself Okay, so next let's see what is a shadow DOM Shadow DOM is currently available in Chrome canary. So I'm not sure whether it has landed in Google Chrome But it has already available in Chrome canary. I'm using Chrome canary So the concept itself is so it's actually a separate topic in itself I'm going to cover some of the basics of it and So how we can define insertion points in that and different aspects of it So looks like this is not something new. So some of the DOM component DOM elements Which we already are aware of so those are doing that to some extent. So for example So if you look at any a video tag or if you're looking at any of the the special in the daytime or time input elements So if you see here, so it's all so it's composed of some complex set of controls So it's not a single control. It's so you have a Slider here mean a timeline here and then so you have the control to pass play So these are all different components, but when you actually inspect this thing, so you will act So let me go there So what you are actually seeing here is it's you have a drop-down and there is a spinner So there is a whole set of complex DOM objects there DOM elements there But when you actually look at when you inspect for that element, so all you are seeing is just a single input So we essentially what browsers are doing is it's hiding some of the DOM nodes within certain other DOM nodes So this has been there for in browsers for some time But just that it's not exposed to the end-users. So shadow DOM is a specification. It's a it's an API which will help you to So we can also define we can also hide certain DOM nodes within other DOM nodes Okay, so this is how it works. So let's say you have the initial DOM component something like this so a DOM tree something like this you have a host and you have some certain children and So let's say if you want to attach some if you want to abstract this host node And if you want to instead of whatever children it's being rendered if you want to render this contents So what you I'll just jump to the example. So so whatever you're seeing on the top So I'm defining a development and so it has a host and within that I have certain other elements So it has h1 Chose my name and my place and some other div contents. So that's the original content which is there in the DOM tree So now I define a shadow host. So this is how I created so currently you have to use the vendor prefix to get there So what do you do is I get the so there is I there is a method called create shadow host So I pick I actually select the host and for that host. I'm getting the shadow root So once I get the shadow root, I can add any elements So here I'm just putting some h2 and I'm just putting some other deep contents So when it's actually rendered on the browser, so instead of seeing the original contents, you'll be seeing the shadow content So this is a demo actually So let's say let's see what we are seeing on the So this is so you said visible at the back Okay, I'll just Okay, I'll just read out what's there so what you're seeing in the inspector is still the original DOM DOM contents So it's still showing the ID div ID host and within that I'm seeing the h1 element and The h2 which shows the name the place and things like that, but what it actually rendered is something different So you have a shadow host So you have a host and which has some certain children initially But so you have you have created a shadow root and you have added some content to that So when you attach it, it actually it gets replaced so whatever contents you initially had in your host So that will be replaced by this new content So to so this in developer chrome developer tools. So there is a way you can actually see what is being rendered So to do that So there is so there is an option called in show shadow DOM. So once you enable this option So instead of the original content, you will be still able to see the shadow DOM also along with that So you'll be seeing the some the shadow DOM also So for that we need to close and open it So now if I inspect I think I'll again read out. So so now apart from just seeing the original contents of that host So you're seeing the the shadow DOM whatever contents we it got replaced. So that's the that's how it works So you you have to enable the show shadow DOM on your dog tools. I Have a question. Yeah. Okay. Is there a way to define the shadow DOM declaratively? So we are declaring so so once you get that object shadow DOM object No, rather than doing it in JavaScript Can I do it in HTML as so that you can do it in? So if you have custom elements, I'll be talking about that custom elements So once you define that so everything you put in within that custom element. It's actually a shadow DOM only So now coming to the style encapsulation part so whatever contents you actually put so so initially We are at this H2 and do so now let's say if I'm adding a style tag within this shadow shadow DOM So it'll so that style will be applicable only to my shadow DOM So it it's it's encapsulated within that scope. So I have just setting a H2 color red So if as you see it's only applicable to the the inner contents. It's not reflecting on the my host So to do that we can so there are properties with using which we can change that behavior Okay, so this is an important point point. So we have seen how to define how to set a color. So let's say how to style your DOM shadow DOM, okay So now in practice what we'll be doing is so instead of we defining the color or something So we'll be providing so when you want to build a teaming capability to your shadow DOM So what we'll be doing is so that's where CSS variables helping so we can so instead of putting the actual color itself So we can use this where I fund some variable. So whenever the consume whoever is consuming this shadow DOM So they can actually use that variable. So whatever the property they set on that variable So that will be reflected that will be used within that shadow DOM So you can actually use a shadow DOM in conjunction with the CSS variables And so the other thing is so as I showed you we had some initial contents and we added some shadow DOM So it it entirely got replaced so instead of that so there is something called insertion points So if you don't want the complete contents to be replaced if you want only certain parts of your original DOM to be used here So you can use this Content element so you can so and it has a select attribute. So in the select attribute you can specify any CSS selector So here what I'm give so this is the original my host so in the host I have something called first name last name and all so here So when I use it so I can use this content and Content select first name so it will use that CSS selector to select that element from the original host So this is how it will be used in practice where so we can specify so this is more like a way of Specifying APIs into your shadow DOM Now let's look at observers So we have so currently what we have is Mutation events so whenever you change a DOM so whenever you modify a DOM you add something to your DOM tree So you'll get you you'll get notified as events So I have told in the earliest slide that it's not very efficient. So there is something called I mean mutation observers So this is some sort of similar to events But then also instead of getting notified for each and every event so whenever a bunch of DOMs are getting modified You'll get it in a single callback. So there'll be a single callback in which you'll get all the mutations So then so it is very efficient when compared to the mutation events So we'll see that with an example Okay, so I built a small example today team India is taking on Australia So this is the 15 number squad and so this is simple thing which will actually sort and give you the top level So so initially I'm going to use DOM mutation events So let's say if I'm clicking on rotate So it's actually trying to adjust all these 15 players and it I mean it rearrange those players So in that process so we have got 2000 events fired So we have we are trying to do some 1000 rotations and in that process We have done some DOM manipulations some 2000 times and so it has triggered the callback 2000 times So now let's see how it will be done in the case of mutation observers So let's say the same the same use case if I use mutation observers So I'll be getting 2001 mutations, but I'll be getting all these changes in a one callback So that's how it is efficient. So also it doesn't do a whole propagation It doesn't the event needs doesn't need since it's not an event. So it doesn't need to propagate the all-way So but so you'll get all the mutations in a single callback So the another interesting thing which is coming up is object observer This is similar to mutation observer, but it's for objects So let's say you have a JavaScript object and if you want to monitor for some changes So now it's possible. I think it's already available in Chrome canry So this is how you have to use it So you have to use object observe and you have to give a observer function a callback And so the object which are actually observing So whenever you add any new properties or you change some property, so it will get notified So the again the important thing to note here is so it's not triggered for each and every change So let's say if you are doing if you are setting name and if you are setting Twitter handle on a particular object So the browser the JavaScript engine decides when to call so it will club certain operations And it will call the callback in a single go So So now we have seen how to create templates natively and with the help of shadow DOM will be able to encapsulate stuff and So with observers will be able to bind the model and the view So now that we have got all these things. So how do we create a custom element? So let's say if you want to create something called x tabs. So there is something called element tags So this is still not available So what you can do is so I'll come back to your question. So you were asking so if we can declaratively define a shadow DOM, right? So whatever contents you put in within that template. So that's that's actually like a shadow DOM So when you consume it using that x tabs when you are consuming it So at that moment you will not be seeing any of the implementation details Whatever so for example, so there you're seeing content select H1 first list So that's an insertion point and your declaratively setting it So once you do that so when you consume it so you can declaratively say that H1 title so it will get replaced there and so apart from the actual templates and The shadow DOM you can also put in some scripts. So where and you can specify some API So whenever somebody wants to instantiate the component using JavaScript, so they can still do it So you so whatever constructor which we specify here. So that will go on global scope so you can instantiate it from anywhere So for getting this features you need to enable so I am so these are all the things you have to follow to use some of these features Okay, so this is a doodle. I have built some time back So this is actually a it's not image or it's not so it's completely a CSS and HTML so there is no images used here So all these animations are CSS based and for just for the mouse following. So I've used the JavaScript library So now what I have done is so I have made this into a company. So there are lots of okay again, so So today browsers are not supporting any of these so many of these standards It supports shadow DOM and the observers are available But not all these things which we have discussed are available today But you can still use it using some of the polyfills. There are some there is one of Firefox library called x tags And so there is one more polyfill. There is a model view There is a MV MDV framework. I think it's from Google. So so using some of these things you can You can just play with these functionalities today itself So this is something I have built And so if you look at the actual DOM So how I use it is so it's a I use the element X hyphen doodle and there is a small open Gangnam style Again if I want to instantiate one more instance of this component, all I have to do is so let's see how we can add it I added a string instead of the element So so it got our open Gangnam. So so now this so I can anywhere wherever I want to use this component I can just use this custom element So today also you can enable yourself by using some of the polyfills So I'm hoping that all browsers vendors will soon be soon be providing these functionalities And so that will help us to organize our code better And so we can natively achieve things which some of the MVC frameworks have been achieving so far So these are some of the references That's it from my side any questions What is the performance impact of these components as opposed to I Haven't really done anything. I haven't actually looked into the performance aspect of it So this is very it. This is very new actually so not all browsers are supporting it So only shadow DOM and style encapsulation features are available on that to chrome canry alone And so there is one more. There's an excellent library from Firefox. It's called x tags So you can use that to Use some of these standards, but I haven't really done any performance analysis on that Hi Here yeah, is there any limitation of the the code what we are using because here it seems like we have to Encapsulate the JavaScript HTML and CSS altogether. So is that limited to one single file or something? You know, so there is nothing like that So I mean it's it all mandates is you need to follow that structure But how do you include that it can be spread across multiple files or so there is no mandate on how you organize Your code source code so all it needs is so it specifies certain format you need to create a Element a custom element tag and within that you can put your shadow DOM and so that's all it mandates But it doesn't mandate you to keep it in a single file or you can keep it in a different file also Okay, so basically it is It's the same as like how we are currently doing like first when you're loading a page You have to load all the supportive files and everything But the way of creation of the DOM or creation of the object will be the different. Yeah, exactly So if I want to so let's say if I so we have this Component so let's say if somebody else want to you consume it So I'll be providing a single file and so the all the other guy needs to do is so he needs to include that as a link link-related components and so once that is done now, so he'll be able to So, yeah, this is this is the this is how the consumer needs to use it He needs to add a link tag with the HTML So this is where the original definition of the the custom element was there and so once you have that so all you need is just that The definition so after that you can start consuming it any other questions So there is a very good when Google plus page where so lots of talks and information about the specification are posted so you can follow that or You can follow Eric Biedelman. So actually I this presentation itself was inspired by his talk And so there is a very nice article about shadow DOM on HTML five rocks. It's called shadow DOM 101 So so this article talks about the basics of HTML. I mean shadow DOM and Yeah, so these these things are about mutation observers and And Yeah, so do you see people using this instead of templating as we do it right now? I don't I haven't seen anybody using it in production or it's it's not even close to that But I mean as the spec gets more standardized and as more browsers vendors browser vendors start using it So probably this will be the future All right So, you know, it seems like a very neat way of essentially taking a single replicating component It's often repeated. Yeah, and inserting it in multiple places without changing the code. Yeah Now when you do that, can you make each of them slightly different in their behavior? Yes So that's what we have this API is for so apart from declaratively defining your the The actual component so you can even write some JavaScript. So that will that will help you to change the behavior So let's say so that's a 16 hours. Sorry It's a it's a same tab controller component But now I am adding a constructed to it and I can define certain methods within here So so when you create when you instantiate that tab controller You can actually set certain attribute or certain things and you can change the behavior Okay, so you can actually run a script custom every time you use a component. Okay, and Did I just notice a style tag in the section there in the previous slide the slide you were at just now So you've got a slight a style tag there. No, which is not in the head No, this is so this actually So basically I define an element So this is the so the whole HTML will contain only this element declaration and within that I'll put up a style So this tile will be scoped only to this element. So that's the style encapsulation. So if I want to Sorry, what exactly does it inherit the parent? It doesn't is it doesn't so that's what I was saying So if you want to override that behavior, so there is something called reset style inheritance or let me go back to that slide Yeah, it's called reset style inheritance So by default any style which you put in within a dorm shadow dorm It doesn't inherit anything from the parent and also whenever you put some whatever you whatever styles you put put in here So that doesn't go back to the the consumer. So if you want to override that behavior So there are two properties reset style inheritance and apply author style So once you when so the first one indicates that so if you set it to true It will inherit these styles from the container page and the second one what it says is the other direction So if you set it to true by default, it's false So let's say here. I have changed H2 and this is this tile encapsulation title That is also H2 currently that's not getting reflected even though I have said the content. So I'll show you the Okay, so this is how I'm doing because shadow DOM is something already available So and this default behavior is only scoped. It's scoped. It's limited to that Shadow DOM. So even though I have said this H2, so it's getting applied only to this So this is the shadow DOM which is rendered and it's getting applied only to this guy and not to Something else which I have on the page. So for example, so this is the title of the page So which again is a H2 element, but it's not getting reflected I think I can show you Doesn't support live editing That's pretty cool. Thanks I want one more question Yeah So that's style tag, right? I believe it it was in line there, but can it be external call as well? Yes, it can be external as well Then when so you said that it doesn't parse it right when on page load that template Yeah, so does it also does it get downloaded on page load or does it get downloaded when it's in it? Okay, I'll have to check I'll check and get back to you on that Okay, so we're going to take another break now for those who still have questions Varun is going to be around. Otherwise, we'll see you at 4.15