Sometime in 1998 I was working on Web Content for a small Internet ISP. Not being from a Computer Science background, and working for a small company meant I had to quickly pick up a few technical skills in order to add content to a web page. This proved to be surprisingly quick and easy, in the main part due to the language used to create web pages, HTML.
HTML made this easy to pick up for an untrained programmer for several reasons. With its declarative API it was fairly straightforward to learn an HTML element’s API and then start putting HTML elements together like Lego to make a website.
This was one of the driving factors at that time in the growth of the Internet, as the barrier to entry for developers was low which meant that more or less anyone could build a website.
This was fantastic as it led many, similar to myself, to explore web technologies further and become proficient web developers.
And, this is where Web Components could change everything.
Why Web Components could change everything
Web Components will basically let anyone create and reuse brand new HTML elements. This will mean accomplished developers can create reusable components or widgets of varying complexity and because they use an HTML declarative API, they can be added to a web page or app by anyone who understands the basics of HTML.
The way this can be accomplished is through ‘HTML Imports’ which is one of the four main specs behind Web Components.
The others are:
- Templates – inert chunks of DOM, activated when needed
- Custom Elements – create New HTML elements, extend existing DOM objects
- Shadow DOM – DOM and Style Encapsulation
So Web Components are going to make it easy to reuse components, and the HTML API is a simple way for authors to use these external components, but why does that mean that Web Components can revolutionise Web App development?
Let me give a couple of examples of how a common ‘tabs’ component can be achieved using modern web technologies.
Figure - jQuery plugin with passed in options and heavy DOM
Figure - Angular.js implementation. 1998 me is out of here!
Wouldn’t it be nice if we could import some tabs and then use them like this..?
Figure - Polymer Web Components implementation of tabs
...And with little to no programming knowledge, this would give us something like this. That is what Web Components promises and in fact is delivering right now.
Figure - One of several developments Google have developed for their many APIs
There already exist libraries of these web components, ready to use. Mozilla has a library called X-tag and a library of X-tag components called Brick while Google are going all in with their Polymer framework and a library of Core Elements all open sourced on GitHub and more impressively their Paper elements. These Paper elements implement the Material design system Google are using for the newest version of Android meaning Web Sites and Apps could be created out of Polymer Paper Web Components and have a very close implementation to their native counterparts.
The polymer team have also open sourced a designer tool which is a browser based drag and drop interface complete with editable code view. (It itself is built with Web Components!).
Figure - Polymer Designer tool.
So once again web development is back to where we can compose web pages (and applications!) out of reusable HTML elements like Lego, only this time we are only restricted to what developers can create rather than what HTML standards committees provide.
That leaves the big question of can we use Web Components now or is it one for the future. I think the answer really is that it depends. Google’s Polymer library provides Polyfills for all four specs of Web Components for browsers as far back as IE9. However, some of these are quite heavy in terms of performance (the Shadow DOM polyfill especially) so if you need to support all major browsers then Web Components probably aren’t ready for you yet. The idea is to remove these Polyfills as browsers implement the standards. Chrome and Firefox are the furthest along with their implementations of the specs and as of Chrome 36, all 4 specs are provided natively in the browser. This means, Polymer or X-Tags perform very well. However it’s still worth remembering that Polymer is only currently on version 0.4.0 and X-Tags is on version 0.9.9 so neither have officially made it to production release as yet.
On the other hand, Salesforce are already using Web Components and this video shows how they use Polymer to build mobile web apps in days, instead of months.
GitHub are using a Web Component in production now in the form of as an extension to the HTML5 <time> element.
Figure - GitHub time element to show when commits were made
And with what Google showed at I/O 2014 with their extremely impressive Material Design inspired Topeka Polymer app, maybe now is a good time to dip your toes into the future of web and web application development.