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.

Polymer also lets you give your elements public APIs, so they can respond to events and work with data. A lot can be done using these features, as they’re key to delivering dynamic content in Polymer. Events can include all aspects of an element’s lifecycle, from creation on. Thus, you can have elements that, for example, signal when they are ready to be used. You’re also able to add declarative data bindings to an element, making it easy to quickly fill out content from external data sources.

Once you’ve given an element an API, you can publish its properties, making them behave like HTML attributes. It’s then easy to link an element’s data bindings to an attribute and let designers quickly set properties, just like they’d work with any HTML element.

That’s the key benefit of using Polymer to build design elements for an application: Once built, they’re fundamentally equivalent to an HTML tag. A developer can build and document an element, and a designer can use it in a page layout. Neither need to learn new ways of working, while both can take advantage of the flexibility of Polymer to build easy to understand Web applications.

Google’s library of Polymer components gives you many of the tools you need to add Material Design elements to a Web application, but it’s also a development framework in its own right, giving you the option of building your own components or customizing existing elements. You can also use Polymer templates with data-binding to deliver dynamic content, feeding data into components.

Once you’ve built or imported a Polymer element, as it behaves like any HTML element, you’re able to nest basic elements to quickly build more complex UI features. You can use a themed collection of elements, which Google calls its “paper elements collection,” or work with unthemed components that can be used in existing designs.

One key aspect of Material Design -- and Polymer -- is its use of icons to simplify page layouts. Building on the familiar Android UI, Polymer uses a set of icon components to add SVG images to your pages, with a library of more than 150 icons that can be called by name and added to your applications. Similarly, it offers a large library of controls that drop into a page. With traditional UI frameworks and HTML you may have had to write a lot of code to, for example, add a progress bar to an application, but with Polymer it’s a simple element that can be given a value -- and when used with frameworks like Angular, can quickly be made a dynamic element in a single-page Web application.

While Polymer is an interesting and flexible UI framework, its real value is as an exemplar of what Web components will be able to do for our applications. With support in Chrome, Opera, Firefox, and Safari, as well as its addition to Edge, it’s likely that components will rapidly become a key in delivering UI elements, especially as they promise smaller, faster Web applications. Replacing the bloat of JavaScript UI libraries with elements that are only loaded when needed makes a lot of sense, with smaller pages turning the mobile Web into a friendlier, cheaper place for our code.

Copyright © 2015 IDG Communications, Inc.