Google’s Polymer 1.0 brings reuse and better branding to Web development

Google’s Polymer 1.0 library promises to tame Web development awash in HTML soup, and make it easier for developers to create feature-laden apps and websites.

Google I/O developers conference

Signaling Polymer’s production readiness, Google announced release 1.0 at its annual I/O developer conference. A core library used to build and style Web components, Polymer transitioned rapidly from concept to production release in less than two years.

Web developers are attracted by its simplicity. Traditionally, developers create Web pages with a combination of HTML, CSS and JavaScript, which can be difficult to modify, debug, maintain and reuse. Polymer encapsulates these three languages into functional component elements from which Web pages can be constructed, reducing development complexity and boosting reuse. In essence, Polymer elements can be used to create “app-like,” immersive experiences on the Web.

The Web’s explosive growth and competition between browser makers drove Web standards bodies such as W3C to ignore a component-based service-oriented architecture (SOA) model. Polymer aims to reverse this trend by allowing Web developers to build functional and design elements that fit a familiar SOA-like architecture in which components called elements provide services to other components through clearly defined interfaces.

Standards and the extensible Web manifesto

Polymer’s roots trace back to the Extensible Web Manifesto that, in 2013, set out to change the way Web standards are created and implemented in browsers. The signers of the Manifesto believed the standards model didn’t allow for innovation, because Web developers couldn’t experiment with new standards until after the browser vendors agreed to and implemented them. JavaScript libraries called polyfills — first used to create backward compatibility in browsers — were repurposed to deliver advanced new features to innovative Web developers for experimentation and comment, before finalizing the specification and natively coding the features into browsers.

[Related: 8 tips for finding and managing programmers]

google polymer library

Google's Polymer library catalog contains custom elements, built by the Polymer team, that are ready to use in your applications.

Polymer includes libraries used to create custom elements, as well as a catalog of elements built by the Polymer engineering team for adding functionality to Web page such as credit card entry fields, check boxes, animations and transitions. The Polymer open source community that includes Google and non-Google developers anticipates an ecosystem around Polymer that will create and license a large independent catalog of custom elements.

Building bridges between developers and designers

Polymer extends beyond efficiency in Web development to the design and branding of websites. Using Google’s Material Design language as the reference for creating themes and branding at an elemental level, Polymer aims to distribute a consistent theme and user experience (UX) across a Web property from within the Polymer elements. That Google intends for Polymer to scale across large, complex websites with large repositories of elements is clear.

Polymer also promises also to tame the naturally contentious relationship between designers concerned with Web page UX and developers concerned with Web page functionality.  Developers will be able to use prebuilt Polymer elements that include designs and themes, thereby eliminating the need to modify complex Web page source code to match designers’ specifications, and potentially introducing hard-to-find and harder-to-fix bugs.

Google adhered to the Manifesto’s principal to put releases in the hands of Web developers early in Polymer’s evolution. Last November, Google’s Polymer team produced a fairly complete version that reached and resonated with many developers. Web developers enthusiastically embraced that release and began to build with it, yielding valuable commentary that influenced the next release. Compatible with most popular front-end development frameworks such as AngularJS, Ember and React, there are few obstacles to adding Polymer to a development team’s tool kit. Out of the box, Polymer supported mobile. It is responsive, resizing pages to fit mobile screens. Where user interaction is limited by the rendering of complex pages on small screens, mobile web developers can build elements specifically for mobile devices.

While Web developers experimented, Google’s Polymer engineering team rewrote all the polyfill libraries with one goal: Near-native performance in popular browsers such as Apple’s mobile Safari browser. In March of this year a near-complete release candidate reached developers and proved to have the sought-after near-native performance characteristics.

[Related: Java at 20: How it changed programming forever]

Progress, however, doesn’t come without controversy, as anyone who’s been following Polymer knows. Asked to respond to criticism that Polymer relies on standards that have yet to be ratified by the WC3, Polymer product manager Taylor Savage said "All the related standards are much nearer ratification. The shadow dom standard that had some contentious bits has made a lot of progress. All the browser vendors sat down recently to discuss shadow dom and we are on the same page bringing an agreement on a standard much closer to ratification."

For large, complex websites, especially when a pervasive brand influence is tantamount for the user experience, there isn’t another systematic alternative to Polymer for distributing and managing design across a website. At scale, web components like Polymer become essential to reduce web development complexity and increase reuse if efficient and well-managed web development is one of your goals.

To comment on this article and other CIO content, visit us on Facebook, LinkedIn or Twitter.
Download the CIO October 2016 Digital Magazine
Notice to our Readers
We're now using social media to take your comments and feedback. Learn more about this here.