Javascript Namespace Inclusion, loaders and all that…!

Intro:
In its current specification, the Javascript language (ECMA-262) has no inherent facility for loading packages/modules other than the handy script tag. Developers had to make do with dynamically creating the script tag and inserting it into the DOM as shown below:

// Very simple asynchronous script-loader

// Create a new script element
var script      = document.createElement('script');

// Find an existing script element on the page (usually the one this code is in)
var firstScript = document.getElementsByTagName('script')[0];

// Set the location of the script
script.src      = "http://example.com/myscript.min.js";

// Inject with insertBefore to avoid appendChild errors
firstScript.parentNode.insertBefore( script, firstScript );

// That's it!

Equivelants such an import, include or require statements present in the design of programming languages such as Java, C/C++, Ruby, Python etc. has enabled developers to prevent namespace pollution and organize their code in a modular fashion
promoting loose coupling and re-use of components in software projects.

So what are the advantages of namespaces:

• Architectural design pattern
• Organize files into shareable modules
• Create a maintainable and re-useable code base
• Improve load speed
• Makes code available to the current namespace

Asynchronous Module Definition (AMD)
AMD evolved as a mechanism for Javascript developers to develop modular Javascript code such that modules and their dependencies could be loaded asynchronously. This would be speed-up load times and avoid blocking or waiting of dependant script during the loading process.

So, as I was looking into developing an app using Ember.js, I was confronted with this simple problem – how to include JS function in files spread into different directories:

MyApp/
    App.js
    index.html
    app/
        assets/
               css/
               img/  
        models/
        views/
        controllers/
        stores/

As I was pondering on this point…yah…I had a list of ideal features in mind that I needed and some nice to have’s:

Requirements/Features:

•  Framework agnostic
• Local and remote loading eg. CDN repositories
•  Dynamic loading
•  Single/unique instance loading of script file
•  Dependency management – load order
•  Parallel or ‘Non-blocking’ loading ie. loading scripts that do not have dependencies
•  Synchronous and Asynchronous loading
•  Loading of assets/resource eg. HTML, CSS, images
• Track versioning
• File concatenation

….Googling and a few clicks….resulted in me compiling a short list of Javascript
loaders for future reference:

Resources:

1.  Ajile – http://ajile.net/
2. RequireJS – http://requirejs.org/docs/api.html 
3. Inject – https://github.com/linkedin/inject
4. jsLoad – http://code.google.com/p/jsload/
5. Sprockets- https://github.com/sstephenson/sprockets – used at 37signals
6. LabJS – http://labjs.com/ – used at Getify Solutions
7. HeadJS – http://headjs.com/
8. LoadRunner – https://github.com/danwrong/loadrunner
9. Yahoo YUILoader – http://developer.yahoo.com/yui/yuiloader/ – Yahoo
10. JQuery.atreq – https://github.com/phleet/jquery.atreq
11. PyramidJS – http://joel.inpointform.net/software-development/pyramid-js-a-web-dependency-manager
12. ControlJS – http://stevesouders.com/controljs
13. StealJS – http://javascriptmvc.com/docs.html#!stealjs – JavascriptMVC
14. LazyLoad – https://github.com/rgrove/lazyload
15. NBL – http://berklee.github.com/nbl
16. CurlJS – https://github.com/unscriptable/curl
17. YepNopeJS – http://yepnopejs.com/
18. PINF- https://github.com/pinf/loader-js
19. Yabble – http://github.com/jbrantly/yabble
20. ScriptJS – http://dustindiaz.com/scriptjs

Simple examples:

LoadRunnerJS:

PyramidJS:

NBL :
src=”nbl.js” data-nbl=”[ [ ‘http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’, ‘jquery.lightbox.min.js’, ‘jquery.carousel.min.js’ ], function(e){ jquery_loaded(e) }, ‘http://www.google-analytics.com/urchin.js’, function(){ urchin_loaded() } ]”>

InjectJS:

CurlJS:

YepNopeJS:<

PINF:

YabbleJS:

ScriptJS: