Reusing Backbone Views

Question

I am writing a Backbone app that users move through in a linear fashion. The app works like a tv show whereby the narration leads the user through an episode from scene to scene.

To accomplish this goal, I have one parent Episode view that is responsible for loading the correct Scene view at the correct time. I am happy with how this functions so far.

I need to add in the ability for users to skip from scene to scene at their leisure. Possibly viewing the same scene multiple times throughout the life of the app. My question is whether or not I should be creating a new Scene view every time I load the same scene or if I should create an instance of the scene and then just re-use it when the user loads it a second, third, or fourth time.

The sample below shows how I've gone about reusing the scenes so far.

loadSceneView: function()
{
    var sceneIndex = this.model.getCurrentIndex();

    if(this.scenes[sceneIndex])
    {
        this.scenes[sceneIndex].render();
        console.log('Scene: ' + sceneIndex + ' already loaded. Reusing');
    }
    else
    {
        console.log('Loading Scene: ' + sceneIndex);

        switch(sceneIndex)
        {
            case 0:

                this.scenes[sceneIndex] = new cith.Views.Scene1();
                break;

            case 1:

                this.scenes[sceneIndex] = new cith.Views.Scene2();
                break;

            case 2:

                this.scenes[sceneIndex] = new cith.Views.Scene3();
                break;
        }
    }

    this.currentScene = this.scenes[sceneIndex];
    this.listenTo(this.currentScene, 'scene:ended', this.goToNextScene);

    $('#scene').html(this.currentScene.el);
}

Basically, if the scenes array has an index matching the current sceneIndex just load that view into the dom. Otherwise, create it, keep the reference to it in the scenes array and load it into the DOM.

Can anyone help me to identify the pro's and cons of this approach? Specifically I am concerned with the best performance possible as well as avoiding memory leaks as a side-effect of keeping references to these objects that my (or may not) get used again.

Thanks.

Answer 1

Unless you're building a really resource intensive app this is probably premature optimisation. I'd just go with whatever approach is easiest, and optimise the code later if performance proves to be a problem.

Aside from that, there's probably not an absolute correct answer to this. There's several factors you need to weigh up:

• The time it takes to (re)construct a scene.
• The amount of memory that'd be used by inactive scenes
• How often scenes are going to be used
• How many scenes there are in total

If constructing a scene is quick enough that a user won't notice, and doesn't involve downloading or loading extra resources then it would probably be fine to just re-render views every time. However if rendering takes a noticeable period then maybe you should think about keeping views around. Likewise, I'd definitely keep a cache of resources that might be re-used.

On the other hand, I'd guess your views are going to be using really small amounts of memory (particularly compared to the gigs of RAM most machines & phones have these days) so keeping them in memory probably isn't going to be much of an issue (unless you think you'll end up with thousands of them still in memory - really depends how many views you think the user will interact with in a single session)

If you're really concerned about using too much memory, then you could always just cache some of the views rather than all of them - either by how likely to be re-used they are, or some sort of 'most recent views' scheme where the most recent 20 (or whatever) views are stored in memory, and the rest are constructed when they're needed. However this is a bit more complicated, and quite possibly overkill.

Answer 2

actually, you obviously know it but need confirmation, what you are suggesting is what should be done, the view should be created once only and then rendered when needed, as for memory needs it only depends on the total number of scenes you have, but still, I can't imaging a case where a browser would give up on because it's exhausting memory, so, in my humble opinion, your work is very good, and that's how I would do it.