Polymer: Web Components, Custom Elements

What is Polymer?

Google has introduced many of their projects at their yearly I/O conferences. There is one of them worth putting our attention to Project Polymer. This project was led by a team of front end developers working within the Chrome organization at Google. Their main initiative is to make users’ lives easier. They want to “evolve and improve the web platform.” There are a few features Polymer comes with an easier way to create custom elements, two-way data binding, computed properties and a library of elements. But, it’s the main feature are web components. These web components let us create custom elements and tags for our website.  We think of Polymer as an SDK for the web, making web application much faster and efficient.

Polymer Decomposed:

Web components

To break down what web components are exactly, it is a set of features in the process (currently being added by the W3C) that lets us create reusable widgets or components in web documents and web applications. These web components allow you to create custom elements.

Custom Elements

There are custom elements inside of Polymer: iron elements, paper elements, google web components, gold elements, neon elements, platinum elements, and molecules to name a few.

Iron elements

Iron elements are collections of basic elements, but with polymer powers. All elements are iron prefixed that’ll allow you to add extra attributes we wouldn’t normally be able to apply to normal elements.

Paper elements

Polymer introduced a paper element, a “medium that underlies the content”, or their own pre-made elements that implement Google’s new design language, material design.

Google had announced their newly developed design language in 2014. Their design language was built on their three essential principles: Material, Bold, and Motion. The material is to be responsive and natural. The movements will imitate real world movements and don’t occur instantaneously in design. But what’s interesting about this language is that, in theory, material design should work for any screen size: phone, TV screen, watch, tablet, etc.

Google Web components:

Polymer provides special elements that make interacting with Google APIs and services easier, like Google maps and Youtube.

Other Elements:

Polymer provides Gold elements specifically for e-commerce use cases, Neon elements for special animation, Platinum elements that turn web pages into a web app with push and offline notifications and Bluetooth, and Molecule elements  that will wrap with other javascript libraries.

The future?

The problem is Chrome is the only browser that fully supports web components right now. However, we are able to use “Polyfills” to let us use web components in other browsers such as Firefox, Safari, etc.

Is this the future standard?

“Web components —  being able to make your own elements might be ‘the future’ of web development.” One of our front-end developers, Alex Davis, inputs, “In past projects, we’ve gone through all these JavaScript frameworks. This polymer framework seems to be fundamentally different and web components seem to be coming to the web. It has a good chance to be a widely used framework.”

Polymer, by any means, won’t be the holy grail of solving all web development issues. But, with its use of web components and custom elements, it will simplify developing and maintenance of web apps. Web components can “change how we think about building a website.” Alex adds, “Instead of rearranging existing elements to do what we want them to do, we can create them.”


Leave a Reply