Assemble your UI with Google's Polymer

Polymer gives you the tools to add Material Design elements to Web apps, and it’s a dev framework in its own right

The mobile and desktop user experiences are converging, thanks to smartphones, phablets, and tablets that are nearly as powerful as PCs. Part of that convergence is the idea of a common design language that can be used across mobile applications and the Web. That’s why Microsoft developed the modern design language that forms the basis of its WinJS library -- and why BlackBerry did the same with its Cascade design features in bbUI.js.

Last year Google introduced its Material Design language and its Polymer framework. Material Design forms the basis of the look and feel Google developed for its recent Android releases, with native UI components for your code and a matching set of Web components.

Drawing on the latest Web technologies, Polymer is a framework for building reusable UI components for your applications. Much like React, it’s a way of abstracting page elements and using them as the basis of a design. A catalog of elements simplifies usage, letting you pick and choose the elements you want, treating them as a standard HTML element in your page. Need to add a map? Find the appropriate Polymer map element, import it, then call it like any other tag.

While Polymer is focused on using modern Web standards, especially Web components, it’s not limited to newer browsers. You can use a polyfill shim to add a subset of Web components support to most browsers with a line of JavaScript to load the appropriate library.

Getting started is a matter of using a tool like Bower to ensure that when you install a component, you install all its dependencies. That means setting up an appropriate configuration file for your application, but once Polymer is installed from the Bower command line, it’ll be kept up to date. There is the option of downloading a Zip file of the entire Polymer distribution, but there’s no auto update (and if you use GitHub, then you’ll have to manage dependencies yourself).  

Once it's installed, you’ll add an import to your pages to add the core Polymer functionality before defining your elements. You can create a new element from scratch, building a template and adding content. Once you’ve created an element, you can start to combine other elements, as well as use Polymer’s AJAX support to add data bindings and links to external APIs via JSON.

To continue reading this article register now

How to choose a low-code development platform