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.