Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
Prochain SlideShare
Chargement dans…5
×

Asynchronous Module Definition (AMD)

21 102 vues

Publié le

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.

Publié dans : Technologie, Design
  • Hello! I do no use writing service very often, only when I really have problems. But this one, I like best of all. The team of writers operates very quickly. It's called ⇒ www.WritePaper.info ⇐ Hope this helps!
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Sie können Hilfe bekommen bei ⇒ www.WritersHilfe.com ⇐. Erfolg und Grüße!
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Hi there! I just wanted to share a list of sites that helped me a lot during my studies: .................................................................................................................................... www.EssayWrite.best - Write an essay .................................................................................................................................... www.LitReview.xyz - Summary of books .................................................................................................................................... www.Coursework.best - Online coursework .................................................................................................................................... www.Dissertations.me - proquest dissertations .................................................................................................................................... www.ReMovie.club - Movies reviews .................................................................................................................................... www.WebSlides.vip - Best powerpoint presentations .................................................................................................................................... www.WritePaper.info - Write a research paper .................................................................................................................................... www.EddyHelp.com - Homework help online .................................................................................................................................... www.MyResumeHelp.net - Professional resume writing service .................................................................................................................................. www.HelpWriting.net - Help with writing any papers ......................................................................................................................................... Save so as not to lose
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Writing essays, letters and stories increases the learning abilities of students. That's why writing is much necessary in schools and colleges. Students should not feel burden writing work and must feel that it's not something which they can't do. It can be done with little pain. Try this ⇒ www.HelpWriting.net ⇐.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Dating for everyone is here: ♥♥♥ http://bit.ly/2F7hN3u ♥♥♥
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

×