Before we get started there is one thing we have to know: the latest version of Polymer at this moment is 0.5.4 and it was launched on January 28th, 2015 and is still in developer preview.

This should give us an idea about the stage of this technology and make us ask ourselves if it really is ready to be used on production?


Luckily, someone from Polymer thoughtfully answered that question:

Polymer is currently in “developer preview.” However, despite the label many people have already had success using Polymer in production. Although things might still change, we encourage developers to take Polymer out for a test drive.

That being said..

 

What is Polymer and what can we do with it?

Polymer is both a development library for web components, which uses native implementations where available and polyfills* where not, and a UI library with common elements and patterns built using its own technology.

*A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.

In other words, Polymer’s main parts are: Web Components and Material Design.

Web components are a suite of connected technologies aimed at making elements reusable across the Web.

The suite:

  • Custom Elements
  • Shadow DOM
  • HTML Imports
  • Templates

You can find out more about web components here.

Let’s quickly go through the web component suite and see how it works.

Custom Elements

They allow us to define our own new HTML tags, or to extend already existing ones.

Their purpose is to help us write meaningful, maintainable and easy to read code using elements that have attached to themselves custom functionality, a basic API per element.

Here you have a basic example of a custom element.

If you want to learn more about custom elements, follow this link.

Shadow DOM

It solves the encapsulation problem! => they can be an alternative to iframes => Great Success for web widgets!

The magic explained :

  • Container page’s javascript/style can’t accidentally modify your component;
  • Page’s IDs can’t overlap with component’s IDs;

Shadow elements can be styled – click Here to see how.

Now, let’s see the shadow DOM in action. Follow this link, please :).

If you check your console on that example, you’ll see how the shadow content is inaccessible from the outside, although the browser renders our desired result.

HTML Imports

This is how you include your elements in your page.

Of course there’s much more to learn about it. Just go here.

 

Templates (<template>)

Contains the markup intended to be used later (the inert DOM structure ). This means that this DOM structure, although parsed by the browser, is not rendered.

See templates in action here.

Want to learn more? There you go.

 

Material Design

Following the next three principles:

  • material is a metaphor
  • bold, graphic, intentional
  • motion provides meaning

it’s more revealing to us by experiencing the feeling than to think too much about it. So…

 

I feel i can’t close this chapter without telling you about materialize.css.

“A modern responsive front-end framework based on Material Design” they say. I’ll leave it to you to decide this, so give it a try.

 

Polymer – “Everything is an element”

As I earlier said, Polymer embodies a development library and a UI library, and we can clearly see this from how it’s elements are grouped in the two main packages: the Core elements and the paper elements.

Here you have the list of core elements.

and

here you have the list of paper elements.

Play with them so you can get a better feeling about what they’re useful for.

If you’re not satisfied with what Polymer is already bringing to the table, you can create your own element anytime. And this is a fairly easy thing to do!

OK, so how do I get started?

  1. First thing you’ll need is a web server. You need it so you can import the template files without upsetting the browser.
  2. Get the Polymer files. One way to do this (and the way I prefer) is to install the package with bower. This infers that you have to install bower first if you didn’t already do this. Get started here. After doing this, run the following command:
    bower install --save Polymer/polymer

    This will get you the Web Components polyfill library. For other packages you’ll want to use, you’d have to install them separately.

If you want to use an existing Polymer element:

  1. Install the corresponding package. You can do this through bower, running a command like this:
    bower install Polymer/<whatever-package>

    You can find the suitable command for each package on the polymer-project components website.

  2. Include and use it. After installing the package, to use the component you’d have to include the template in your html page.
    <link rel=”import” href=”bower_components/<whatever-package>/<whatever-package>.html” />

    Using the component could not be easier. Just add the component tag in your page :

    <whatever-element></whatever-element>

     

If you want to create your own element

  1. Create the element file. What you have to know is that the element name has to be the same as the file name and this name has to include a hyphen . For example if you’d want an element called “banana-tree”, the file has to be named “banana-tree.html”.
  2. Create your element. You can find a simple tutorial on how to create a basic element here. You’ll see here the great powers of Polymer elements (like styling handlers or two way binding). Be sure to have used them 100%.
  3. Include it and use it. Do this just like you include an already existing Polymer element. See above.

It’s that simple!

Even though I tried to keep it short and simple, I know that looking through all the external references in this article can take some time. If you are part of the generous people who gave some of their time to get to this paragraph, I thank you for that and I hope the information matched your expectations. If so, sharing this article is highly appreciated.

 

Have fun creating new useful web elements!