Web Components will change how you build web apps in the near future. At its core, web components let developers create reusable custom HTML tags (think: <datepicker>) for user interface patterns. Building them isn’t trivial, but all it takes is some knowledge of HTML, CSS and JavaScript to get going (though knowing something about what “Shadow DOM” is all about surely helps, too). The Web Components standardization process is still far from finished, but that isn’t stopping Google and Mozilla from putting their efforts behind it.
The problem, of course, is how can you start working with Web Components if most browsers don’t support it yet? That’s where the polyfill concept comes in, as well as Google’s Polymer framework and Mozilla’s less imaginatively named x-Tag polyfill library. The polyfill concept has been around for a while. The idea here is to replicate an API that the browser should have natively in JavaScript or a similar language to ensure that a new technology works across browsers, even if it’s not implemented natively yet (that’s essentially the same concept Modernizr uses, too). Both Google’s and Mozilla’s projects share the same low-level Web Components polyfills.
Google introduced its Polymer framework at I/O earlier this year and it’s clearly a concept Google plans to push forward in the coming months and years. Mozilla, too, has now joined the bandwagon and has actually gone a step further by launching Brick, an x-Tag-based, cross-browser library that “provides new custom HTML tags to abstract away common user-interface patterns into easy-to-use, flexible, and semantic Web Components.”
Brick allows developers to use basic interface elements like a header menu, datepicker or calendar, or more complex features like slide decks with animated transitions, by simply adding links to the Brick stylesheet and JavaScript library to a document and then using the new custom HTML tags like to invoke these new interface elements.
Before, Mozilla rightly points out, most of these features would have involved using something like jQuery UI and putting “boilerplate, non-semantic markup into your HTML, as well as explicitly initializing and managing it through JavaScript.” Most of these tags also take plenty of additional attributes to allow you to customize them.
In the long run, Web Components will change how developers build their web apps and make it easier to reuse — and share — UI components. With both Mozilla and Google actively backing this development, it’s only a matter of time before these polyfills will only be necessary to support legacy browsers, though it’s not always clear when the main browser vendors plan to fully implement it.