MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Essential points you need to know about Google Polymer

Published on 18 June 15
Essential points you need to know about Google Polymer - Image 1
What's with the latest Google Polymer?
Essential points you need to know about Google Polymer - Image 2
The Google Polymer is essentially a library for creating Web Components, which are a set of W3C standards and upcoming browser APIs that you can used for constructing your own custom HTML elements which support web browsers.
It is said that the Polymer 1.0 has been build from scratch to easily make quick, seamless, and inter-operable web components.
The idea of polymer

The fascination of Polymer is derived from its claim of placing elements as the fundamentals of web development. With Polymer.js, the ability to craft your own HTML elements and compose them into complete, complex web applications that are both practical and manageable is a fascinating thing.

Furthermore, Polymer’s elements are deemed the building blocks of the web and are based on reusing the current element paradigm (leveraging on an existing native browser) to construct more powerful web components.
Examples and benefits of Polymer codes:

As the Polymer library allows you to create powerful elements, it provides web developers tools like templating and data binding to reduce the amount of boilerplate you need to write.

Here are lists of examples of Polymer codes:

Inputting Google Maps

<!-- Polyfill Web Components support for older browsers -->

<script src="components/webcomponentsjs/webcomponents-lite.min.js"></script>

<!-- Import element -->

<link rel="import" href="components/google-map/google-map.html">

<!-- Use element -->

<google-map lat="37.790" long="-122.390"></google-map>

Create your own elements:

<dom-module id="contact-card">

<link rel="import" type="css" href="contact-card.css">



<iron-icon icon="star" hidden$="{{!starred}}"></iron-icon>





is: 'contact-card',

properties: {

starred: Boolean




The <firebase-collection>

Build more sophisticated elements by composing simpler elements together to retrieve data from a Firebase database.

<dom-module id="friend-list">

<link rel="import" type="css" href="friend-list.css">


<firebase-collection data="{{data}}"



<template is="dom-repeat" items="{{data}}">

<contact-card starred="{{item.starred}}">

<img src="{{item.img}}" alt="{{}}">








is: 'friend-list'




Benefits of Google Polymer:

Here are a few benefits of Google Polymer

It is said the new library is about three times faster on Chrome, four times faster on Safari, and a third less coding required than in developer preview. Also, it’s ready to be used in production applications and deemed to be easier for developers to produce feature rich apps and websites.

Polymer is also great for reducing web development complexity as well.

Reduces the gap between developers and designers

Polymer guarantees an easier working relationship between designers who uses Web page UX and developers who are concerned with Web page functionality. Developers are given Polymer elements which include designs and themes, which mean there isn’t a need to modify complex Web page source code to match designers’ specifications.

The Architecture of Google Polymer

Essential points you need to know about Google Polymer - Image 3
Polymer.js consists of four architectural levels:

Native: Fundamental features that are available natively in all established browsers (Chrome for example).

Foundation: Polyfills that are found in browser features and are haven’t been natively available in the browsers themselves.

Core: The indispensible infrastructure required for Polymer elements to take advantage of the capabilities provided by the Native and Foundation levels.

Elements: A basic set of building blocks that are the driving factors to create your application. Elements’ functionalities consist of: animation, flex layout as well as encapsulation of complicated browser APIs and CSS layouts.

Encapsulation of three languages

Back then, developers had to use a combination of HTML, CSS and JavaScript, to create web pages which is absolutely a chore if you to apply any modifying, debugging and reusing. The Google Polymer is great in that it encapsulate the three languages into functional component elements from which Web pages can be constructed, reducing development complexity and boosting reuse, which creates app-like, immersive experiences on the Web.

Polymer Starter Kit
Essential points you need to know about Google Polymer - Image 4

Along with version 1.0, Google will be releasing a Polymer starter kit, consisting of build tools and boilerplates for creating Web apps via Polymer.

Here are the features of the starter kit:

Components for nearly any app, out of the box

Get started quickly with the complete set of the same paper and iron elements used by Google products.

Complete build chain

Build your app using a suite of gulp tasks that leverage the full range of Polymer-related tools, such as vulcanize, crisper, and more

Testing made easy

Test your app and all of its components using the built-in and pre-configured Web Component Tester.

Flexible app theming

Easily theme your entire application, including the built-in elements, using app-level Custom CSS Properties.

Framework-free, or framework-compatible

Build your app out of elements, or wire in an external framework to handle business logic. It's up to you!

Responsive app layout boilerplate

Start off mobile-friendly with the included layout boilerplate.

Live Browser Reloading

Reload the browser in real-time anytime an edit is made, without the need for an extension.

Material design ready

Use the built-in paper elements to create a full material design-style app.

Catalog of Elements
Essential points you need to know about Google Polymer - Image 5

Play through different catalog of elements for third-party libraries that can be incorporated into Web applications seamlessly.

Such elements include:

Iron element (FE)

Iron elements are a set of visual and non-visual utility elements. They include elements for working with layout, user input, selection, and scaffolding apps

Paper element (Md)

Paper elements are a set of visual elements that implement Google's Material Design.

Google Web Components (Go)

Google Web Components (eg, Google Analytics, Google-Apis, Google-calendar, Google-castable Video (HTML 5 Video), Google Maps and Google youtube)

Gold Elements (Au)

The gold elements are built for E commerce use-cases like checkout flows

Neon Elements (Ne)

Neon elements implement special effects

Platinum Elements (Pt)

Elements to turn your web page into a true web-app , with push, offline, and more.

Molecules (Mo)

Molecules are elements that wrap other JavaScript Libraries

Foreseeable Problems
Essential points you need to know about Google Polymer - Image 6
However, Polymer is still a relatively new technology for developers; here is the list of possible problems.
• There’s a lack of documentation and guidance. Not all UI and non-UI elements are documented and guidance of issues such as organizing larger applications is barely minimal.
• You may come across dependency errors where you might find yourself pointing to different version dependencies in the same element.
• Polymer.js performance on mobile platforms can be problematic where for instance downloading an entire library is slow and you need to download ever Polymer Element for intended use. Also, there have been complaints of the polymer.js when rendering into a canvas on iOS.
What the future holds for Polymer
To end of the post, the polymer is highly recommended for front-end developers to take advantage on these new cutting edge browse technology. The polymer is deemed an appealing concept as it revolutionizes the manner in which develop web applications. However, more improvements is needed to make Polymer fully functional and feasible for use.

Post a Comment

Please notify me the replies via email.

  • We hope the conversations that take place on will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url