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.