Web Components (Part 5) – Polymer

polymer 0.5 web components
Mon Sep 08 2014

Introduction

Now that we’ve introduced the basic concepts of Web Components it is time to check out Polymer. You should have noticed till now that the browser support for Web Components is at the very best, scratchy. => http://jonrimmer.github.io/are-we-componentized-yet/

They are only fully compatible with Chrome at the moment and we don’t know what IE, Safari will do with them in the future. Internet Explorer has them as a technology “in consideration” and we don’t know what does Apple have in mind. This is logical as most of these technologies are in the “Working Draft” state by W3C.

Polymer is brought to us by Google so you know it won’t go anywhere anytime soon and it is backed up by talented individuals. Also, I’ve noticed that they are heavily invested in this project. The goal of this project is to bring the component features on most browsers today => http://www.polymer-project.org/resources/compatibility.html

It is built on platform.js which brings a lot of browsers (IE 9+) up to date with all of the technologies seen in the previous blog posts. So you can immediately see here the first limitations that Polymer has concerning browser support.

You can checkout the polymer project at the following link => http://www.polymer-project.org/

polymer

The basic technologies it wants to polyfill are Custom Elements, Shadow Dom, Template Elements,  HTML imports, Mutation Observers, Model-driven Views, Pointer Events, and Web Animations. I find this a fantastic project as it basically manages to upgrade most modern browsers to handle very complex and sophisticated behaviors. On my experience it does a very good job on Chrome, Firefox. On IE there are some glitches on performance although it generally works fine and on mobile browsers you may find a lot of issues concerning performance.

I’ve started this blog post in a not so optimistic manner because usually when a promising framework is launched a lot of “this will fix/cure everything” voices appear. Every framework has its advantages and disadvantages and we have to know when and why we use them. So, having all of these in mind let us review this ambitious project.

Everything is an element

The main goal of Polymer as of Web Components is to create encapsulated re-usable components to build applications. These components have a well defined scope and events as well.

Let us dive in and create our first element!

Imagine HTML as our base.

html_block

We’ll create an element, attach it to our page and re-use it. Let us create something very standard that we would like to use again and again. A popup looks like a good example.

To create a popup the standard train of thought would be to find a nice jQuery plugin to make it happen or write some custom html/css/js and make is as extensible as possible.

What if I could create an element though and just add this on my page?

<my-popup>
 <popup-button>Popup 1</popup-button>
 <popup-content>Hi this this popup 1</popup-content>
 </my-popup>

 

and use it anywhere anytime on any page.

My first step would be to create an external html file and name it popup.html

In the popup.html file I’ll add the following block of code.

You can see that it has these basic parts

<polymer-elelement name=”my-popup”>….

which is responsible for registering the my-popup element on our page.

<template>….

which is responsible for wrapping the html that my element will have. This will be located in the shadow dom.

<content select=”popup-button”>….

which is an insertion point. The insertion point will render the parent html nodes it finds and then render that part from the element.

Polymer(‘my-popup’, {

which will add events on our element.

The full block of code is below:

<script src="http://bstavroulakis.com/demos/webcomponents/form-creator/Components/platform/platform.js"></script>
<script src="http://bstavroulakis.com/demos/webcomponents/form-creator/Components/polymer/polymer.js"></script>
<link rel="import" href="http://bstavroulakis.com/demos/webcomponents/form-creator/Components/wc-icon/wc-icon.html" />
<polymer-element name="my-popup">
 <template>
 <style>
      (CSS here)
 </style>
 <div id="popup-button" on-click="{{openPopup}}">
       <a href="javascript:void(0)"><content select="popup-button"></content></a>
 </div>
 <div id="popup-wrapper">
       <div id="popup-inner">
             <wc-icon on-click="{{closePopup}}" class="right icon" icon="icon-close"></wc-icon>
             <content select="popup-content"></content>
       </div>
 </div>
 </template>
 <script>
       (function () {
             Polymer('my-popup', {
                   closePopup: function () {
                         this.shadowRoot.querySelector("#popup-wrapper").style.display = "none";
                   },
                   openPopup:function(){
                         this.shadowRoot.querySelector("#popup-wrapper").style.display = "block";
                   }
             })
       })();
 </script>
</polymer-element>

 

If you’re extra careful you’ll notice at some part that I have a <wc-icon>… element in my <my-popup> element. This is a custom element I’ve created that loads an icon whenever needed. The <wc-icon> element has the same structure as above with the <polymer>, <template> tags e.t.c.

Also, did you notice the <script> tags on the top of the page and the <link> tag? These are responsible for loading any dependencies of the components and they are loaded once for all of the components necessary.

components

 

So basically we’ve created a <wc-icon> component and added that component in the <my-popup> component.

These re-usable, encapsulated blocks are amazing!

You can checkout the demo over here => http://bstavroulakis.com/demos/webcomponents/polymer/index.html

Conclusion

Hopefully at this point you have a clear view of Polymer’s basics. Of course we’ve only scratched the surface as Polymer has numerous events, attributes e.t.c to help us on our application and element’s lifecycle.

You can check out all of the extra features over here => http://www.polymer-project.org/docs/polymer/polymer.html

We’ll try to grasp some of the more advanced concepts in the next post where we’ll create a form creator with the use of Polymer.

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!