Web Components are the future of web development

Alastair Aitken 17 December 2014 0

Building applications by bolting together components is standard fare for developers; encapsulation and reusability have been key concepts donkeys years. So why does a practice that’s so ubiquitous across almost every aspect of software development suddenly disappear at the final hurdle, when it’s delivered to the browser? Frameworks such as Angular and Ember really only address constructing the heavy lifting aspects of front-end Javascript development, there’s still a whole heap of cut-and-paste needed to get everything displayed in the browser. There has to be a better way. There soon will be. Or if you’re willing to live on the edge, there is now.

I’ve got the decorators in

Web Components hold the promise of dragging UI development into the 21st century by allowing the creation of custom HTML elements, encapsulating logic and styling. Develop a UI element once and re-use it everywhere. There are five parts to the Web Components specification: Templates, Decorators, Custom Elements, Shadow DOM and Imports, some are clearly defined whilst others, such as Decorators, are still in a state of flux. It’s the combination of all five that offers the opportunity for developers to define rich visual UI widgets that can be reused across web pages, and even across web applications. Instead of writing HTML to create, say, an address label, that address label element will be defined in a separate script file and included, where needed, with a custom tag such as . Widgets can raise events to indicate the stage of their lifespan. Widgets can be extended to create new custom widgets. It’s difficult to know whether to be excited or to think, “well it’s about bloody time!”


But there’s more than just a W3C specification. Google already have their Polymer library available to start experimenting with. The Polymer site is, naturally, built with Polymer. Polymer implements a majority of those web components concepts defined in the specification. Where a browser doesn’t support a feature that Polymer implements, Polymer adds shims to fill the gaps. However, whilst we’re on the cutting edge and given that Polymer is produced by Google then it’s probably best to use the latest version of Chrome or Chromium for development.

Yeoman, Grunt and Bower

One thing that using Polymer quickly highlights is the need to use the latest tools to get started and maintain browser-based applications. You could do it all by hand but why bother when there’s a clutch of tools to do it for you. The de facto standard tools are:

  • Node.js – to run the following tools and install Node Package Manager (npm),
  • Yeoman – for creating new projects,
  • Grunt – for building, minifying, concatenating, testing and viewing projects,
  • Bower – for dependency management, installs libraries and all their dependencies.

It’s probable that Javascript frameworks such as Angular and Ember will use libraries such as Polymer to deliver their UIs. I’d take a punt and say that it’s almost certain that Angular and Polymer will be working together soon. Learn one or learn them both, because they’re the future.

Alastair Aitken (124 Posts)

As a contract developer and manager I’ve worked in a wide range of enterprises in a variety of countries where I’ve encountered everything from great work, awful work, bizarre work, all the way down to quasi-legal work. If you think that you recognise your own organisation within my articles then you’re undoubtedly wrong, where you work isn’t that unique.

Leave A Response »