Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Dependency Management    with RequireJS      http://requirejs.org/
Who ?Julien CabanèsFront End Developpermail : julien@zeeagency.comtwitter : @JulienCabanesgithub : github.com/ZeeAgency
What are we talkin’ about?• RequireJS.org : Script Module Loader• Browsers && Node && Rhino• Dependencies• Global Pollutio...
ContextLibs of choice  jQuery Backbone
ContextLibs of choice   Plugins  jQuery Backbone
ContextLibs of choice   Plugins   Your Code  jQuery Backbone
Bad ContextLibs of choice     Plugins   Your Code  jQuery Backbone
Good ContextLibs of choice   Plugins   Your Code  jQuery Backbone
DependenciesLibs of choice     Plugins   Your Code  jQuery Backbone
Solution ?<script   src="jquery.min.js"></script><script   src="backbone.min.js"></script>...<script   src="jquery.plugin....
Async Solution ?<script src="LAB.js"></script><script type="text/javascript">$LAB	 .script(jquery.min.js)	 .script(backbon...
Namespace ?var MyNamespace = {};MyNamespace.Config = {…};MyNamespace.Product = function() {…};MyNamespace.Video = function...
AMDNot your CPU...Asynchronous Module Definitionhttps://github.com/amdjs/amdjs-api/wiki/AMD
define()APIdefine(id?, dependencies?, factory);Usagedefine(My-Module, [Another-Module],	 function(AnotherModule) {	 	 // Do...
Example// App/Conf.jsdefine(function() {	 return {	 	 path: ...,	 	 debug: true,	 	 ...	 };});
Example// App/Conf.jsdefine(function() {	 return {	 	 path: ...,	 	 debug: true,	 	 ...	 };});
Example// App/Controller/Product.jsdefine([App/Conf, App/Models/Product, App/Views/Product],function(Conf, Model, View) {	...
Example// App/Controller/Product.jsdefine([App/Conf, App/Models/Product, App/Views/Product],function(Conf, Model, View) {	...
Example// App/Controller/Product.jsdefine([App/Conf, App/Models/Product, App/Views/Product],function(Conf, Model, View) {	...
Example// App/Controller/Product.jsdefine([App/Conf, App/Models/Product, App/Views/Product],function(Conf, Model, View) {	...
Example// App/Controller/Product.jsdefine([App/Conf, App/Models/Product, App/Views/Product],function(Conf, Model, View) {	...
Scope vs. Global Pollution// App/Controller/Product.jsdefine([App/Conf, App/Models/Product, App/Views/Product],function(Co...
Plugins Example// App/View/Product.jsdefine([	   order!FirstModule,	   order!SecondModule,    i18n!fr/some-i18n-bundle,	  ...
Order Plugin// App/View/Product.jsdefine([    	order!FirstModule,            // Keep execution order	    order!SecondModul...
i18n Plugin// App/View/Product.jsdefine([    	order!FirstModule,	    order!SecondModule,     i18n!fr/some-i18n-bundle,    ...
Text Plugin// App/View/Product.jsdefine([    	order!FirstModule,	    order!SecondModule,     i18n!fr/some-i18n-bundle,	   ...
CoffeeScript Plugin// App/View/Product.jsdefine([    	order!FirstModule,	    order!SecondModule,     i18n!fr/some-i18n-bun...
Template Plugin// App/View/Product.jsdefine([    	order!FirstModule,	    order!SecondModule,     i18n!fr/some-i18n-bundle,...
Optimizationnode r.js -o name=bootstrap out=built.js baseUrl=js          http://requirejs.org/docs/optimization.html
Remember ?Libs of choice    Plugins   Your Code  jQuery Backbone
Optimized !Libs of choice   Ready for Production  jQuery
Optimized !Libs of choice   Ready for Production  jQuery                   CoffeeScript ?
Optimized !Libs of choice   Ready for Production  jQuery                   CoffeeScript ?                    Templates ?
Optimized !Libs of choice       Ready for Production  jQuery                     CoffeeScript ?                      Templ...
Optimized !Libs of choice    Ready for Production  jQuery                    CoffeeScript ?                     Templates ...
Thx !
Upcoming SlideShare
Loading in …5
×

ParisJS #10 : RequireJS

5,691 views

Published on

Published in: Technology, Business

ParisJS #10 : RequireJS

  1. 1. Dependency Management with RequireJS http://requirejs.org/
  2. 2. Who ?Julien CabanèsFront End Developpermail : julien@zeeagency.comtwitter : @JulienCabanesgithub : github.com/ZeeAgency
  3. 3. What are we talkin’ about?• RequireJS.org : Script Module Loader• Browsers && Node && Rhino• Dependencies• Global Pollution• Optimization
  4. 4. ContextLibs of choice jQuery Backbone
  5. 5. ContextLibs of choice Plugins jQuery Backbone
  6. 6. ContextLibs of choice Plugins Your Code jQuery Backbone
  7. 7. Bad ContextLibs of choice Plugins Your Code jQuery Backbone
  8. 8. Good ContextLibs of choice Plugins Your Code jQuery Backbone
  9. 9. DependenciesLibs of choice Plugins Your Code jQuery Backbone
  10. 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. 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. 12. Namespace ?var MyNamespace = {};MyNamespace.Config = {…};MyNamespace.Product = function() {…};MyNamespace.Video = function() {…};MyNamespace.Audio = function() {…};MyNamespace.Mail = function() {…};
  13. 13. AMDNot your CPU...Asynchronous Module Definitionhttps://github.com/amdjs/amdjs-api/wiki/AMD
  14. 14. define()APIdefine(id?, dependencies?, factory);Usagedefine(My-Module, [Another-Module], function(AnotherModule) { // Do Something });
  15. 15. Example// App/Conf.jsdefine(function() { return { path: ..., debug: true, ... };});
  16. 16. Example// App/Conf.jsdefine(function() { return { path: ..., debug: true, ... };});
  17. 17. Example// App/Controller/Product.jsdefine([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. 18. Example// App/Controller/Product.jsdefine([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. 19. Example// App/Controller/Product.jsdefine([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. 20. Example// App/Controller/Product.jsdefine([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. 21. Example// App/Controller/Product.jsdefine([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. 22. Scope vs. Global Pollution// App/Controller/Product.jsdefine([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. 23. Plugins Example// App/View/Product.jsdefine([ 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. 24. Order Plugin// App/View/Product.jsdefine([ 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. 25. i18n Plugin// App/View/Product.jsdefine([ 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. 26. Text Plugin// App/View/Product.jsdefine([ 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. 27. CoffeeScript Plugin// App/View/Product.jsdefine([ 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. 28. Template Plugin// App/View/Product.jsdefine([ 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. 29. Optimizationnode r.js -o name=bootstrap out=built.js baseUrl=js http://requirejs.org/docs/optimization.html
  30. 30. Remember ?Libs of choice Plugins Your Code jQuery Backbone
  31. 31. Optimized !Libs of choice Ready for Production jQuery
  32. 32. Optimized !Libs of choice Ready for Production jQuery CoffeeScript ?
  33. 33. Optimized !Libs of choice Ready for Production jQuery CoffeeScript ? Templates ?
  34. 34. Optimized !Libs of choice Ready for Production jQuery CoffeeScript ? Templates ? Compiled & Minified so browser doesn’t need to...
  35. 35. Optimized !Libs of choice Ready for Production jQuery CoffeeScript ? Templates ? Compiled & Minified
  36. 36. Thx !

×