Client-side templates in script tags. Advantages/Disadvantages?

Question

Just curious about the current trend to put client-side templates for single-page Java applications in script tags in your HTML file. Seems like an interesting approach, but is this considered a best practice (or at least a better practice)? I tried to come up with a list of advantages and disadvantages, but the list of bad seems to outweigh the good. So the way I see it is this:

Advantages:

1. Only one request to get all templates vs. an individual async request for each template file.

Disadvantages:

1. Creates a potential merge troublespot / bottleneck file if all templates are in one location
2. A bit cumbersome to edit templates all in one file
3. A bit cumbersome to find the template you need vs. using a keyboard shortcut to open file.
4. Have to wait until the DOM is ready before doing anything with a template.

It also seems that with having them in script tags, you can precompile and cache your templates so you're only querying the DOM once to get each template. However, couldn't you achieve the same effect using AMD / Require and a require/text! or dojo/text!? In the latter instance, you'd be lazily loading each template only once. You could then cache it and precompile it at that point.

I just am struggling to see the many advantages of templates in script tags. Am I missing something?

Answer 1

IMHO it really comes down to how many templates you have. When your site is first starting out and you don't have a lot of templates, keeping them all in script tags on a single HTML page makes a lot of sense.

However, as your number of templates grows, that soon becomes unwieldy; before long you're using server-side logic to concatenate a bunch of separate template files in to your master HTML file, and at that point I think it makes perfect sense to start considering other approaches.

Personally my company's codebase started out with script tags in an HTML file, but as we've since grown (and started using require) and now now we have tens if not hundreds of .handlebars (or more commonly, .hbs) files for all of our templates. We bring these in to our Javascript using Alex Sexton's HBS plug-in (https://github.com/SlexAxton/require-handlebars-plugin) for require, and that works great because:

1. we get to use our standard require system for our templates
2. templates get compiled to a single compressed JS file when we use the require optimizer
3. we can configure our IDEs to treat .handlebars files as HTML, giving us the appropriate syntax coloring and such when we edit them

I'm not sure which templating system you're using, but if you're using Handlebars and already using Require then the HBS plug-in is a great way to. If you use a different templating system you likely can find a similar plug-in for Require (if that system is popular enough), or even write your own using the HBS one as a basis.

For anyone with a decent number of templates, I think a system like that (especially for anyone already using Require) makes a whole lot more sense than script tags.

Answer 2

If I understand you correctly, you have some number of client-side templates you want to use, but you would like to separate them into individual files on the server side. When you have a lot of such templates, there is some obvious engineering advantages to such an approach.

You might consider using JSONP. With a half-decent handler on the server side, you get the benefits you're looking for:

1. Separate file for each template
2. Easy inclusion into your HTML pages.
3. The ability to assign each template to a variable, or send it through a compilation function as soon as it is received by the client.
4. Cache templates on the client side, so they don't have to be reloaded for every page.
5. Compatibility with caching proxies

The only part of the JSONP implementation that is non-trivial is the caching properties. You need to make sure your server-side controller that receives the request understands conditional GETs, how to send 304 responses, and sets caching headers properly.

If you aren't familiar with the technique, you might take a look at the JSONP wikipedia entry.