RequireJS
Your SlideShare is downloading.
×
![Loader Plugins
define([
"../Widget",
"text!./tpl.html"
], function(Widget, tpl) {
return new Widget({name: "mainApp"...](https://image.slidesharecdn.com/prsentation-120124095512-phpapp02/85/asynchronous-module-definition-amd-11-320.jpg?cb=1659362154)
![Load non-modules
require([
"dir/foo.js",
"http://host/script.js"
], function(/*no return value*/) {
// script.js has...](https://image.slidesharecdn.com/prsentation-120124095512-phpapp02/85/asynchronous-module-definition-amd-12-320.jpg?cb=1659362154)
Check these out next
More Related Content
Related Books
Free with a 30 day trial from Scribd
Asynchronous Module Definition (AMD)
- 1. Asynchronous Module Definition (AMD) The missing client-side JavaScript module system.
- 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
- 4. Overview Asynchronous Module Definition (AMD) | Motivation | Modules | Loading | Optimization | Conclusion | Questions/Discussion
- 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?
- 8. 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();
- 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)
- 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. Tools | RequireJS ● Loader ● Optimizer (r.js) | curl.js | ... | Dojo 1.7 provides own AMD loader and build tool.
- 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?
- 18. danke! Martin Stadler | Email: martin@siarp.de | Twitter: @xMartin excentos GmbH www.excentos.com
