{"id":21451,"date":"2015-06-22T13:01:57","date_gmt":"2015-06-22T07:31:57","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=21451"},"modified":"2015-07-09T15:12:54","modified_gmt":"2015-07-09T09:42:54","slug":"building-the-web-with-polymer","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/building-the-web-with-polymer\/","title":{"rendered":"Building the web with Polymer"},"content":{"rendered":"

\"Polymer<\/p>\n

Webcomponents<\/strong>. Yeah that’s right, the hottest of topics among web developers all over<\/a>. Every Frontend Framework<\/i> out there seems incomplete unless the docs have a webcomponent<\/code> section.<\/p>\n

All the major JavaScript frameworks out there provide an implementation of web components, in thier own way. Be it AngularJS<\/code>, EmberJS<\/code>, ReactJS<\/code> etc. all of them provide a way to package the code into reusable chunks which with little configuration can be plugged into other projects.<\/p>\n

But most of these frameworks miss one common use-case, i.e the components created can only be used with frameworks that was used to create the component in the first place. This is where the essence of webcomponents<\/code> gets a bit blurry. All of the components created are dependent on these frameworks.<\/p>\n

The question then arises on how to tackle such limitations, of being dependent on frameworks, on creating components that can work with any framework out there. Is this actually possible?<\/p>\n

The one word answer to this is YES<\/code>. We can create components that can be integrated with any of the frameworks and can be packaged and distributed easily.<\/p>\n

This is where POLYMER<\/code> jumps in. Polymer is a Google project which aims to get web components right<\/i>. Components which can be plugged into any web based application, with any of the frameworks like Angular, React, Ember etc.<\/p>\n

Polymer is not another framework, in fact it sits a layer below all these frameworks. It is used to create actual HTML elements, which are independent of the implementation on top of them. Take for example a simple HTML button<\/code>, it works on every browser, has roughly the same visuals and functionality. A button on the web can work with any of the frontend frameworks.<\/p>\n

Polymer does just that, it allows us to create elements which can be used just like any already existing elements.<\/p>\n

Using Polymer elements<\/h2>\n

There are already huge no. of custom web components on the interwebs which we can simply download and include in our projects. Infact there is a polymer marketplace<\/a> which has ready to use awesome array of components which include the Material design<\/code> inspired Paper<\/code> elements also. Be sure to check them out.<\/p>\n

To use them, simply download the component package and include it in your webpage like this:<\/p>\n

<link rel=\"import\" href=\"bower_components\/paper-button\/paper-button.html\"><\/code><\/pre>\n
But we will also need to link to the polymer’s webcomponent.js file to regiter these awesome elements to the DOM.<\/p>\n
<script src=\"bower_components\/webcomponentsjs\/webcomponents.min.js\"><\/script><\/code><\/pre>\n
We’ll look at where do we get these polymer files from in the next section. But this is all it takes to use an off-the-shelf web component written in polymer. If you open your webpage inside a browser, you should see the component you included.<\/p>\n
Creating web components<\/h2>\n
Getting started with Polymer is a breeze. It is extremely well documented, there are a lot of examples. You can get detailed reference and documentation on the Polymer website<\/a>.<\/p>\n
Installing polymer<\/h3>\n
In order to create web components with polymer, we need to have the necessary dependencies, which we can easily get numerous ways. In this post we’ll be using bower<\/code> as it is the easiest method.<\/p>\n
bower install --save Polymer\/polymer#^1.0.0<\/code><\/pre>\n
With this install we will aim at a directory structure like follows:<\/p>\n
[js]
\n– bower_components
\n– | webcomponentjs  \/\/ `webcomponents.js` – to execute polymer components
\n– | polymer         \/\/ `polymer.html – to create custom components
\n– components
\n– | ourCustomComponent.html \/\/ Our custom component is in here
\n– index.html         \/\/ We’ll test our component here
\n[\/js]<\/p>\n
Wriring our component<\/h3>\n
Now we’ll start creating our custom component using the ourCustomComponent.html<\/code> file. There is a predefined syntax to create a Polymer element:<\/p>\n
First we import the polymer.html to load polymer<\/p>\n
<link rel=\"import\" href=\"..\/bower_components\/polymer\/polymer.html\"><\/code><\/pre>\n
Below that we provide the definition of our element. We define how it should look, behave, and accessed by the outside world.<\/p>\n
\/\/ the <dom-module> element defines our component.\r\n<dom-module>\r\n<script>\r\n\t\/\/ This call to polymer registers our element with the DOM\r\n\tPolymer({\r\n\t\t\/\/ The name with which this element will be invoked\r\n\t\tis: \"custom-elem\",\r\n\r\n\t\t\/\/ custom properties\r\n\t\tproperties: {\r\n\t\t\tdata: {\r\n\t\t\t\ttype: String,\r\n\t\t\t\tvalue: \"Test\"\r\n\t\t\t}\r\n\t\t},\r\n\r\n\t\t\/\/ event handlers to define behaviours\r\n\t\thandleClick: function() {\r\n\t\t\t\/\/ using properties\r\n\t\t\tthis.data = 500;\r\n\t\t\tconsole.log(\"clicked\");\r\n\t\t}\r\n\t});\r\n<\/script>\r\n<\/dom-module>\r\n<\/code><\/pre>\n
Until now we have defined and registered our element, we have given it an event handler as well. But what will we see, when we try and use it? Well, nothing of-course. Since we haven’t yet defined what all will make up our component.<\/p>\n
Templates<\/h3>\n
We can specify a template<\/code> to go with our component, a-la Angular<\/code> directives. So let’s go ahead and specify our template. We do so by adding a <template><\/code> tag within our <dom-module><\/code> definition.<\/p>\n
<dom-module>\r\n<template>\r\n\t<label>This is ourCustomComponent<\/label>\r\n\t<button>click me<\/button>\r\n<\/template>\r\n<script>\r\n\t...\r\n\t...\r\n<\/script>\r\n<\/dom-module>\r\n<\/code><\/pre>\n
This will render a nice label and a button when we use our component. Wait but it does nothing (as of now). Next we’ll use the event handler we already defined to make our component do something.<\/p>\n
Events<\/h3>\n
We can bind event in different ways, by using a listeners<\/code> object, or by using annotated<\/code> setup. We’ll be using the second method as it eliminates the need to add id<\/code> attribute just for the sake of binding events.<\/p>\n
<dom-module>\r\n<template>\r\n\t<label>This is ourCustomComponent<\/label>\r\n\t<button on-click=\"handleClick\">click me<\/button>\r\n<\/template>\r\n\t...\r\n<\/dom-module>\r\n<\/code><\/pre>\n
This method is pretty similar to some of the JavaScript<\/code> frameworks out there, thus it makes it much easier to grasp and use. But wait, we also defined a property into our definition, how do i use it?<\/p>\n
Data binding<\/h3>\n
If you’ve worked with Angular<\/code> or Ember<\/code>, then you’ll feel right at home. Polymer uses the same {{}}<\/code> notation to bind properties. But there is a difference in Polymer, the data bound can either be two-way binded, or one way binded. The {{}}<\/code> syntax means it is two-way binded, but we call also use [[]]<\/code> to use one-way binding, i.e any updates from the child are not notified to the parent, it only happens top-down by default. We can customize it accordingly from bottom-top, single binding, double binding etc.<\/p>\n
So let’s use our property data<\/code> to be displayed in our component.<\/p>\n
<dom-module>\r\n<template>\r\n\t<label>This is ourCustomComponent - {{data}} <\/label>\r\n\t<button on-click=\"handleClick\">click me<\/button>\r\n<\/template>\r\n\t...\r\n<\/dom-module>\r\n<\/code><\/pre>\n
Now if you run your webpage, it should display the default value inside the label, and when the button is clicked the value should automatically update.<\/p>\n
So there you go, you’ve created a web component that can be used with any of the JavaScript<\/code> frameworks, without breaking the web. The example above was extremely simple, but you can browse through the Elements catalog<\/a> to see more interesting ones.<\/p>\n
In the next one, we’ll deep dive through Polymer and look at scoped styling<\/code> and other interesting and advanced topics.<\/p>\n
Hope you liked this overview into Polymer<\/code>.
\nTill next time,
\nCiao.<\/p>\n","protected":false},"excerpt":{"rendered":"
Polymer is not another framework, in fact it sits a layer below all these frameworks. It is used to create actual HTML elements, which are independent of the implementation on top of them. Take for example a simple HTML button, it works on every browser, has roughly the same visuals and functionality. A button on the web can work with any of the front end frameworks. <\/p>\n","protected":false},"author":85,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1},"categories":[1439,1185],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/21451"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=21451"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/21451\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=21451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=21451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=21451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}