 Hi guys, welcome to DrupalCon, hope you all have had a good lunch and our session doesn't make you more sleepy. So the talk over here would be mostly around the recent trends in web, how web has evolved, how HTML DOM structure has evolved, how we have moved from static web to the dynamic web now. Sorry. Sorry. So yeah, more around how web has evolved in the initial phases and then we'll be quickly talking about web components which is one of the leading edge technologies in today's world which is helping the web evolve and then we'll be talking about polymers which is something like your jQuery for JavaScript. So polymer is something that is polymer for web components. So yeah, it helps you deal with web components with ease. This talk will be followed with a short demo in which we'll talk about how do you write your polymer components, how do you actually create a web component and then we also have a Drupal theme written with polymer which we will quickly walk through the code and show you a demo of the theme running live. So this is Piyush, I work with QED42 as a technical architect and he's my colleague Sarked, he works as the UI UX lead at QED42. I'll hand over the mic to him to take the discussion forward. Sarked. Hi guys. So we'll start with a little bit of history like how web has evolved from the ages of static pages to now big web applications, dynamic applications. So earlier in 90s when initially the web started it was static HTML pages, just not more than few pages per application, per website, but later on we saw CGI sublates coming into picture and then so with new features now web 2.0 was evolved giving mind to deliver all the new requirements of new upcoming page web now and then later on again we came up with service oriented front end architectures like MVC, MVVM and all like which we see in Angular ADC. So today basically web has evolved a lot from small websites to big large enterprise applications and similarly we have lot of lot many features now compared to the old when it started. So we have more features now website our applications are more of set of features and like login functionality or set of functionality basically and to do each of these functionality we have lot lot many options available with us. So basically to do a particular thing and web we have few ways to do it. People have different opinions over how to do it and I will not say that anybody is wrong or anybody is right but yeah then again we have this many options in front of us when we start with our application. So I think you all might have witnessed this issue like if we have to develop this feature for my application what to use which plugin to use which framework to go with. So this kind of dilemma is there I will exemplify this dilemma with an example like this scientist did an experiment over two set of people one set of people were given six jars of jam to taste and then buy and then other set of people were given 24 bottles of jar and to test and then buy something out of that. And after all the testing and it came out that the group of the set of people who were provided with the option of only six jars of jam ended up buying 30% out of them ended up buying any of the jam but on contrary the other set of people who were given more than 24 jars of bottle they ended up only 3% of them ended up buying any jam. So you see there is this this is what we call as decision paralysis or choice paralysis basically you have too many options in front of you and then you feel which one is better and which one is not better so again that's a dilemma for that is the same dilemma we as a front end developer have with us. We have many frameworks like Angular, if you see Google Trend, Angular, React, Ember, Backbone, so these are the basically major frameworks into last if you see the trends of last few years and I'll see you see if they all deal with they all have one common notion of they all share this notion of components and but they do it differently and also they don't work together so once you while developing an application or starting a project if you choose a particular framework a particular plugin you have to stick with that and because then the other one other ones will not integrate with it so that's they all share this notion of component but they don't they do not work together they do it differently and it's not key they are doing it wrongly but only that's they are doing it differently so we have this dilemma which one is right and which one is wrong which one will fit us which one will exactly fit our requirement so considering this dilemma so people from W3 who basically control the specs of browsers they came up with this discussion back there in 2010 Dimitri started this mail that we should have these features in the in browsers itself rather than relying on any other frameworks like features like data binding features like encapsulation and like importing so these these features should be native to browser itself so they came up with this specification of web components basically web component is the specs where in it allows you to define your own custom tags custom HTML tags and you have full control of your element full control of your tag of its HTML of its styling of its scripts and it won't load and affect other components so one major plus point of using web components would be like you you as a if you are working on a particular feature of your application you have complete freedom to choose whichever framework you want to use and use that framework develop your feature and encapsulate it with the web component custom tag and whenever you want to reuse that you can reuse it in in your application and again if you if your website has few application few features you can have those features wrapped with these custom elements and then use it so one of the features can be developed through react one other could be through other frameworks and then you can basically your application will have multiple this and you don't have then again this you'll not end up in this dilemma that what to use what not to use you can use and then again reuse it the same functionality later on so basically web components come with this four specs custom custom elements HTML templates shadow DOM and HTML imports so all these four combinedly help you to define your own custom element which you can reuse which you can share with other people and even you can just like in Drupal we have modules will in browser world have these custom elements which you can share so just like we have so the concept of custom element is not old and is not new is it's rather old if you if you look like you have this select element so you have the only thing is that now you have as a web developer you have the power to develop that elements not you don't have to then rely on the browsers to expose this custom element as a feature and then once that comes into browser as a feature then you will have that power to use that feature like when when we were shifting from HTML4 to HTML5 all of these semantic HTML template semantic HTML tags like header footer article so we had to wait for HTML5 to come in all the browsers to support it then then we could actually use those elements into our into our application but with custom elements we don't have to wait for the browsers to actually ship this functionality it's on us to develop this functionality and ship basically contribute to the community and then people will use it I guess for example like in this traditionally if you have to use a text box you'll use you'll have a text input box and then if you have to again make some changes to add in icons you'll so how many of you guys attended the Drees keynote and so did you see that example where in Drees showed that what do we mean by componentizing the component in componentizing Drupal so he showed an example when he showed a text box and then this text box was plugged in with a search bar right you guys remember that so it's the same example so let's say we have a text box you would use an input type is equals to text and you your browser would render it but in case you have a text box with a search icon you need to wrap this thing into another wrapper div and then place an input type text and input type button both of them into the single wrapper and add some more styles right what web component would allow you to do is it would allow you to define a different tag altogether different tag which could take in the which could take in the taken arguments as a parameter so for example in the right side by in the red section you see we have defined a custom web component called search text box okay so all you need to do is you need to type in this text into your HTML add this to your HTML and it would render a search text box with a search icon so you see the power it brings in with itself you don't need to write you don't need to write that huge that huge chunk of HTML probably this example is really small but yeah in cases you would have huge huge HTML rendering a small block on your web page you could encapsulate this entire thing into a single tag and reuse it across websites so you develop it once and reuse it multiple times another advantage is you could open source it out and other people could use it so polymer is doing the same thing polymer has its own library of components and there's another custom elements.io website where in people are open sourcing out the components that they built for their applications so basically this web components specs are basically the low level API and there comes in the polymer because so it's it's like similar to JavaScript and so what relations we have with JavaScript to jQuery similar is the relation with the web components to polymer so basically polymer is the sugaring layer above web component specs and they allow you to define your own custom elements in a much easier and more intuitive way and then you have more helper functions to do it more easily more and whatever is there missing in web components that features are brought in by polymer into the web components so basically if you look for the relationship as jQuery is to JavaScript similar is polymer is to web components so and many times I've heard that people are confusing with this fact that polymer is another framework but no actually polymer is a way to allow you to develop your own framework or it allows you to use the existing framework but with more efficiently but with the features which are native to the browsers let it be native to the browser itself basically it's a layer above so we have this browser web platform and then this polymer layer sets just about that and then you have this existing layer and using those existing frameworks you can develop your own web applications so and on 29 May 2015 I guess as polymer 1.0 was released and from there lot many pages have been developed over the internet and it is production ready basically people are using it using these polymer elements for the custom elements into their own web application but if you see the stats by the end of 2015 we had around 1.3 million pages on web which were using polymer if you might remember even GitHub uses polymer if you remember the date time stamp date time tag element in side of beside your repository that's a polymer element so and even Google is using for almost all of its applications like play music, Google Maps they are all built on polymers so I think there is no that there's not this question that it's still new and we have that browser support and I'll talk about the browser support as well but for the browser which don't have native support we have polyfills available which is which allows almost all all modern browsers to work with the polymers so this so till now we were talking about all theory and all what polymer could do and so let's start with creating an element let's see how to create an element with polymer and so we'll explore how what all features we have with polymer we have available so for this talk I'll take this as an example to create so think of a so this is the element which we are going to develop this green bar you see it's a sort of small alert banner on your website you can relate it with your Drupal set messages in Drupal so the sexist messages which come after you save a node you do an operation on your website and you see a sexist message operating so it's the same sexist message probably yeah so I have to use it basically you don't have to do anything if you when you have to use any in your browser you just have to include this as an HTML tag site message and then it will show the message which you want to show obviously we will make it configurable we will make make it dynamic but start first start will start with the basic so to start first the starting point would be site message dot HTML which will hold the definition of our element and one thing we have to take care is that the name of the file site message dot HTML should be exactly same as the name of our element tag so and we place all our code in the code to hold the definition of our polymer element inside site message dot HTML so I'll start with the first line that is import first thing which we do is import all the dependencies which we have for our element so for this example this is a very simple example so we don't have any dependency other than this Polymer HTML so basically this will bring in the Polymer prototype definitions to our site message dot HTML and if we have dependency of any other element so for example our element is depending on any other element to do something how to get the data we can include it here with the import link tag with import real import then the second part is DOM module which so basically this holds the markup and then this holds the definition of our element and with the name of our element as an ID we pass to it then the local DOM so basically this template tag holds the markup for our element so when we use our element into our application whenever we have to use it the markup inside this template tag is rendered there so basically here when we define it it's inert tag inert HTML and when we render it into our product there it actually gets inserted into the HTML DOM and then we call this Polymer prototype object to basically define the element so actually so I was telling you that this template holds the definition of your holds your markup, your style, your script so yeah so this is how in template we have mentioned this style and we have the markup class allow it and we pass in some text to display and this is how it is displayed once used in our HTML so when we and this is how we use it in our index.html we call that tag so once we define these style and markup when we call it in index.html this is shown this way but till now this so we have now created a very basic very basic HTML tag which we can use it whenever we have to use in our HTML just we need to print site message tag and then we have that HTML level but the problem with this tag is now is that we are hard coding the text which we are passing it or the markup is hard coded even it is not configurable so this is not what you will expect out of a site message you want it to be more configurable anyone who is using your element could have its own text pass into the element so let's make it configurable but before this I will talk about concept of shadow DOM and light DOM so whenever we so the main DOM is there that HTML DOM and whenever we insert other element the custom element inside it it brings in a shadow DOM with it and this shadow DOM is not active until unless this element is called and this element is actually in use and so it remains in that shadow DOM remains inside your DOM inert but doing nothing just like your command but once it is in use you can relate it to Angular's markup when you pass it with ngif and that if condition is not satisfied so your markup is still there but it's basically inert there so you can relate shadow DOM with that and then there is this light DOM so whenever a user will use your tag it will have his own HTML markup residing inside your HTML tags like example there is this span and p tags inside of div so divs own markup would be divs class and all but inside that p and span tags would be their light DOM it will be more clear when I show you this and again and something inside your light DOM is accessible into your shadow DOM through this content tag if you see this content tag and this is in index.html here the light DOM would be the span inside your site message and the shadow DOM would be the content passing here with the class alert so this is the shadow DOM and here this is the light DOM so whenever you have to use something whenever you have to bring in light DOM into a shadow DOM or content from light DOM to your shadow DOM which you can then activate you pass in with this content tag and select attribute you pass in the class which you have to bring into this content tag and it will be rendered so actual rendered HTML would be div with the class alert and inside that there would be the success your first component tags would be are you getting me? so once we do this now we have a configurable tag with us now we can so whenever so the user using your tag can easily pass in the HTML like class message and the text which can be called into your and then so the text which is appearing here success your first component is actually configurable through the tag but this is not it we also have to make it configurable configurable I mean this is an alert manner so you want it to you want to show it to your user only when there is something some activity like a message on form submission or something you will want to use this tag as that so we will make it more configurable so for that for that we pass in configuration through the properties attribute of polymer prototype polymer prototype object so basically so whatever we define in these properties this will be this will act as a attribute to your element when it is actually rendered in rendered in your HTML so for here I have selected shown as a property for my element which of which the type type of which is Boolean the default value which I am passing is false and I have made this property to be notifiable I mean whenever there is this whenever the update there is this update in this property your element will be notified basically it will be shown it will be reflected into that element so basically it is a two-way binding so this is how you use this is the value which we pass in here and then this value is binded to this property hidden which is sort of state of that element so so if you see the result so even though in rs.html we have site message and with class message even though it is there it is present in the HTML we don't see it it will only be it's basically inert and it will only be shown when I have this shown property to be true so whenever I pass in shown here the value is updated to be true initially it was false by default it was false whenever I pass it pass this attribute as an HTML attribute so that will be shown and you have your element appearing there so we can trigger it through JavaScript whenever there is this form submission we can turn this attribute to true so this was the element so basically we dealt with very basic HTML custom HTML tag but we can think of our complete application as a set of these small features like you will have just one login button or login tag which will bring login functionality to your website so Polymer Polymer team has already developed very like very useful elements like IronAgeX so IronAgeX is an element wherein you pull in all your you pass in the race data to this IronAgeX and then that data is available to you in your HTML we can think of these and we can always reuse those Polymer elements if we want to have material design with all material animation in them so Polymer team has already developed this paper elements which showcase their material design so if we have to use these material design we just need to include those tags those paper elements into our application and then we are good to go so we can think of these elements as building blocks for a better web and which can be reused we can basically it would be like modularizing your complete web componentizing your web so and it would be so adding a new feature inside is just like pre-existing element available which we can get it from customElement.io elementsPolymerProject.org where people are already developing these custom elements and we can reuse them even if we feel that something is missing we can develop these elements and we can contribute to the community so yeah till now we were talking just about frontend Polymer web component now we will get into how we can use these this feature into our Drupal through our Drupal team so this is not only way to alter our frontend of Drupal we can also get into we can use these components into our modules just we need to go more deep into the render pipeline and then enable our module to use these components and I am sure will need to make some some changes to our render pipeline in Drupal as well to use these this Polymer or web components more efficiently so here we will be talking about how to use Polymer in our Drupal team so basically in our Drupal team first thing I will do is have a directory to hold this element definition which I will create or which are definitions elements directory and in this I have blog.html sitemessage.html and we can have many more elements which we want to use and then we can we can pull in contributed custom elements through bower.json like paper elements, iron elements they are all available from bower and that will go into our bower components and so in our elements folder we have that elements.html wherein we import all these elements which we have to use and like using iron selector, iron pages and then in paper elements to bring in material design to my theme I am using paper button, paper card, paper tool bar so these and then I have also included our sitemessage.html which we defined just now to our theme and then once we bring in all these elements we import to this elements.html now we have to make our html basically our Drupal theme aware of this polymer so for that we include these web components basically this is a set of polyfills for web components or for the specification for the browsers which are not self supporting polymer to support these features and we'll include this in our in the head of our html.html.twig file and we'll include elements.html which holds all the elements definition for us and on including these two files now our theme is aware of all the polymer elements for polymer tags so now we can use it in our page dp or all our template files and then so this is how this is how we add it and then show you the so this is the theme which we which I created this is the site which is using that poly theme which I created using polymer so it has paper card paper drawer paper header panel, paper drawer and so you can see this even it's responsive and you have this drawer coming to hold menu region and then your content reason is in here I'll show this in how I have defined before we look at how we did this in polymer can anyone talk about how difficult is it to integrate a drawer I mean how much effort would it take to integrate a drawer on Drupal website or any website basically anyone is it like 10 lines of HTML code and couple of JavaScript libraries couple of CSS files something of that sort right so this is my page HTML basically this is the paper drawer panel and in here I'm passing the region and primary menu region and then then then this is the main header panel is it ok now so basically this was my paper drawer panel wherein I'm passing a drawer and then there is so paper drawer panel has two components and the main content region and the main content region will hold all our content regions like highlight messages content region and this drawer here holds the primary menu and header basically the logo branding and this is there I did not have to do any any CSS or JavaScript to basically bring in this mobile drawer and this is completely responsive and works fine with my works fine on web and mobile similarly I had used this paper if I go to sessions so this is my local internet was not working so here even I've used paper card and to define this so this is a simple view and I in my view I had just defined this paper card and with I passed the heading the title as a heading and image as a field image content and body body as a card content and so I did not have to do any of CSS for this and this brings in completely so basically the old polymer team has already defined this paper card and which has all these effects of card effects so so basically this is how we can use in our theme this polymer element and there are N number of elements available out there which you can use for like date picker calendar date picker or I was talking about Iron Ajax element there are like if you want to have this power of service focus as well there is this platinum elements platinum SW which allows you to have service focus in your theme that will allow you to cash in stuffs so so basically this is quite powerful and we can this brings in many aspects this gives us more freedom to develop our own element and more freedom over the markup of our theme and this is how you can use polymer in your Drupal theme so now one last thing is that we are using so earlier back in HTML elements.stml elements.stml we define all these elements in here which we have to take care is that these elements so this will bring an overhead to your browser that for each elements the browser has to for each page request browser has to make these many network network requests and so overall your browser will have more things to bring in more of the static network request to do so what we do is once the development is done and we are ready for production so what we do is we use a tool called vulcanize for for merging all these imports so that we have to import a particular single file when rendering it so what vulcanize does is it will bring in all these element definitions from elements.stml and it will merge them all its CSS, all its HTML into a single file we can name it as elements.vulcanize.stml and we pass in that file into our head tag where we are passing elements.stml so basically it's like I'll show you the gulp task which I wrote so this is a vulcanize task gulp task to vulcanize wherein I'm taking the source to be elements.stml and then passing it passing it vulcanized actually the vulcanize file to this elements.vulcanize.stml so now once I'm done so this is my elements.stml and bones we are in poly theme and I'll run so what actually this vulcanize will do is it will give me elements.vulcanize.stml which has all which it will have all the elements definition which I have included into my theme and so only this will be included and so basically we don't have to do those many HTML requests for that because if we are just loading this elements.stml in our production site this will have too many HTML requests and then this is not desirable this will make your site very slow and apparently vulcanize.stml will be fine enough so this is one task in our Gulp for our Gulp integration when we talk about browser support with polyfills Polymer works in these browsers like all these specs template.stml imports custom elements Shadow DOM is supported in Chrome, Firefox i10 plus Safari Chrome and Chrome Android and then Safari iOS so I think this I guess covers almost all browsers which we generally work on I don't think now we have even even Brupal it doesn't support we are good with this but if you want to know more about native browser support there is this canayuse.com which tells us whether this web component feature is there in the browser natively or not almost all modern browsers have it and Chrome has all features for that if you want to look for the resources so the site which I just showed which has this polytheum nola.curie42.net and the codebase is hosted on github.com slash curie42 slash nola underscore dcp16 and so if you want to know more about polymer that's polymerproject.org webcomponent.org these have good resources to get you started and if you like videos of this polycast by Rob Dotson is a good way to start with polymers so I guess that's it any questions guys no questions thank you for listening to us patiently patiently please evaluate our session at the URL given over there we would love to read your comments thank you