In May 2013 Google launched Polymer Web Components. Polymer is a library utilising web components for building elements and applications. Polymer is a new kind of thing it doesn’t paper over the platform because the platform doesn’t need it  anymore.

Wait isn’t polymer a framework?

• With polymer the framework is dom.
• Scoping is provided by shadow den.
• There is a ton of great js frameworks out there now why choose polymer?
• Infact, too much talent is being spent papering over a previously insufficient platform its time to change that.
• so whats with all of these polyfills.

What are polyfills?

• polyfills are a bridge to the future web platform , available today.
• polyfills are a lot of work.
• polyfills are not polymer even though we built them.
• polyfills focus on compatibility not performance.

Polymer is a sugaring layer to build your own elements and apps.

web components are awesome but low level by design using them together on their own is hard polymer makes it easy.

Polymer is opinionated

• There will be other opinions.

Components all the way down

• Separations of concerns is the key to scalable applications.
• Small reusable components compose into larger components which decompose into applications.
• scoping enables composition.
• shadow dom is about scoping not security.

Everything is a element

• Custom elements are the components of polymer and we use them everywhere.
• UI elements
• API’s

Yeah using polymer you can less code

• Don’t repeat yourself.
• Only write code unique to your app or element.
• Databinding greatly reduce code and is generally awesome.

Layers of polymer

There are four layers of polymer

1. Elements:Reusable custom elements.
2. Polymer:A opinionated way to work with web components.
3. Platform:web components polyfills to all modern browsers.
4. Native:The current browser landscape.

Two ways to work with polymer

1. Using elements
2. Creating elements.

Using elements:

<core-overlap>

<core-menu>

<core-list>

<core-ajax>

<core-layout>

These are some of the using elements of polymer.

Polymer already has 100 elements defined already .you can use that elements as

• Get the code -bower,zip,github etc
• Include platform.js
• Import the element
• Using the element

Creating elements:

Declarative custom element definition:Define custom elements Declaratively using <polymer-element>

<polymer-element name="my-counter" attributes="counter">

Markup and style encapsulation :Shadow dom encapsulates you elements internals.Template markup is compartmentalized and styles don’t leak in and out.

<template>
    <style> /*...*/ </style>
    <div id="label"><content></content></div>
    Value: <span id="counterVal">{{counter}}</span><br>
    <button on-tap="{{increment}}">Increment</button>
  </template>

Declarative data binding:properties of the elements can be bound directly into the view ,with robust support for  expressions.

counter: 0,

Declarative event binding:Event handlers can be bound to functions on the element declaratively using on-events  attributes .

increment: function()

Automatic node finding:Any template children can be referenced by id on this.$,eliminating boilerplate query selectors.

this.$.counterVal

This article  just covers the introductory part of polymer will be publishing articles in series on polymer stay connected.

Thanks