Polymer is dead, long live Web Components!

Up until last year, you couldn’t bring up Web Components without mentioning Polymer. Polymer provides a simple way of creating custom elements for your web applications. It also comes with an extensive set of elements called Polymer elements, usable as out-of-the-box building blocks for your web application or as base elements to extend your own custom elements.

What happened to Polymer?

As its creator, Google put considerable effort into promoting Polymer. Several Google websites, including YouTube, were redesigned using Polymer. They also organised large conferences about Polymer in 2015, 2016 and 2017.

However, Polymer never became as popular for developing web applications as frameworks such as Angular or React (or any other framework, to be honest). As shown in this chart, fewer and fewer people became interested in Polymer, but in spite of this, interest in Web Components was still rising.

Decreasing search-volume Polymer versus Web Components, source Google Trends.

Other Web Component libraries emerged. Each had its own way to create custom elements. More importantly, what they all had in common is that they were more light-weight than Polymer. Two examples of such libraries are Slim.js and Stencil. Other libraries also came with their own set of elements that could be used in the same way as Polymer elements. Two examples are Smart HTML Elements and Lightning Web Components.

The developers of Polymer realised that some features provided by Polymer (for example: two-way binding) were the cause of overly complicated code in many web applications. They decided to make a fresh start. In 2018 Google released Polymer version 3.0, but at the same time they announced that all Polymer elements were put into “maintenance mode” (critical bug fixes only).

Instead of working on improvements for Polymer, they created a new library called lit-html.

The present: lit-html and LitElement

With lit-html came LitElement, the class that can be used as a base to create custom elements from. Here’s an example of what a custom element based on LitElement looks like:

import { LitElement, html } from 'lit-element';

class SimpleGreeting extends LitElement {
	static get properties() {
		return { name: { type: String } };
	}

	constructor() {
		super();
		this.name = 'World';
	}

	render() {
		return html`<p>Hello, ${this.name}!</p>`;
	}
}

customElements.define('simple-greeting', SimpleGreeting);

JavaScript
<simple-greeting name="Craftsmen"></simple-greeting>

HTML
<p>Hello, Craftsmen!</p>

Result

At my current client, we’re transitioning from Polymer to LitElement and I have to agree that it’s a huge improvement. I don’t have as much experience with the other libraries mentioned earlier, but on first glance they don’t appear to differ.

So, if you’re considering which library to use for your project, I don’t think you can go wrong with any. You’ve already made the most important choice, by choosing to use Web Components.

The future: use the platform

The concept of Web Components promises a future where web applications are built without frameworks. Instead of frameworks, developers could stick to ‘vanilla’ JavaScript and use the Web API’s made available by the browser.

The developers of Polymer also embraced this vision, proven by their slogan “Use the platform”. They never intended Polymer to become market leader in the field of web development. Instead, they aimed to provide a bridge for developers wanting to move away from frameworks and use the web platform instead.

So, the end of the line for Polymer was set in stone from the beginning: when the Web API’s evolve to a point where they offer web developers everything they need to build great web applications, there will be no need for Polymer or any other library or framework. We’re not at that point yet, but we’ve taken quite a few steps in the right direction already.

The bridge we still need is a lot smaller than the one Polymer provided, so in a way the developers of Polymer have achieved their goal: Polymer is dead, because we don’t need it anymore. However, we do still need a bridge. Whether that is lit-html, Stencil or any other library doesn’t matter, as long as it gets you there: in that promised future where we won’t need any framework or library at all.

Leave a Reply

Your email address will not be published. Required fields are marked *