AMD (Asynchronous Module Definition) is JavaScript's missing module system for the browser. It's a cosmos of interoperability, efficient loading, dependency resolution, code optimization, etc.
At excentos we're using it as part of the Dojo Toolkit to organize our single-page product advisor web apps.
I will give a short introduction to the concept and some tools and I'm going to explain why everyone with a reasonably-sized code base should adopt it.
2. about me
Martin Stadler
| Frontend engineer /
JavaScript developer @ excentos
| Web developer since 2004
(HTML/CSS, PHP, Python, Drupal,
Plone, jQuery, …)
| Developing modular
single-page apps since 01/2010
| Email: martin@siarp.de
| Twitter: @xMartin
3. excentos – what we do
Product Advisors
| Web apps to find the
right product for you
| Goal: to perform like a
human sales expert
| Single-page JavaScript,
Dojo Toolkit
5. Motivation
| Pages turn into apps
● More code
● More complex
● Serious development, not just a few lines of script
| Design principles
● Separate into reusable components
● Avoid global namespace pollution
6. What is a Module?
Manual dependency resolution
<head>
<script src="myLib.js"></script>
<script src="myLibPlugin.js"></script>
<script src="mySpaghettiCode.js"></script>
</head>
7. What is a Module?
JavaScript module pattern
var mymodule = (function() {
var a = 'x',
doSth = function(){...};
return {
getA: function() {
return doSth(a);
}
};
})();
Where does it live?
| Global? At least reusable.
| Closure? Closure of what?
9. What is a Module?
AMD
mymodule.js app.js index.html
define(function() { define([ <script
"mymodule" src="loader.js"></script>
return { ], function(myMod) { <script>
printSth: function() { require(
alert("sth"); myMod.printSth(); ["app"],
}; function(app) {
}); // if app returned
}); // something, we'd use
// it here...
});
</script>
10. AMD
| Asynchronous
● Don't block browser
● Parallel download and interpretation
● Callbacks everywhere...
| Loaded via script tag injection (not XHR + eval)
● Debugging
● X-Domain
11. Loader Plugins
define([
"../Widget",
"text!./tpl.html"
], function(Widget, tpl) {
return new Widget({name: "mainApp", template: tpl})
});
| text!
● Load via XHR
● E.g. templates for widgets, data
12. Load non-modules
require([
"dir/foo.js",
"http://host/script.js"
], function(/*no return value*/) {
// script.js has been loaded.
});
13. Optimize!
But aren't that too many HTTP requests?
| Loading is very efficient
● Great for development
● Useful for a few or external resources
| For production you need to make a build
● One big file or multiple layers
● Command line tools to resolve dependencies at build time (not run time)
● Inline text resources like template files
● Optimize (e.g. Closure Compiler)
16. Resources
| requirejs.org
● Great docs about AMD in general, too
| github.com/amdjs
● Official spec in the wiki
| Google group amd-implement
| commonjs.org
● General information but not home of AMD any more