distel2610 / Pixabay

Polymer (also known as Polymer.js) is an open-source JavaScript library that provides some syntactic sugar and support for building custom HTML elements with Web Components, the latest standard being implemented by the W3C. Read on to learn about Polymer, Web Components, and the quest for a componentized web development.

BRIEF HISTORY OF POLYMER.JS AND WEB COMPONENTS

When Web Components was first introduced to the world at the Fronteers Conference in 2011, Alex Russell painted the Platonic ideal of componentized web development where sites could be built from features as ubiquitous and DRY (do not repeat yourself), and as friendly as the humble anchor tag—that bit of clickable text that links you to another web page. Nobody has to think about the coded mechanics that make anchor text possible; it works across browsers, and means the same thing to everyone, from Google, to Facebook, to personal blogs.

In that same way, the Web Components standard would allow developers to create encapsulated, reusable custom HTML elements. These elements would be ubiquitous, work the same in any browser, and mean the same thing to any other developer who wished to incorporate them into their web project. It would even be possible to build an entire dynamic single page application from custom HTML elements. At least, that’s the dream.

So are we componentized yet? Not exactly. Modern browsers have only just begun to adopt the new W3C standards, and the specification has been under work over the past 6 years. At some point in 2013, Google began public development of Polymer, but it wasn’t until 2015 that Polymer 1.0 was officially released.

Let’s take a look at how Polymer can be used to create web apps now, in 2017.

POLYMER.JS: THE BASICS

At its core, Polymer is about helping developers create custom elements with the new Web Components specification. The beauty of the component-oriented approach to web development is that if you desire a particular widget or feature and the element already exists, using it is as simple as installing the library and invoking the custom tags as you would any normal HTML element. Here’s a list of the current element lines Polymer 2.0 has to offer:

  • Google Web Components: Wrappers for Google’s extensive suite of apps, APIs, and services (e.g., Google Maps, YouTube, and Google Analytics)
  • App Elements: Elements for building full web apps out of custom modular elements (e.g., app routing and storage)
  • Iron Elements: Elements for building the core functionality and structural layout of a web app
  • Paper Elements: Visual elements that build off of the support provided by iron elements and implement Google’s Responsive Material Design paradigm
  • Gold Elements: Elements for adding e-commerce functionality to your website (e.g., checkout flows)
  • Neon Elements: Elements for adding special effects (e.g., animations)
  • Platinum Elements: Elements for more complex features like Bluetooth and push notifications
  • Molecules: Wrappers for external JavaScript libraries

CUSTOM ELEMENTS

If Polymer’s growing catalog of existing elements doesn’t quite cover your application’s needs, you can always build your own. Defining a new HTML element is as easy as calling customElements.define to register it with the browser. This is where you’ll associate an element name with an ES6 class, upon which you can add properties and methods. Note that Custom Element names must start with ASCII letters and contain a dash (-).

For example if you were able to build your own custom slider and wanted to invoke it in your web page with a simple pair of tags, you would use Polymer’s documentation to assign the name “awesome-slider” which would then be called by the tags <awesome-slider/awesome-slider>. Check out this quick tour of Polymer from their main website, which gives a quick but thorough overview as to how you can build your own custom elements.

POLYMER.JS BROWSER SUPPORT THROUGH POLYFILLS

Of course since most browsers have yet to adopt all of the features required to support the Web Components specification, in practice you’ll almost certainly want to make use of polyfills—pieces of code that approximate features that have yet to be supported natively in all browsers. Polyfills expand Web Components, and by extension the Polymer library’s browser compatibility. That means you can start using custom HTML elements in your applications today, which should theoretically be compatible with future browser implementations as they adopt W3C’s latest standards.

SHOULD YOU USE POLYMER.JS FOR YOUR WEB PROJECT?

At the end of the day, what developers and business owners really want to know about a JavaScript library is whether or not it is production-ready. As of 2017, it seems that Web Components v1 versions of core features like the Shadow DOM and Custom Elements have finally received native support in the latest releases of major browsers like Chrome and Safari. If you’re looking for inspiration regarding what’s possible with the Polymer library, check out the aptly named Made with Polymer website to see who’s using this new technology.

Consider using Polymer if…

  • You want to build your own custom HTML element.
  • You want to create a website that’s forward compatible with future W3C standards.
  • There’s an existing element that contains a feature you need on your website.
  • You’re not too worried about compatibility with older versions of browsers.
  • You embrace the future of componentized web development.

Polymer is a JavaScript library that allows you to build custom HTML elements today with the Web Components standards of tomorrow.

Get more work done, faster with freelance help. Post a job today and get started!