Google Polymer: The Future of Web UI Frameworks

Google brought material design as new unified design paradigm for Android, Chrome and Web based apps. The core idea behind Material Design is to unify the motions, visuals and interaction designs across various platforms and devices. The material design is developed with the aim of bring the feel of ink and paper (tactile material) to the virtual world.

The Polymer library is basically a set of polyfills which can be used to create Web Components. Polymer library provides the underlying structure for defining, creating and rendering complex components in a  simple manner.  It uses the tag based declarative approach to use the prebuild components, thus making the life of developers easier. This approach helps in multiple ways like:

•  For developers the naming convention becomes easy as Tag Style conventions are used
• The complex controls are easier to use as using a custom control just requires declaring a tag.
•  A  suite of custom controls are available at user’s disposal and the customizing these controls is also supported.

Polymer and material design can be seen in action in Topeka app. For a detailed experience of Topeka please use the following link Topeka(https://www.polymer-project.org/apps/topeka/)

For a detailed list of the components provided with polymer please use the following link

https://www.polymer-project.org/components/paper-elements/demo.html#paper-checkbox

Polymer Architecture

(Image Source: toptal.com)

Native Layer: Needed features currently available natively in all major browsers.

Foundation Layer: Polyfills that implement needed browser features not yet natively available in the browsers themselves. (The intention is for this layer to disappear over time as the capabilities it provides become available natively in the browser.) The foundation layer comprises of following technologies:

a.       DOM Mutation Observers and Object.observe() for observing changes to DOM elements and plain Javascript objects

b.      Pointer Events: Handle Mouch and Touch events in a similar way across all platforms

c.       Shadow DOM: For encapsulating structure and style inside elements

d.      Custom Elements: For defining our own custom HTML5 elements

e.      HTML Imports: Package custom elements  .These packages include CSS , HTML and Javascript

f.        Model Driven Views (MDV): For data binding directly in HTML

g.       Web-Animations: API for unifying animation approach across various platforms

Core Layer: The necessary infrastructure for Polymer elements to exploit the capabilities provided by the Native and Foundation layers..

Elements Layer:  This layer consists of UI and non UI components built on the core layer. The layer provides aset of elements which serve as the building blocks for creating an application.  The layer provides elements for functionality like ajax, animation, flex layout, and gestures. Encapsulation of complicated browser APIs and CSS layouts. UI component renderers such as accordions, cards, and sidebars. Polymer is very similar to native HTML5: “attributes in, events out”.     

Its architecture is very component-oriented, its components being HTML elements. Responsive design is also built into most of the widgets, which implies that they transform so that they work best on a given platform (cell phone, tablet, desktop, etc.).

Polymer versus other frameworks

Polymer is not the framework to end all other frameworks. Instead, existing frameworks can be based on the same foundations. In fact, the functionality of most of the APIs that were mentioned above are similar to other UI framework such as Ember.js or AngularJS.

Getting your hands dirty

The getting started guide available on the project page is the best place to start with the link to the same is mentioned here https://www.polymer-project.org/docs/start/tutorial/intro.html

The next step is to get the paper elements , which can easily be downloaded by following one the following approaches:

• Direct download using the download link available at https://www.polymer-project.org/docs/start/getting-the-code.html
•   Using Bower : bower install Polymer/paper-elements
•  Using Git: git clone https://github.com/Polymer/paper-elements.git components/paper-elements

To start with check out this video from Google , which takes you through intricacies of Polymer

The Future Is Here

Going forward Web Components will be becoming more and more popular and would radically change the way web apps are build. Polymer is just an example which has materialize this approach and had made this possible. Polymer gives one the ability and freedom to create components which can be customized as per the needs of the application. Also once developed these components can be shared and reused easily across teams or communities.

For experiencing and discussing awesome apps  please do reach us(Recrosoft Technologies Pvt. Ltd. ) at  http://www.recrosoft.com