Take the 2-minute tour ×

Currently in a Backbone project I am working on, I have combined all templates by modules. Something like:

  • users.html
    • #profileTemplate
    • #changePasswordTemplate
    • ...
  • something.html
    • #someTemplate
    • #anotherTemplate

Then I load templates by modules as required with $.get. I am intending to use Backbone Marionette to load these templates and the suggested method is: link

Backbone.Marionette.TemplateCache.loadTemplate = function(templateId, callback){
  var that = this;
  var url = templateId + ".html";

  $.get(url, function(templateHtml){
    var template = $(templateHtml).find(templateId);

This will mean I have to break my templates down into even more files, meaning alot more network requests. I wonder whats the recommended way of doing this? Combine everything into 1 big file or many small files or somewhere in between by modules? If by modules then I will need to add a parameter to loadTemplate(moduleUrl, templateSelector, callback) havent tried that, will do that tomorrow, but is that recommended even if it does not break anything? I am overriding a 3rd party framework method and worse, changing its method signature? What the recommended solution then?

Maybe since I am using RequireJS, my templates can be loaded via Require?

share|improve this question

1 Answer 1

up vote 3 down vote accepted

I wonder whats the recommended way of doing this?

the recommended way is to not load files asynchronously. load everything you need all at once, right away, whenever possible.

"Async does not make things go fast. Async is what you do when you CAN'T make something go fast enough." - https://twitter.com/izs/status/216954021926285313



Let RequireJS optimize your template by pre-compiling them, and concatenating them in to your app's file w/ the r.js plugin. This will significantly improve the performance of your app.


In the off-chance that you really do need to do async loading of templates and modules, group things in to the smallest number of files possible the way you have been thinking. You would need to modify the code you referenced to handle this.

share|improve this answer
I dont expect my app to go very big, but just for knowledge, is there a limit that that says, once the concatenated files go above say 5MB I should start breaking them up? Just wondering, ... will that limit include JS only or CSS, images etc? –  Jiew Meng Jul 16 '12 at 22:48
5M is HUGE, i would break it up long before then. I don't know if there's a generally accepted heuristic for this, as it largely depends on how much framework code you have vs application code. maybe a few hundred K? Maybe half a meg? You might want to open a new question to get that discussion going, with the "JavaScript" tag –  Derick Bailey Jul 17 '12 at 13:47
Oh 5M was just an example :) –  Jiew Meng Jul 17 '12 at 22:50

Your Answer


