Backbone and RequireJS effective loading

Question

I looked at many examples on the internet how to start develop BB applications with requireJS but I am a kind of lost.

I think AMD has a goal that it load files only if they really needed. Not sooner.

Why I am seeing examples only where the developer put almost every files as a dependency at the beginning of his/her main file?

Here is an example: https://github.com/jcreamer898/RequireJS-Backbone-Starter/tree/master/js

This application instantly loads main.js which depends on app.js which loads routers/home.js which requires views/view.js which loads the view's template and models/model.js which ... and end.

I can't see how to extend this application for example with more views where views' dependencies (its models, templates, collections, third party APIs, etc) load only when the router calls and initialize them. Other way this would be nonsense to use AMD where you load all your files when initializing your app.

Similar example here: http://backbonetutorials.com/organizing-backbone-using-modules/ see router.js file.Actually it loads 'views/projects/list' and 'views/users/list' dependencies while the router does not know yet whether the user will need them in the future or not.

Please advise, thanks in advance!

Answer 1

It's a bit hard to see in such a small sample app, because you have to load something on the initial route, and loading something in Backbone usually means a model, a collection, and a view. Since the sample you linked has only one of each, then yes you're loading almost everything.

Where you start to see the "on demand" feature is where you add additional routes/views/models/etc. Keep in mind, however, that on-demand loading is probably a secondary goal of AMD/RequireJS. The primary goal is modularity. They then give you lots of options for either loading things on demand, or bundling everything up via the optimizer

Also there is nothing which says you have to put all the require() at the beginning of the file. You can do them later (e.g. when initiating a route). Here is a modified version of home.js from your first linked example. If you're using Chrome dev tools you can look at the network tab when the "debugger;" statement pauses execution. Then continue execution and see how the rest of scripts get loaded.

define([
    'jquery', 
    'backbone', 
    'underscore'
    ], 
function($, Backbone, _){
    var Router = Backbone.Router.extend({
        initialize: function(){
            Backbone.history.start();
        },
        routes: {
            '': 'home'
        },
        'home': function(){
            debugger;
            require(['views/view'], function (mainView) {
                mainView.render();
            });
        }
    });

    return Router;
});

See this person's article for more background and where you might go next with it.