SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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.
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
17.
Conclusion
| Should I use it?
| How mature?
| Will it stay?