How do you avoid request hell with vanilla web components?

Question

How can you / is it possible to avoid making server request per web component?

Background

So, with javascript a lot of people are now using the so called AMD model of module loading, in which all the modules are separate javascript files and get included as required. eg.

- main.js
-- module1/mod1.js
-- module2/mod2.js
-- module3/mod3.js

This results in multiple requests to the server, one for each javascript file. This is considered harmful to app performance, particularly in mobile as the number of javascript modules increases.

As a result tools such as require.js provide a compiler that will automatically trace dependencies and generate a single javascript file with all the modules in it; effectively reducing the request overhead to a single file (typically app-min.js).

Web components

Every web component sits in an external file island and gets imported using a link tag in the header:

<link rel="import" href="elements/image-gallery.html">
<link rel="import" href="elements/social-media.html">
<link rel="import" href="elements/pinmap.html">
<link rel="import" href="elements/nav-menu.html">

If you're using polymer, you can use the vulcanize tool to combine polymer components (http://www.polymer-project.org/articles/concatenating-web-components.html), but that's because (as I understand it) polymer is a javascript framework that loads web components dynamically from "polymer-element" tags.

Is there an equivalent way of doing this with 'vanilla' web components that do not rely on a frame work such as x-tag or polymer?

Jack Wester Jack Wester · Accepted Answer · 2014-06-24T20:02:50

Vulcanize

The Vulcanize tool can be used with vanilla web components (i.e. HTML imports) as well as with the Polymer framework. It has some drawbacks however (build setup and nasty bugs such as incorrect parsing of SVG etc.).

HTTP 2.0 (SPDY)

IMHO, the best option to get rid of the multiple request roundtrip problem is to use SPDY (HTTP 2.0). This allows a single physical roundtrip for all requests responses without requiring you mess up your nice and clean code. It works for HTML, javascript, images and web components alike. I.e. you can keep your HTML and Javascript nice and modular without the penalty of request hell. This is the most generic approach and provides the cleanest and most effective solution. The downside is that it requires a modern server side application hosted in a modern web server. So if your server supports it, this is the silver bullet of avoiding request hell without arcane setups and time consuming patterns.

Manually

If none of these approaches fits your bill, you can violate all things beautiful and manageable and optimise things by manually concatenate content in the same way you would with vanilla web content. There is little magic going on when it comes to web components. The biggest thing is actually that HTML document fragments are often kept in separate files (using HTML imports), but this is not actually a requirement but rather a best practise. HTML imports can be used without web components and web components can be used without HTML imports. Web components typically use document fragments and Javascript and it is convenient to wrap both in an import. To avoid the extra requests, you can simple define multiple fragments in a single big files. You do this by using the template element for each fragment in a single HTML file just could easily just merge multiple scripts together in a single file. This is basically what the Vulcanize tool does as it does not actually try to interpret the code being concatenated. No need to say that this approach replaces request hell with maintenance hell.