• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Asynchronous Module Definition (AMD)

Asynchronous Module Definition (AMD)



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.

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.



Total Views
Views on SlideShare
Embed Views



15 Embeds 3,113

http://mobicon.tistory.com 2161
http://www.excentos.com 788
http://www-stage.excentos.com 59
http://mobinode.tistory.com 35
http://cliveboulton.com 32
http://www-j3.excentos.com 10
http://www.hanrss.com 7
http://localhost 6
http://mobibackend.tistory.com 4
http://www.slashdocs.com 4
http://editor.daum.net 3
https://www.google.de 1
http://www.docseek.net 1
http://a0.twimg.com 1
http://assets.txmblr.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Asynchronous Module Definition (AMD) Asynchronous Module Definition (AMD) Presentation Transcript

    • Asynchronous Module Definition (AMD)The missing client-side JavaScript module system.
    • about meMartin 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
    • excentos – what we doProduct Advisors| Web apps to find the right product for you| Goal: to perform like a human sales expert| Single-page JavaScript, Dojo Toolkit
    • OverviewAsynchronous Module Definition (AMD)| Motivation| Modules| Loading| Optimization| Conclusion| Questions/Discussion
    • 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 dependenciesPythonmymodule.py app.py $ python app.py def printSth(): import mymodule sth print sth mymodule.printSth()NodeJSmymodule.js app.js $ node app.js exports.printSth = var mymodule = sth function() { require(./mymodule); console.log(sth); }; mymodule.printSth();
    • What is a Module?AMDmymodule.js app.js index.htmldefine(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, wed use // it here... }); </script>
    • AMD| Asynchronous ● Dont block browser ● Parallel download and interpretation ● Callbacks everywhere...| Loaded via script tag injection (not XHR + eval) ● Debugging ● X-Domain
    • Loader Pluginsdefine([ "../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-modulesrequire([ "dir/foo.js", "http://host/script.js"], function(/*no return value*/) {// script.js has been loaded.});
    • Optimize!But arent 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: @xMartinexcentos GmbHwww.excentos.com