As a web developer in 2014 I’m sure you use jQuery or something similar, maybe Bootstrap or Foundation? Perhaps you need a nice carousel? And for templating you’re using Handlebars, or maybe your prefer to go with a nice framework like KnockoutJS, EmberJS or AngularJS.
But why do we have to this? Wouldn’t it be great if HTML supported HTML includes and could do a lot more heavy lifting? Instead of having to include all the dependencies of a specific project or library we could just have one line which includes all the dependencies for us. Enter Web Components! With Web Components our lives as web developers should become a lot easier. This, and many other problems, related to web development are solved for us by the browser. Instead of having to deal with the shortcomings of HTML Web Components aim to let HTML work for us. While not fully supported yet by all the browsers adaption is growing rapidly with Chrome being at the forefront of the effort.
For that we first need to understand what it’s. The link above will give you the complete W3C spec of HTML includes but lets try to sum it up.
HTML include is a way to to import HTML documents in other HTML documents.
So there we have it, bootstrap and it’s dependencies, then to think this is without any plugins you probably want to use. Now imagine that Boostrap would just offer a Boostrap HTML include on its CDN, what would our include look like using Web Components HTML include?
1 <link href="//cdn.bootstrap.com/bootstrap-base.html" rel="import"></link>
That looks a lot better! Hopefully you can see the potential of this. We could create a single HTML file in our project which contains all of our includes and just include that as a HTML include on all the pages where we need those includes.
Web Components solves a lot more problems than only HTML includes, it even gives us support for native templates within the DOM. No more fiddling around with Handlebars and all the disadvantages that come with it.
Of course there’s a lot more to learn on the subject of HTML includes, this is but a short introduction on the subject. I suggest you check out this article from Eric Bidelman on HTML includes.
Google has a great project with which you can build modern web applications today that take advantage of webcomponents go checkout Polymer.
Suggestions, tips or flames? Please leave a comment. You can also hire me