Building the web with Polymer
Webcomponents. Yeah that’s right, the hottest of topics among web developers all over. Every Frontend Framework out there seems incomplete unless the docs have a webcomponent section.
All the major JavaScript frameworks out there provide an implementation of web components, in thier own way. Be it AngularJS, EmberJS, ReactJS etc. all of them provide a way to package the code into reusable chunks which with little configuration can be plugged into other projects.
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 gets a bit blurry. All of the components created are dependent on these frameworks.
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?
The one word answer to this is YES. We can create components that can be integrated with any of the frameworks and can be packaged and distributed easily.
This is where POLYMER jumps in. Polymer is a Google project which aims to get web components right. Components which can be plugged into any web based application, with any of the frameworks like Angular, React, Ember etc.
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 frontend frameworks.
Polymer does just that, it allows us to create elements which can be used just like any already existing elements.
Using Polymer elements
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 which has ready to use awesome array of components which include the Material design inspired Paper elements also. Be sure to check them out.
To use them, simply download the component package and include it in your webpage like this:
<link rel="import" href="bower_components/paper-button/paper-button.html">But we will also need to link to the polymer’s webcomponent.js file to regiter these awesome elements to the DOM.
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>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.
Creating web components
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.
Installing polymer
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 as it is the easiest method.
bower install --save Polymer/polymer#^1.0.0With this install we will aim at a directory structure like follows:
[js]
– bower_components
– | webcomponentjs // `webcomponents.js` – to execute polymer components
– | polymer // `polymer.html – to create custom components
– components
– | ourCustomComponent.html // Our custom component is in here
– index.html // We’ll test our component here
[/js]
Wriring our component
Now we’ll start creating our custom component using the ourCustomComponent.html file. There is a predefined syntax to create a Polymer element:
First we import the polymer.html to load polymer
<link rel="import" href="../bower_components/polymer/polymer.html">Below that we provide the definition of our element. We define how it should look, behave, and accessed by the outside world.
// the <dom-module> element defines our component.
<dom-module>
<script>
// This call to polymer registers our element with the DOM
Polymer({
// The name with which this element will be invoked
is: "custom-elem",
// custom properties
properties: {
data: {
type: String,
value: "Test"
}
},
// event handlers to define behaviours
handleClick: function() {
// using properties
this.data = 500;
console.log("clicked");
}
});
</script>
</dom-module>
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.
Templates
We can specify a template to go with our component, a-la Angular directives. So let’s go ahead and specify our template. We do so by adding a <template> tag within our <dom-module> definition.
<dom-module>
<template>
<label>This is ourCustomComponent</label>
<button>click me</button>
</template>
<script>
...
...
</script>
</dom-module>
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.
Events
We can bind event in different ways, by using a listeners object, or by using annotated setup. We’ll be using the second method as it eliminates the need to add id attribute just for the sake of binding events.
<dom-module>
<template>
<label>This is ourCustomComponent</label>
<button on-click="handleClick">click me</button>
</template>
...
</dom-module>
This method is pretty similar to some of the JavaScript 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?
Data binding
If you’ve worked with Angular or Ember, then you’ll feel right at home. Polymer uses the same {{}} 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 {{}} syntax means it is two-way binded, but we call also use [[]] 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.
So let’s use our property data to be displayed in our component.
<dom-module>
<template>
<label>This is ourCustomComponent - {{data}} </label>
<button on-click="handleClick">click me</button>
</template>
...
</dom-module>
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.
So there you go, you’ve created a web component that can be used with any of the JavaScript frameworks, without breaking the web. The example above was extremely simple, but you can browse through the Elements catalog to see more interesting ones.
In the next one, we’ll deep dive through Polymer and look at scoped styling and other interesting and advanced topics.
Hope you liked this overview into Polymer.
Till next time,
Ciao.
Hi George,I read your article and I loved it. Good work mate. Keep it up. Regarding your qtsiueon why did I need to copy and paste?Answer: Well the only reason behind copy and paste was that I joined a project in between the spring release we had a release in 3-4 days and I was new to Grails and project as well. I was told by some old team member that there is a functionality that has been implemented you need same functionality for a different page. Now there are two ways to do this. One is to copy and paste and other is as you suggested to extract the common functionality for reuse. But that needs a kind of design change and also change in test classes and addition of new tests. Which takes time. This is not the first time I have come across such situation. But I completely agree with you. Always try to avoid copy and paste even though you are at your best in this act! Thanks for your suggestions and wonderful article hope to see some more from your side.