Getting Started with Google Polymer - Part 1

Click to play with this framed app, designed on Google Polymer, following material design concepts

See the Pen Material Design Animation Intro by Harshit Pandey (@oyecode) on CodePen.

                                            Courtesy - @PolymerProject 

What is a Web Component Architecture and why we need Polymer ?

To understand the polymer fairly well, lets understand the architecture behind. Google introduced Polymer to simplify web-development using collection of units called Web-components. Ideally, if you plugin these components to your web application, you can speed your application development to a significant level.

Now as we know, building a modern day web application require lot of resource ranging from javascript framework, design frameworks and tons of other web tools. Clearly, the complexity of these resources increases, as the application scale up over the period of time, which later becomes   harder to maintain

Google aimed to solve this problem,  by bridging the gap between rich functionalities of applications  and application resources, without a need of extra libraries through web-components. Google acclaim that, web-component driven development is likely the future of web.

What is a web component ?

In the last W3C release, definition of a web component is expained, and basically a web-component comprise of five specifications (Custom Elements, Templates, Shadow DOM and HTML imports) 

Custom Elements : the custom elements allow you create your own HTML tags like this : say I have defined custom tag that show Google login form on any page.

<google_login appid='xyz'></google-login>

Shadow Dom - allows you create encapsulate structure inside a DOM element

Html Imports - packages custom elements and a package may include HTML, CSS and JavaScript

Template - binds the data with JavaScript elements and extends functionality of traditional template

Understanding Polymer.js and Platform.js

Polymer is basically divided into four parts :

1. Native - Features available in currently all browsers 
2. Foundation - Polyfills that implements all features (combining web-components (Custom-Elements, Templates, Shadow-DOM, HTML-Import) adds support in browsers with features that are not natively supported.
3. Core  (Platform.js) - required part, necessary to perform capabilities provided by native and foundation layers
4. Elements - building blocks that you use to create application

Check this image for clear explanation - read more about Polymer Architecture here 

Credit : Google Polymer Project

Let us built first Polymer application, but I would like to mention that, before I released this post, Polymer documentation page, do not have well document application or same code, but now they have couple of  application with step by step tutorial is available for free and is live.
I recommend going to their tutorial page, to built your first application, as elaborated on Google Polymer Project page.

Since, I have developed the application already, following the instructions in the tutorial ,  I am sharing my Github repository,  just fork my code to see the application working right away.

Download or Clone Repository from  https://github.com/mailtoharshit/Oyecode_Polymer

Please follow these steps to run the code

•  Fork the code to your local machine from Github 
• Go to Shell on Mac and Type  -  python -m SimpleHTTPServer
• Open the browser and type : http://localhost:8000

In my next post, I would be explaining how to jump start polymer with Salesforce, stay tuned for next update, should be out pretty soon

Check out this amazing video by favorite developer advocate from Google  +Eric Bidelman where he explains how to use Google Docs to populate google map with bare minimum code and get more components here at http://customelements.io

Check out about Material design in this codepen snippet

See the Pen Dribbble debut in Polymer & Material Design by Harshit Pandey (@oyecode) on CodePen.