Loader (main.js)

Download the client side of the application starts with the file download public/js/main.js. File public/js/main.js is the entry point to the library RequireJS public/js/requirejs/require.js,

Sample code is shown below:

<!DOCTYPE html>
<html>
<head>
    ...
    <!-- Require -->
    <script type="text/javascript" data-main="/js/main" src="/js/lib/requirejs/require.js"></script>
    ...
</head>
<body>
    ...
</body>
</html>

RequireJS – is one of the most popular file/module loaders. When you create a large component projects without (or analogs thereof) can not do, because it solves the main problem of such applications:

Dependencies between modules
Clogging of the global scope

Dependencies between modules

Configuring of dependencies between modules is done in the file public/js/main.js.

An example of such a code dependencies can be shown here:

(function ($) {
    ...
    requirejs.config({
        baseUrl: "/js",
        paths: {
            ...
            bootstrap: 'lib/bootstrap/bootstrap.min',
            respond: 'lib/bootstrap/respond.min', // bootstrap for old vers
            html5shiv: 'lib/bootstrap/html5shiv.min', // bootstrap for old vers
            jquery: 'lib/jquery/jquery.min',
            underscore: 'lib/underscore/underscore-min',
            storage: 'lib/jstorage/jstorage',
            backbone: 'lib/backbone/backbone-min',
            ExtendClass: 'lib/Extend.class',
            ...
        },
        shim: {
            'jquery': {
                exports: '$'
            },
            'bootstrap': {
                deps: ['jquery', 'respond', 'html5shiv']
            },
            'underscore': {
                exports: '_'
            },
            'backbone': {
                deps: ['underscore', 'jquery'],
                exports: 'Backbone'
            },
            'app/app': {
                deps: ['ExtendClass', 'bootstrap', 'underscore', 'storage']
            },
            ...
        }
    });
})(jQuery)

App Class

In file public/js/main.js, we create an object of class App public/js/app/app.js.

...
require(['app/app'], function (App) {
    window.app = new App();
});

In class App creates a class object localization Land public/js/app/land.js and the object of common system functions of the class System public/js/app/system.js. And create and register objects with their parameters on the basis of service classes, set for the current page application site.

...
// Create System object
this.sys = new System();
// Create Lang(language) object
this.lb = new Lang(this.sys);

// Add script resources 
if (undefined !== window.BSA) {
    _.each(BSA.ScriptResources, function (resource) {
        require([resource], function (res) {
            // Create resource object 
            if (res && res.RegRunOnLoad) {
                res.RegRunOnLoad();
            }
        });
    });
}
...