Possibility to store/restore Ember.TEMPLATES at window.localStorage

Performance
1

Hello fellow Ember enthusiasts :wink:

As I’m developing a big web application which is going to load the needed precompiled Handlebars templates from the backend web server on demand, I can’t rely on browser caching. So, everytime the user is going to refresh his browser, the client would have to load all previous requested, saved and used templates again from the server which I want to avoid.

Is there a possibility to store/restore the Ember.TEMPLATES object with all its content to window.localStorage? Will I have to implement my own solution to achieve this and if so, could someone assist me / give me some advice how to solve this problem? Or are there any arguments against my theory so that I should rethink the whole thing?

Actually, I can’t deliver the whole bunch of precompiled templates to every user on every login, because the app will consist of several hundred templates while the average user (if there will be any ‘average’ user) will need round about 20% of the application the whole day. Unfortunately it’s not possible to serve the 20% for every user, because the area of the app which is used does also differ from user to user… hard to explain but I guess you can imagine what I want to express (hopefully) :slight_smile:

Here’s the link to the topic I started over at Stackoverflow.com: local storage - Ember.js - is it possible to store/restore Ember.TEMPLATES in window.localStorage? - Stack Overflow

Thanks to everyone who took his time and read through this text - every piece of input/help is welcome!

2

This is probably not perfect jquery, but could you do something like …

if (templates = localStorage.getItem('templates')) {
  bootEmber(templates);
} else {
  $.ajax({url: 'your_templates.html'}).done(function(data) {
    localStorage.setItem('templates', data);
    bootEmber(data);
  });
}

function bootEmber(templates) {
  $('head').append(templates);

  App = Ember.Application.create();
  App.Router = ....
  etc ...

}

?

3

In general we discourage cross-posting from Stack Overflow. However, this looks like it delves into ideological choices and API designs so it’s probably good to discuss it here as well.

4

@erikpukinskis thanks for your effort and the code snippet, but I’m searching for another answer, sorry I didn’t express myself clear enough, so let my try to explain the ‘problem’ in another way :smile: :

I want to be able to take the compiled templates, which I loaded into Ember.TEMPLATES cache via Ember.Handlebars.template() and store a flattened (via JSON.stringify() object in window.localStorage. my main problem here is to get the already compiled templates from the cache, as Ember.TEMPLATES[templateName] returns the same function for every template

function (context, options) {
  options = options || {};
  var result = templateSpec.call(container, Handlebars, context, options.helpers, options.partials, options.data);

  var compilerInfo = container.compilerInfo || [],
      compilerRevision = compilerInfo[0] || 1,
      currentRevision = Handlebars.COMPILER_REVISION;

  if (compilerRevision !== currentRevision) {
    if (compilerRevision < currentRevision) {
      var runtimeVersions = Handlebars.REVISION_CHANGES[currentRevision],
          compilerVersions = Handlebars.REVISION_CHANGES[compilerRevision];
      throw "Template was precompiled with an older version of Handlebars than the current runtime. " +
          "Please update your precompiler to a newer version (" + runtimeVersions + ") or downgrade your runtime to an older version (" + compilerVersions + ").";
    } else {
      // Use the embedded version info since the runtime doesn't know about this revision yet
      throw "Template was precompiled with a newer version of Handlebars than the current runtime. " +
          "Please update your runtime to a newer version (" + compilerInfo[1] + ").";
    }
  }

  return result;
}

and I’m a little bit confused, because the Ember.DefaultResolver does return exactly Ember.TEMPLATES[templateName] and I don’t know how to get the compiled template anyhow…

So, my current approach is to query the backend web server for a template, store the precompiled template in a temporary _internalTemplateCache object, then compile the template and store this in Ember.TEMPLATES. If the function to store the templates in the localStorage gets triggered, I grab the _internalTemplateCache and save its contents. On restore, I am able to take the stored, flattened object and push the compiled templates to Ember.TEMPLATES again.

@pwagenet sorry for the crossposting, I just thought it would better fit in at this discussion board (after I posted it over at StackOverflow). I try to not do it again :wink: Do you have an opinion on this topic? Is it ‘bad design’ to handle the application templates like I try to do? Are there any security issues coming up which I didn’t see?

5

@pwagenet I closed the topic over at StackOverflow so that all things related to this discussion are placed here.