Application development / Responsive web design / UX UI Design / Website Design London

Build the Web App with Polymer – Html5

Just Total Tech
06 Dec 2018

At Google I/O 2013, Google presented a new Web Interface (UI) framework called Polymer. The project is not just the framework to cease all other frameworks but to enable all existing frameworks to be based on the same foundations. Polymer is not the first project to attempt polyfilling parts of the Web Component-related standards. Previously, Mozilla launched X-Tag, a polyfill for the Custom Elements standard. And the Web UI Package for Dart implements the custom elements and Model Driven View technologies for applications written using Google's Dart language.

Polymer has polyfills for many of the web technologies required to successfully implement applications with Web Components, including:

  • HTML Imports: a way to include and reuse HTML documents inside other HTML documents.
  • Custom Elements: enables developers to define and use custom DOM elements.
  • Shadow DOM: provides encapsulation in the DOM.
  • Model Driven Views: provides Angular JS-like data binding.
  • Web Animations: APIs to implement complex animations.
  • Pointer Events: unifies events for mouse, touch and pen.

Polymer is in short a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers. Polymer itself is almost like native HTML5: “attributes in, events out”. One example of using the UI widget polymer-panels:

    <polymer-panels

        on-select="panelSelectHandler"

        selected="{{selectedPanelIndex}}">

    </polymer-panels>

Its architecture is very component-oriented, its components being HTML elements. Some of the elements don’t even have a user interfaces themselves. For example, animations are elements (you can nest them etc.), they have no user interface, but instead point to UI elements that they animate. Responsive design is built into many widgets, which means that they will transform so that they work best on a given platform (cell phone, tablet, desktop, etc.).

The overall aim of Polymer is to manage the complexity of building web applications.

Use the platform — Use as much or as little of the framework as you wish. An application can choose to load platform.js for just the polyfills or usepolymer.js to give web components extra batteries. We call these types of elements “Polymer elements”.

Everything is an element — Encapsulation is the key to create scalable and maintainable applications. All Polymer resources are components, even those that are non-visual. To construct an app, a developer creates new components, or uses ones Polymer provides, and assembles them together. Focusing on individual, composable building blocks allows developers to “think locally” about their application, reducing complexity. With this divide-and-conquer approach, applications can simultaneously be simple and arbitrarily complicated.

Eliminate boilerplate — Developers should write the minimum amount of code possible to create their application. Anything repetitive should be re-factored into a component, handled by Polymer itself, or added into the browser platform itself. Polymer provides simple syntax without reducing features, and avoids boilerplate wherever possible.

In a relatively short time, it has created a simple application composed of several web components without having to worry about writing boilerplate code, manually downloading dependencies or setting up a local server or build workflow.