How do AMD loaders work under the hood?

amd, javascript

Solution

As you know, "AMD" (Asynchronous Module Definition (AMD)) is a specific API. There are many AMD-compatible "loaders", including RequireJS, curl.js and Dojo (among others).

Just as frameworks like JQuery and Dojo give you an API over raw Javascript; a program that uses AMD:

1) requires you an AMD-compatible .js library,

2) demands certain programming "rules" and "conventions", and

3) Ultimately sits "on top" of Javascript, which runs on your "Javascript engine" (be it IE, Chrome, Firefox - whatever).

Here are a couple of links I found useful:

https://www.ibm.com/developerworks/mydeveloperworks/blogs/94e7fded-7162-445e-8ceb-97a2140866a9/entry/loading_jquery_with_dojo_1_7_amd_loader2?lang=en

http://dojotoolkit.org/reference-guide/1.8/loader/amd.html

http://blog.millermedeiros.com/amd-is-better-for-the-web-than-commonjs-modules/

http://addyosmani.com/writing-modular-js/

PS: To answer your immediate question, the latter link has a bit of discussion about "require()" and "dynamically_loaded dependencies".

Problem

So I've been using require.js for while now, but I realized that I actually don't know how it works under the hood. It says that it's an AMD loader. I do understand that CommonJS is synchronous, which means that it blocks execution of other codes while it's being loaded. On the other hand, AMD is asynchronous. This is where I get confused. When I define a module, it has to load a,b,c in order to execute the callback. How does asynchronous work here? - Isn't it synchronous when it has to load those three dependencies first? - Does it mean that AMD loads a,b,c asynchronously then checks to see if those files are loaded (doesn't care about the order) then execute the callback? ``` define("name",["a","b","c"], function(a,b,c){ }); ```

Original source