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)

More Related Content

What's hot

Similar to Asynchronous Module Definition (AMD)

Recently uploaded

Asynchronous Module Definition (AMD)