Getting started with Google Polymer

Well! they say “Experience is the mother of wisdom”, therefore, I being a recent addition to The Polymer Fandom (with a two-month exposure) would like to walk you through the nuts and bolts of Polymer.

So, without any Mumbo Jumbo talk, let’s begin with the basic definition of Polymer!

What is Polymer?

Polymer is a JavaScript library used for creating web applications using Web Components.

mkk

Now, you can think of Web Components as reusable elements that can be used in web pages or web apps. That means you can also use it with other JavaScript libraries. Polymer is like a “lego block” which can be used to build anything, almost anything.

Why Polymer?

Suppose you want to make a study table for yourself. Here’s what you’ll do: Take a log of wood cut into pieces according to your requirement, construct the table top and legs, flatten the pieces and join them all.

Quite a long process, no?

How about you just get the pieces and assemble the table? Super simple.

That’s how polymer works. You want to use some component, import it and use it, you don’t need to know how it works. You want to use it with Angular, React or Vue or some other JS library, just import it and use it.

4 main features of Web Components

• HTML Imports: It makes easier to import HTML documents. Similar to importing CSS documents.
• Custom Elements: It helps developers to create their own elements.
• HTML Template: It holds the content that is not to be rendered when a page is loaded but may be instantiated during runtime using JavaScript. In simple words, it contains HTML tags that is not rendered when a page is loaded but can be rendered later using JavaScript.

• 
  

  Shadow DOM: Shadow DOM? What is it? I’ve just heard about the DOM.Shadow DOM inserts a new node to the DOM called shadow root and creates a boundary between the DOM and shadow root, so that the element(Web Component) inside the root remains modular and separated from the main DOM. Didn’t understand yet? No worries. I’ll explain it below.

How to use Polymer?

Make sure to install Node.js, npm, Git, Bower and Polymer CLI. You can follow the set up guide on the Polymer website.

Now, let’s get into some code.

Here’s the live demo of what we’re gonna make.

<link rel="import" href="../polymer/polymer-element.html"><link rel="import" href="../paper-input/paper-input.html">

The link rel="import” is an HTML import. This imports polymer library and a custom element named paper-input.

<dom-module id="basic-example">

• The <dom-module> wraps the custom element which includes the styling, scripting and markup of custom element. The id attribute is used to include the element into the main document tree.
• <template> defines the structure and styling of the element.
• The styling inside the <template> defines the styling for the element.
• The [[name]]is a one-way bind. It’ll display whatever will be the value of ‘name’ property.
• <paper-input>is a custom element which is basically a text-field. {{name}}is two-way binding which means if we type something in the input, it’ll immediately reflect in the ‘name’ property and change the value of the ‘name’ to whatever value is typed.

<script>class BasicExample extends Polymer.Element{static get is(){return 'basic-example';}static get properties(){return{name: {type: String,value: ""}}}}customElements.define(BasicExample.is,BasicExample);</script>

• This is ES6 class syntax inside <script> tag.
• static get is(){return ‘basic-example';} gives element a name, so that the browser can recognize it when we use it in tags. This name must match the id given in the element's template definition <dom-module id="basic-example">.
• customElements.define(BasicExample.is,BasicExample); here the custom element API calls the define method to register the element named basic-example whose class name is BasicExample.

Now, our custom element is ready to be used anywhere. All you need to do is import this custom element in the file in which you want to use this element and that’s all.

For instance if you want to use this element in the file named index.html, then you’ll import it and use it as follows:

<link rel="import" href="path-to-element/basic-example.html"> <basic-example></basic-example>

Back to Shadow DOM

It’s completely fine if you didn’t yet understand what Shadow DOM is. It took me a lot of time to understand what Shadow DOM is. Let me explain this with help of an example.

Suppose you made a custom element without Shadow DOM with some nice CSS. And some other developer wants to use your element in his/her web applications. If the styling class of his/her applications matches with the ones in your web component then it’ll override the styling in your element. That’s really bad, no one wants that. Why would any developer on earth import web component and then spend his/her time improving it’s styling? And that’s the main reason to use Shadow DOM.

In other words it encapsulates the styling, scripting and structure of custom elements. To make things even more clear I added the picture below.

Here’s a screenshot from the Polymer website. pw-shell is some component, all it’s styling, structure and scripting is inside the shadow root.

What’s next for Polymer?

Last week in the Polymer Summit the following things were announced:

• Polymer 3.0 announced.
• Use of NPM and yarn, which means no more bower.
• Use of ES6 modules, which means no more <link rel="import">.
• An easy migration tool for migrating code from Polymer 2.0 to 3.0.

The new YouTube is the biggest project till now developed using Polymer.

By now, you would have at least got an idea about Polymer and how it works.

So, give it try here and build you own custom elements.

**Thanks for reading this article. Please hit the Clap button if you like it.**Connect with me on LinkedIn.Follow me on Twitter and Quora.