Requirejs

5,139 views

Published on

A short introduction to Require.JS and JavaScript loaders with a healthy amount of LOLCats sprinkled in. Used as an internal presentation to help teams modularize javascript applications. Try opening the presenter view & looking at notes (I leave the presentations pretty bare)

Published in: Technology
  • Be the first to comment

Requirejs

  1. 1. A JAVASCRIPT MODULE LOADER Ed Siok @sioked Slalom Consulting
  2. 2. THE PROBLEM
  3. 3. DEPENDENCIES< !--scripts--><script type = "text/javascript"src = /Scripts/jquery-1.5.2.min.js > </script><script type="text/javascript " src=/Scripts/jquery-ui-1.8.11.custom.min.js></script><script type="text / javascript " src=/Scripts/jquery.validate.min.js></script><script type="text / javascript " src=/Scripts/jquery.validate.unobtrusive.min.js></script><script type="text / javascript " src=/Scripts/jquery.timers-1.2.js></script><script type="text / javascript " src=/Scripts/jquery.easing.1.3.js></script><script type="text / javascript " src=/Scripts/jquery.cycle.all.min.js></script><script type="text / javascript " src=/Scripts/jquery.functions.js></script><script type="text / javascript " src=/Scripts/jquery.dataTables.min.js></script><script type="text / javascript " src=/Scripts/search.js></script><script type="text / javascript " src=/Scripts/galleryview.setup.js></script><!-- Zone Scripts --><script type=text/javascript src=/Scripts/CMS/GraphicBanner.js></script><script type=text/javascript src=/Scripts/CMS/SimpleTile.js></script><script type=text/javascript src=/Scripts/CMS/FocusAreaTabs.js></script><script type="text / javascript "> var _gaq = _gaq || []; _gaq.push([_setAccount, UA-1988710-1]); _gaq.push([_trackPageview]); (function () { var ga = document.createElement(script); ga.type = text/javascript; ga.async = true; ga.src = (https: == document.location.protocol ? https://ssl : http://www) + .google-analytics.com/ga.js; var s = document.getElementsByTagName(script)[0]; s.parentNode.insertBefore(ga, s); })();</script>
  4. 4. SPEED
  5. 5. EXECUTION ORDER
  6. 6. THE SOLUTION
  7. 7. BASIC USE<script data-main="scripts/main" src="scripts/require.js"></script>
  8. 8. BASIC USErequire([“some/module”, “a.js”, “b.js”], function(){ //This function is called once all scripts aredownloaded and executed});
  9. 9. MODULES
  10. 10. // acura/tsx.jsdefine({ make: "Acura", model: "tsx", horsepower: 201});// main.jsrequire([acura/tsx], function(tsx){ console.log(tsx.horsepower);});
  11. 11. // util.jsdefine(function(){ var SECONDS = 60, MINS = 60, HOURS = 24; function convertDaysToSeconds(days){ return days*HOURS*MINS*SECONDS; } return { daysToSeconds : convertDaysToSeconds }});// main.jsrequire([util], function(util){ var days = 13; var seconds = util.daysToSeconds(13);});
  12. 12. // util.jsdefine("util", ["constants"], function(c){ function convertDaysToSeconds(days){ return days*c.HOURS*c.MINS*c.SECONDS; } return { daysToSeconds : convertDaysToSeconds }});
  13. 13. //A few convenient extras:require(["text!template.html"], function(template){ //The text is passed in as a string into the function console.log(template);});//-----------------------------require.ready(function(){ //fires once the dom is loaded - often in other libraries,but very convenient nonetheless});//-----------------------------require([some/module], function(){ //can nest requires require([a.js,b.js]);});//-----------------------------//Conveniently, this also works:var util = require([util]);
  14. 14. OPTIMIZATION
  15. 15. FIN.

×