requireJS: shim or amd version of backbone, underscore

Question

I was going through this backbone tutorial. Here both shim and amd version of underscore and backbone has been used to load the script file.

The reason behind has been given that shim doens't load script file asynchronously but the amd version allow to load the jquery,underscore, and backbone asynchronously.

I too see in firebug that it was true. So my question is: which approach is actually good for real/production application.

Answer 1

use require.js . it is really powerful in managing dependencies in large scale JavaScript applications.

AMD

The Asynchronous Module Definition ( AMD ) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. This is particularly well suited for the browser environment where synchronous loading of modules incurs performance, usability, debugging, and cross-domain access problems.

define.amd property

To allow a clear indicator that a global define function (as needed for script src browser loading) conforms to the AMD API, any global define function SHOULD have a property called "amd" whose value is an object. This helps avoid conflict with any other existing JavaScript code that could have defined a define() function that does not conform to the AMD API.

The properties inside the define.amd object are not specified at this time. It can be used by implementers who want to inform of other capabilities beyond the basic API that the implementation supports.

Existence of the define.amd property with an object value indicates conformance with this API. If there is another version of the API, it will likely define another property, like define.amd2, to indicate implementations that conform to that version of the API.

An example of how it may be defined for an implementation that allows loading more than one version of a module in an environment:

 define.amd = {
    multiversion: true
  };

The minimum definition:

 define.amd = {};

Managing the Order of Dependent Files

RequireJS uses Asynchronous Module Loading (AMD) for loading files. Each dependent module will start loading through asynchronous requests in the given order. Even though the file order is considered, we cannot guarantee that the first file is loaded before the second file due to the asynchronous nature. So, RequireJS allows us to use the shim config to define the sequence of files which need to be loaded in correct order. Let's see how we can create configuration options in RequireJS.

requirejs.config({
  shim: {
    'source1': ['dependency1','dependency2'],
    'source2': ['source1']
  }
});

RequireJS allows us to provide configuration options using the config() function. It accepts a parameter called shim which we can use to define the mandatory sequences of dependencies. You can find the complete configuration guide in the RequireJS API documentation.

reference 1) http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/

2) https://github.com/amdjs/amdjs-api/wiki/AMD