Google Polymer 1.0 | Now ready for Production

by - 11:50 PM

Google Polymer is production ready now  

Before Polymer provided two class of components (core-elements) which were skeleton components that cover head/body/foot of pages covering structure of the application. Another set of components were paper-elements which was designer class of components supported by Google Material Design standards.
With Polymer 1.0, Google have clearly classified components in seven different categories which makes it easy for developer search and look for right components. The core-elements are now called as Iron-elements, click the picture below to go custom elements page.

Polymer 1.0 is written to be fast and lightweight in nature is thirty five percent (35%) faster than early developer preview release and require three times less coding. Polymer replaced the old shadow dom polyfill with new Polymer Shim which is very lightweight, it has new styling of data-binding which lets the user to write significantly less code and produce more results. With Polymer 1.0 the components have mechanism of sharing behavior between them, now they respond to cross events smoothly like never before.Below is the architecture and model of how the Polymer components works together with existing framework

In Google I/O,  Google have launched stable release of Google Polymer, this time, Google have broadly categorized components which (almost) every web application need. Google divides them into groups: Iron Elements, Paper Elements, Google Web Components, Gold Elements, Neon Elements, Platinum Elements, and Molecules.

Iron Components

Iron Elements is a collection of basic elements. These basic elements are what we normally use to build a web page such as an input, form and image. The difference is Polymer adds some extra powers to these elements.
Iron elements are all prefixed with iron-, for example <iron-image>, which is used to display an image. The <iron-image> element has been equipped with some extra attributes that we cannot apply in the regular <img>element. We can, for example, add preloadfade, and placeholderattributes.
Google Web Components 
 The Google Web Components are special elements that deals with  google services such as Google Maps, Youtube and many more. Elements in this group make interacting with Google services just a few lines away.
The following is an example to show a Google Map using the <google-map>element.

Youtube Element offer one line code to integrate with youtube to any page, with lots of fancy attribute to support manipulation with youtube embedding, including chrome-less player

As Google introduces Material Design, to add material element, simply add <paper-material> element. Primarily paper element are supported by two key attributes 
  • elevation  to lift the shadow and enforce elevation
  • animated  to apply the elevation changes

How do I get started ?

Read here, to learn how to start with your first polymer project. You have to make sure you have bower (package manager) installed. Bower download all components for your to jump start and download all dependencies.
bower install --save Polymer/polymer#^1.0.0

After successfully download,  import webcomponents.js in your project and then start importing html components as needed in the project.

Project Fabric : (In Progress)

Over the period of time, I decided to built a library manifesting collection of Polymer Components to showcase the usage. I am open for developers to fork it and jump start on project and please commit if you want to add a new component to showcase. At the same time, stay tuned for Salesforce component collection built on top of Salesforce, which will be released fairly soon as a new project. Start playing with Github here 

Polymer Editors : 

Google Chrome Developer Editor

Google I/O In the development phase at the moment, but the chrome developer editor is powerful IDE release by Google and I find this IDE to be powerful from chrome application developments (like web app and chrome extension) but now chrome IDE supports Polymer Projects and comes with implicit servers

Ele : Online WebComponents Builder 

A powerful online and beautiful tool for building HTML component online, wired to support Polymer at heart.

Official Polymer Builder :

As I described in the previous post before, Google Provides official builder that leverage drag-drop facility to web-components, get started here

Polymer Starter Kit :

In Google I/O, Polymer Team launched Polymer Starter Kit, for newbies to play with Platform. It is quick and easy and comes with three packages, focusing on beginner, intermediate and for yomen user. If want to learn how to use Yomen, here my pervious post here.

PolyCast : Official Polymer Youtube Channel :

I also recommend following these coolest of channels shown hereStay tuned for more update on Polymer with Salesforce in coming releases !!

You May Also Like