ParisJS #10 : RequireJS
•
14 likes•2,817 views
The document discusses dependency management in JavaScript using RequireJS. It introduces RequireJS as a script module loader that handles dependencies and avoids global namespace pollution. It demonstrates how to define modules with dependencies using AMD (Asynchronous Module Definition) and the define() function. It shows examples of using RequireJS to load configuration, models, views and plugins. It also discusses optimizing modules for production using the r.js optimizer to compile and minify code.
Report
Share
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
More Related Content
What's hot
What's hot (20)
Similar to ParisJS #10 : RequireJS
Similar to ParisJS #10 : RequireJS (20)
Recently uploaded
Recently uploaded (20)
ParisJS #10 : RequireJS
- 1. Dependency Management with RequireJS http://requirejs.org/
- 2. Who ? Julien Cabanès Front End Developper mail : julien@zeeagency.com twitter : @JulienCabanes github : github.com/ZeeAgency
- 3. What are we talkin’ about? • RequireJS.org : Script Module Loader • Browsers && Node && Rhino • Dependencies • Global Pollution • Optimization
- 4. Context Libs of choice jQuery Backbone
- 5. Context Libs of choice Plugins jQuery Backbone
- 6. Context Libs of choice Plugins Your Code jQuery Backbone
- 7. Bad Context Libs of choice Plugins Your Code jQuery Backbone
- 8. Good Context Libs of choice Plugins Your Code jQuery Backbone
- 9. Dependencies Libs of choice Plugins Your Code jQuery Backbone
- 10. Solution ? <script src="jquery.min.js"></script> <script src="backbone.min.js"></script> ... <script src="jquery.plugin.js"></script> <script src="jquery.plugin.js"></script> ... <script src="my-code.js"></script> <script src="my-code.js"></script> <script src="my-code.js"></script> <script src="my-code.js"></script> <script src="my-code.js"></script> ...
- 11. Async Solution ? <script src="LAB.js"></script> <script type="text/javascript"> $LAB .script('jquery.min.js') .script('backbone.min.js') ... .script('jquery.plugin.js') .script('jquery.plugin.js') .script('jquery.plugin.js') ... .script('my-code.js') .script('my-code.js') .script('my-code.js'); </script>
- 12. Namespace ? var MyNamespace = {}; MyNamespace.Config = {…}; MyNamespace.Product = function() {…}; MyNamespace.Video = function() {…}; MyNamespace.Audio = function() {…}; MyNamespace.Mail = function() {…};
- 13. AMD Not your CPU... Asynchronous Module Definition https://github.com/amdjs/amdjs-api/wiki/AMD
- 14. define() API define(id?, dependencies?, factory); Usage define('My-Module', ['Another-Module'], function(AnotherModule) { // Do Something } );
- 15. Example // App/Conf.js define(function() { return { path: '...', debug: true, ... }; });
- 16. Example // App/Conf.js define(function() { return { path: '...', debug: true, ... }; });
- 17. Example // App/Controller/Product.js define(['App/Conf', 'App/Models/Product', 'App/Views/Product'], function(Conf, Model, View) { // Locale & Private Vars !!! var myPrivateVar = {...}; // API return { show: function(productId) { console.log(Conf.path); var productView = new View(); productView.setModel(Model.getById(productId)); return productView.render(); }, ... }; });
- 18. Example // App/Controller/Product.js define(['App/Conf', 'App/Models/Product', 'App/Views/Product'], function(Conf, Model, View) { // Locale & Private Vars !!! var myPrivateVar = {...}; // API return { show: function(productId) { console.log(Conf.path); var productView = new View(); productView.setModel(Model.getById(productId)); return productView.render(); }, ... }; });
- 19. Example // App/Controller/Product.js define(['App/Conf', 'App/Models/Product', 'App/Views/Product'], function(Conf, Model, View) { // Locale & Private Vars !!! var myPrivateVar = {...}; // API return { show: function(productId) { console.log(Conf.path); var productView = new View(); productView.setModel(Model.getById(productId)); return productView.render(); }, ... }; });
- 20. Example // App/Controller/Product.js define(['App/Conf', 'App/Models/Product', 'App/Views/Product'], function(Conf, Model, View) { // Locale & Private Vars !!! var myPrivateVar = {...}; // API return { show: function(productId) { console.log(Conf.path); var productView = new View(); productView.setModel(Model.getById(productId)); return productView.render(); }, ... }; });
- 21. Example // App/Controller/Product.js define(['App/Conf', 'App/Models/Product', 'App/Views/Product'], function(Conf, Model, View) { // Locale & Private Vars !!! var myPrivateVar = {...}; // API return { show: function(productId) { console.log(Conf.path); var productView = new View(); productView.setModel(Model.getById(productId)); return productView.render(); }, ... }; });
- 22. Scope vs. Global Pollution // App/Controller/Product.js define(['App/Conf', 'App/Models/Product', 'App/Views/Product'], function(Conf, Model, View) { // Locale & Private Vars !!! var myPrivateVar = {...}; // API return { show: function(productId) { console.log(Conf.path); var productView = new View(); productView.setModel(Model.getById(productId)); return productView.render(); }, ... }; });
- 23. Plugins Example // App/View/Product.js define([ 'order!FirstModule', 'order!SecondModule', 'i18n!fr/some-i18n-bundle', 'text!some-text-file.txt', 'cs!some-coffee', 'tpl!App/View/Product.tpl' ], function(First, Second, bundle, text, coffee, productTpl) { // API return Backbone.View.extend({ render: function() { return productTpl({ model: this.model.toJSON() }); } }); });
- 24. Order Plugin // App/View/Product.js define([ 'order!FirstModule', // Keep execution order 'order!SecondModule', // requirejs.org/docs/api.html#order 'i18n!fr/some-i18n-bundle', 'text!some-text-file.txt', 'cs!some-coffee', 'tpl!App/View/Product.tpl' ], function(First, Second, bundle, text, coffee, productTpl) { // API return Backbone.View.extend({ render: function() { return productTpl({ model: this.model.toJSON() }); } }); });
- 25. i18n Plugin // App/View/Product.js define([ 'order!FirstModule', 'order!SecondModule', 'i18n!fr/some-i18n-bundle', // Load i18n bundle 'text!some-text-file.txt', // requirejs.org/docs/api.html#i18n 'cs!some-coffee', 'tpl!App/View/Product.tpl' ], function(First, Second, bundle, text, coffee, productTpl) { // API return Backbone.View.extend({ render: function() { return productTpl({ model: this.model.toJSON() }); } }); });
- 26. Text Plugin // App/View/Product.js define([ 'order!FirstModule', 'order!SecondModule', 'i18n!fr/some-i18n-bundle', 'text!some-text-file.txt', // Guess what ? 'cs!some-coffee', // requirejs.org/docs/api.html#text 'tpl!App/View/Product.tpl' ], function(First, Second, bundle, text, coffee, productTpl) { // API return Backbone.View.extend({ render: function() { return productTpl({ model: this.model.toJSON() }); } }); });
- 27. CoffeeScript Plugin // App/View/Product.js define([ 'order!FirstModule', 'order!SecondModule', 'i18n!fr/some-i18n-bundle', 'text!some-text-file.txt', 'cs!some-coffee', // returns compiled CoffeeScript ! 'tpl!App/View/Product.tpl' // github.com/jrburke/require-cs ], function(First, Second, bundle, text, coffee, productTpl) { // API return Backbone.View.extend({ render: function() { return productTpl({ model: this.model.toJSON() }); } }); });
- 28. Template Plugin // App/View/Product.js define([ 'order!FirstModule', 'order!SecondModule', 'i18n!fr/some-i18n-bundle', 'text!some-text-file.txt', // My Favorite Plugin ! (mine...) 'cs!some-coffee', // Returns a compiled template ! 'tpl!App/View/Product.tpl' // github.com/ZeeAgency/requirejs-tpl ], function(First, Second, bundle, text, coffee, productTpl) { // API return Backbone.View.extend({ render: function() { return productTpl({ model: this.model.toJSON() }); } }); });
- 29. Optimization node r.js -o name=bootstrap out=built.js baseUrl=js http://requirejs.org/docs/optimization.html
- 30. Remember ? Libs of choice Plugins Your Code jQuery Backbone
- 31. Optimized ! Libs of choice Ready for Production jQuery
- 32. Optimized ! Libs of choice Ready for Production jQuery CoffeeScript ?
- 33. Optimized ! Libs of choice Ready for Production jQuery CoffeeScript ? Templates ?
- 34. Optimized ! Libs of choice Ready for Production jQuery CoffeeScript ? Templates ? Compiled & Minified so browser doesn’t need to...
- 35. Optimized ! Libs of choice Ready for Production jQuery CoffeeScript ? Templates ? Compiled & Minified
- 36. Thx !