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.
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 preload, fade, 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
- Paper-Elements
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
animatedto 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
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.
 which were skeleton components that...){kind=link}
0 comments:
Post a Comment