1.

1 INTRODUCTION TO GOOGLE POLYMER

Polymer provides a set of polyfills that enables us to create web components in non-compliant
browsers with an easy-to-use framework. It is created by Google that helps to reuse elements for
building applications with components. It is a library for creating web components are basically
set of W3C standards and upcoming browser APIs for defining your own custom HTML
elements. With the help of polyfills and sugar, it can create these elements and bring these
components to support to browsers that don’t play nice with the standard just yet.

Fig 1.1 Logo of Polymer

Polymer(more specifically Shadow DOM) provides the ability to compose encapsulated JS, CSS
and HTML as Custom Elements. It was initially released on May 27, 2015. The stable release is
1.7.0 and it was released on September 29, 2016.

Polymer is used widely because

 It allows to create our own custom elements easily using the HTML, CSS, and JavaScript for
adding interactions to the element.
 It is created by Google that provides cross-browser compatible applications along with the
web components.
 It provides both one-way and two-way data binding.
 It provides Polymer command line interface for managing the projects from simple
components to complicated web applications.

1.2 EXAMPLE OF GOOGLE POLYMER

An easy approach is just to try to identify, from a visual perspective, the components in our
application and then try to create them as custom elements in Polymer. So
for example, imagine that we have an app with the following screens:

Fig. 1.2 Different views of an application

It can be identified easily that the top bar and the side bar menu are not going to change and the
actual “content” of the app could load different “views”.That being the case, one reasonable
approach would be to create the element for our app and, inside that element, we could use some
Polymer UI Elements to create the top bar and the side bar menu.
We can then create our two main views, which we’ll call ListView and the SingleView, to be
loaded into the “content” area. For the items in the ListView, we can create an ItemView.
This will then yield a structure something like this: