...<script src="jquery.js" type="text/javascript"></script><script src="jquery.plugin.js" type="text/javascript"></script><script src="view.js" type="text/javascript"></script><script src="widget.js" type="text/javascript"></script><script src="i18n.js" type="text/javascript"></script><script src="app.js" type="text/javascript"></script><script src="strings.js" type="text/javascript"></script>...

• Insert script tags manually.               
• Keep the scripts in order.
• Global scope pollution.
• Blocking/Synchronize.

• Don't write your javascript in one big file. Separate it to smaller files.
  
• When you have lots of small pieces you need to start working with dependencies and the worst of all - dependency management.
  
• Manual dependency management using script tags, might fit for a small project, but.... there are no small projects.
  
• Build system alone still doesn't  solve the problem, one still needs to keep the scripts in order.

//define namesapcesvar App = {};
App.Views = {};
App.Views.Home = {};
App.Views.Home.Config = {};

//get some property of deep namespace
var myColor = App.Views.Home.Config.backgroundColor;

if(App && App.HasThisProp && App.HasThisProp.AndThisProp && App.HasThisProp.AndThisProp.SomeWantedNamespace && App...........)

var closer = App.HasThisProp.AndThisProp.SomeWantedNamespace;var myVar = closer.myVar;
var myOtherVar = closer.myOtherVar;

• Many ways to do it wrong.
• Developers try to enforce traditional inheritance on javascript prototypal inheritance.
• Implement the super method in javascript is hard.
  
• Deep prototype chains leads to slow lookups.
  

• Separation of concerns.
  
• Encapsulation.
  
• Maintainability.
  
• Testability.
  
• Code reusability.
  
• Easy to distribute.
  
• Easy to understand.

• No global scope pollution.
• Async loading.
• Differed loading (just in time).
• Private variables.
• Faster scope lookups.
• Easier script management.

var counter = (function(){    var count = 0; //private    return {        get: function(){            return count;        },        add: function(){            return count++;        },        reset: function(){            count = 0;        }    };}());

 var counter = (function(){
    var count = 0;    function get(){
        return count;
    }    function add(){
        return count++;
    }    function reset(){
        count = 0;
    }    function add2(){       return add(), add();    }    return {
        get: get,        add: add,        add2: add2,        reset: reset
    };}());

• Better than nothing.
• Create a separate scope.
• Can create private variables.
• Create separation of concerns.

• Uses global scope for the return value.
• Still needs Handle dependencies manually.
• Each module instance duplicate all the methods

 define(id?, dependencies?, factory*);

 define('viewModule', ['counterModule'], function(counter){
        var views = {};
    return {
        register: function(viewName, viewData){
           counter.add();            views[viewName] = viewData;        },        count: function(){             return counter.get();        }        ....
    };
});

 define('counterModule', function(){    var staticCount = 0;    
    return function Counter() {       var count = 0;        return {
            add: function(){                staticCount++;                 return count++;
            },
            reset: function(){                staticCount -= count;                     count = 0;
            },
            get: function(){
                return count;
            },            getGlobalCount: function(){                return staticCount;                        }
        };
    }});

 define('otherModule', ['counterModule'], function(Counter){
    
    var views = {};
    var counter = new Counter();     return {        ...
        register: function(viewName, viewData){
            counter.add();
            views[viewName] = viewData;
        },
        count: function(){
            return counter.get();
        }
        ...
    };
});

require('module.name');exports.someApi = {};module;

exports.add = function(a, b){    return a + b;}exports.subtract = function(a, b){
    return a - b;
}

var Math = require('Math');Math.add(1, 2); // 3Math.subtract(1, 2); // -1

exports.myClass = function(){
    this.startTime = Date.now();
}
exports.myClass.prototype.elapsedTime = function(){
    return Date.now() - this.startTime;
}

var someObject = {   someProperty: {}};
var someVar = someObject.someProperty;someVar = function(){};
console.log(someObject.someProperty); // {} 

module.exports = function(){
    this.startTime = Date.now();
}

module.exports.prototype.elapsedTime = function(){
    return Date.now() - this.startTime;
}

define(function(require, module, exports){     var otherModule = require('otherModule');
     exports = {         add:function(x, y){             return x + y;         }     }}); 

 (function (root, factory) {  if (typeof define === 'function' && define.amd) {
    // AMD
    define('myModule', ['pkg/A', 'pkg/B'], function (A, B) {
      return factory(A, B);
    });  } else if (typeof exports === 'object') {
  // Node.js
    module.exports = factory(require('pkg/A'), require('pkg/B'));  } else {
    // Browser globals
    root.myModule = factory(root.A, root.B);
  }}(this, function (B, B) {
  var myModule = {};
  return myModule;
})); 

<!doctype html>
<html>
    <head>
        <title>Sexy HTML</title>
	<link rel="stylesheet" href="css/sexy.css"/>
    </head>
    <body>
	<script data-main="main" src="require.js"></script>
    </body>
</html>

require(['app'], function (app) {    app.start();}, function (err) {        require(['logger'], function (logger) {        logger.error('App Failed To Load Restarting!');        location.reload();    });

});

• Used to load top level resources.
  
• Used to load scripts dynamically.

• Used to define modules.

// define a module that load content dynamically
define(['require', 'login', 'text!template'],
    function (require, login, template) {
	
      login.open(template);
      login.onOK = function () {        //load some scripts lazily          require(['app'], function (app) {
	  login.resolve('success');          app.start();        });
      }      //handle failed login here...      return login.promise();    }
)

amd! PLUGINS

requirejs.config({  enforceDefine : true,  baseUrl:'js/myApp'
  paths : {    handlebars:'lib/handlebars',    someModule:'modules/someModule',    jquery : [      'http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min',       'lib/jquery'    ]  }
});

requirejs.config({
    shim: {        'app.drawCirclePlugin': ['app']        'drawSVGPlugin': {            deps: ['app'],            exports: 'drawSVG'        }
    }
});

requirejs.config({
    map: {
        'some/newmodule': {            'dependency': 'dependency.version.2'        },        'some/oldmodule': {            'dependency': 'dependency.version.1'
        }
    }
});

var require1 = requirejs.config({  context: "version1",  baseUrl: "app/lib/version/1"});
var require2 = requirejs.config({  context: "version2",  baseUrl: "app/lib/version/2"});

• Minify resources (javascript,html,css,images).
• Concat files (gzip is happier).
• Drink coffee.
• Analyze code coverage.
• Run our awesome test suite.
• Find errors that we do not find.
• Run fancy command line tools.

({
    baseUrl: ".",
    name: "main",
    out: "main-built.js",
    paths: {
        jquery: "empty:"
    }
})

MODULE

module 'math' {
    export function sum(x, y) {
        return x + y;
    }
    export var pi = 3.141593;
}

import { sum, pi } from "math";
sum(pi,pi);

import $ from "jquery";import { encrypt, decrypt } from "crypto";
import { encrypt as enc } from "crypto";

System.baseURL = '/lib';
//load modules
System.import(['js/test1', 'js/test2'], function(test1, test2) {
  console.log('test1.js loaded', test1);
  console.log('test2.js loaded', test2);
}, function(err) {
  console.log('loading error');
});
//load a script from urlSystem.load('js/libs/jquery-1.7.1.js', function() {
  var $ = System.global.jQuery;
  console.log('jQuery loaded', $);
  $('body').css({'background':'blue'});
});