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, Py...
excentos – what we doProduct Advisors| Web apps to find the  right product for you| Goal: to perform like a  human sales e...
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 ...
What is a Module?Manual dependency resolution   <head>       <script src="myLib.js"></script>       <script src="myLibPlug...
What is a Module?JavaScript module pattern   var mymodule = (function() {       var a = x,           doSth = function(){.....
What is a Module?| module = resource| declares dependenciesPythonmymodule.py                app.py                        ...
What is a Module?AMDmymodule.js                app.js                 index.htmldefine(function() {        define([       ...
AMD| Asynchronous      ●   Dont block browser      ●   Parallel download and interpretation      ●   Callbacks everywhere....
Loader Pluginsdefine([  "../Widget",  "text!./tpl.html"], function(Widget, tpl) {return new Widget({name: "mainApp", templ...
Load non-modulesrequire([  "dir/foo.js",  "http://host/script.js"], function(/*no return value*/) {// script.js has been l...
Optimize!But arent that too many HTTP requests?| Loading is very efficient     ●   Great for development     ●   Useful fo...
AMD| Predecessors:      ●   Dojo: dojo.require("some.module") (resp. goog.require)      ●   LABjs: $LAB.script("some/modul...
Tools| RequireJS        ●   Loader        ●   Optimizer (r.js)| curl.js| ...| Dojo 1.7 provides own AMD loader and build t...
Resources| requirejs.org     ●   Great docs about AMD in general, too| github.com/amdjs     ●   Official spec in the wiki|...
Conclusion| Should I use it?| How mature?| Will it stay?
danke!Martin Stadler | Email: martin@siarp.de | Twitter: @xMartinexcentos GmbHwww.excentos.com
Nächste SlideShare
Wird geladen in …5
×

Asynchronous Module Definition (AMD)

19.590 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie, Design

Asynchronous Module Definition (AMD)

  1. 1. Asynchronous Module Definition (AMD)The missing client-side JavaScript module system.
  2. 2. 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
  3. 3. 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
  4. 4. OverviewAsynchronous Module Definition (AMD)| Motivation| Modules| Loading| Optimization| Conclusion| Questions/Discussion
  5. 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. 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. 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?
  8. 8. 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();
  9. 9. 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>
  10. 10. AMD| Asynchronous ● Dont block browser ● Parallel download and interpretation ● Callbacks everywhere...| Loaded via script tag injection (not XHR + eval) ● Debugging ● X-Domain
  11. 11. 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
  12. 12. Load non-modulesrequire([ "dir/foo.js", "http://host/script.js"], function(/*no return value*/) {// script.js has been loaded.});
  13. 13. 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)
  14. 14. 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
  15. 15. Tools| RequireJS ● Loader ● Optimizer (r.js)| curl.js| ...| Dojo 1.7 provides own AMD loader and build tool.
  16. 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. 17. Conclusion| Should I use it?| How mature?| Will it stay?
  18. 18. danke!Martin Stadler | Email: martin@siarp.de | Twitter: @xMartinexcentos GmbHwww.excentos.com

×