Asynchronous Module Definition (AMD)

Asynchronous Module Definition (AMD)

The missing client-side JavaScript module system.

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

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

What is a Module?

Manual dependency resolution
<head>
<script src="myLib.js"></script>
<script src="myLibPlugin.js"></script>
<script src="mySpaghettiCode.js"></script>
</head>

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?

What is a Module?

| module = resource
| declares dependencies
Python
mymodule.py app.py
$ python app.py
def printSth(): import mymodule
sth
print 'sth'
mymodule.printSth()

NodeJS
mymodule.js app.js
$ node app.js
exports.printSth = var mymodule = sth
function() { require('./mymodule');
console.log('sth');
}; mymodule.printSth();

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>

AMD

| Asynchronous
● Don't block browser
● Parallel download and interpretation
● Callbacks everywhere...
| Loaded via script tag injection (not XHR + eval)
● Debugging
● X-Domain

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

Load non-modules

require([
"dir/foo.js",
"http://host/script.js"
], function(/*no return value*/) {

// script.js has been loaded.

});

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)

AMD

| Predecessors:
● Dojo: dojo.require("some.module") (resp. goog.require)
● LABjs: $LAB.script("some/module.js")
● CommonJS: require("some/module")
| Current support
● jQuery 1.7
● Dojo 1.7
● MooTools 2.0
● EmbedJS
● Backbone/underscore will

Tools

| RequireJS
● Loader
● Optimizer (r.js)

| curl.js
| ...
| Dojo 1.7 provides own AMD loader and build tool.

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

Conclusion

| Should I use it?
| How mature?
| Will it stay?

danke!
Martin Stadler

| Email: martin@siarp.de
| Twitter: @xMartin

excentos GmbH
www.excentos.com

Asynchronous Module Definition (AMD)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Asynchronous Module Definition (AMD)

Similar to Asynchronous Module Definition (AMD) (20)

Recently uploaded

Recently uploaded (20)

Asynchronous Module Definition (AMD)