Comments on: JavaScript Performance: Pre-Compiling And Caching HTML Templates

By: petehawkins

petehawkins — Mon, 14 Jan 2013 16:30:00 +0000

If you are using handlebars and requirejs for your client side rendering, check out this module for require, it loads in your templates already pre-compiled, so if build your requireJS for production with the r.js optimiser the templates are served precompiled from the start. – https://github.com/SlexAxton/require-handlebars-plugin

By: Derick Bailey

Derick Bailey — Thu, 03 May 2012 03:08:00 +0000

very nice! :)

By: Anonymous

Anonymous — Wed, 02 May 2012 13:38:00 +0000

Yesterday I updated my code from 0.6.1 to 0.7.4 with the intent to merge in the changes I made to support pre-compiled templates, and then create that pull request.

What I had done (bit of a hack) was to set a templateFn attribute on my ItemViews and then override ItemView.prototype.render to check for that attribute and if found, bypass the normal template loading/compiling. The trouble with creating a general solution was that you already allow the template attribute to be either a jQuery selector string, or a function that returns a selector string, so I couldn’t just set the actual template there.

Anyway, after looking in more detail at 0.7.4 and thinking through several alternatives for how to cleanly support this, it dawned on me. The signature of ItemView.renderHtml is the same as a compiled underscore template. So, in my AMD modules where I define my views, I can just override renderHtml with my pre-compiled template function.

This lets me cleanly bypass your templateSelector/Renderer/TemplateCache without clobbering it, so if I have some views which I want to load lazily, I still can.

Pretty sweet!

Here’s a gist

https://gist.github.com/2576421

that shows you what I’m doing. I’m using require.js and the tpl plugin. The tpl plugin extends the text plugin by returning you the compiled template function instead of just the text string. At developlement time it loads the template asynchronously, but with the require.js build optimizer, it minifies and inlines the template functions in your main application js, which I prefer over lazy loading, particularly for the mobile web where the number of requests matter, and I can use the html5 app cache to store everything. Makes for a very responsive app!

By: Derick Bailey

Derick Bailey — Sun, 29 Apr 2012 04:04:00 +0000

i’d love to see that pull request! i know it could be done a lot better, but i haven’t seen a pull request to do it yet :)

By: Ryan Smith

Ryan Smith — Sat, 28 Apr 2012 22:53:00 +0000

Even better would be using the r.js optimizer from require.js and the tpl plugin to pre-compile and concatenate and minify them at build time.

I can see some benefit of lazy-loading templates to speed initial page load, but you could also build several template bundles for different parts of the application.

I’ve been using Marionette the last month or so, and extended the template support to handle r.js optimized templates even before you added the enhancements to your TemplateCache. Your enhancements are closer, but still not quite the optimal solution I’d like. I’ll submit a pull request soon to see what you think.

By: Anonymous

Anonymous — Tue, 10 Apr 2012 17:28:00 +0000

I am using Cassette and Knockout on the client. Cassette uses KO 1.6, not 2.0+. I’ve been trying to figure out if I can update it because if I can, that would be awesome. I’ve opened an issue on it.
https://github.com/andrewdavey/cassette/issues/219

If someone better at figuring this out would like to help… that’d be great.

By: Prabir

Prabir — Tue, 10 Apr 2012 13:47:00 +0000

Another alternative solution would be to precompile templates in server side.
Using Cassette in asp.net and hogan.js you can precompile the mustache templates. http://getcassette.net/documentation/html-templates/mustache-hoganjs
http://twitter.github.com/hogan.js/