Blog 53

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.

HTML image element

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.

Fast-forward to the middle of the next decade and the advent of Gmail (2004) and the iPhone (2007) meant suddenly these same web technologies were being applied to building fully fledged applications. These web applications being composed mainly of JavaScript (in Gmail’s case hundreds of thousands of lines) meant coding expertise and experience was required.

Even traditional Web Sites, often for performance reasons, now act like web apps and lean on JavaScript heavy frameworks and libraries such as Angular, Ember or Backbone.

So the barrier to entry is once again high. Without a certain amount of understanding of JavaScript or programming fundamentals, the prospects of a beginner being able to convert an idea and create a Web Application are low.

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

HTML Imports are a way to include and reuse HTML documents in other HTML documents. Just as authors can include external JavaScript through <script> tags they can now import full HTML resources, and more importantly for this blog, include Custom Elements from external URLs as easily as this:

HTML import link

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.

jQuery tabs

Figure - jQuery plugin with passed in options and heavy DOM

Angular JS tabs

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..?

Polymer tabs

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.

Anyone who’s ever added Google Maps using the JavaScript API will appreciate the ability to just drop this into a page or app.

Google maps web component

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!).

Designer tool

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.

So for now, Angular, React or Vue which have similar componentised philosophies are probably safer bets for Production Web Apps.

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.

GitHub time component

Figure  - GitHub time element to show when commits were made

GitHub time HTML element

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.

Loading Icon Loading