Web Components and HTML import

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.

Before you know it your pages are littered with CSS and Javascript includes each with their own versions and a nightmare to keep track of. Of course we have things like asset pipelines that take care of some of those problems and even do a great job optimising your assets. And lets not forget that we have NPM and Bower (and whole list of other package managers), and we can glue it all together with Gulp or Grunt and if you’re feeling fancy you can even feel good about yourself and add some transcompilation to your project. In short you’re already drowning in complexity and you haven’t even written a single line of code.

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.

So how could Web Components solve our HTML include problem?

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.

That’s it! Anything that a “normal” HTML document can contain is allowed in a HTML include. That means you can include markup, CSS, Javascript but also CSS and Javascript includes. Now that’s interesting! Lets look at how we normally include Bootstrap into our web application.

1
2
3
<link href="/assets/css/bootstrap.css" rel="stylesheet"></link>
<script src="/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap.min.js" type="text/javascript"></script>

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. ♯browser ♯web development ♯html inlude ♯software development ♯frontend ♯javascript. web application ♯html5 ♯google ♯Web Components ♯coding