Requirejs

5,054 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
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,054
On SlideShare
0
From Embeds
0
Number of Embeds
99
Actions
Shares
0
Downloads
115
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide
  • Test\n
  • \n
  • 1. DEPENDENCIES - No way to cross-reference javascript (dependencies)\nEvery page needs to repeat the list of scripts, maintain it’s own set of dependencies\n
  • 2. SPEED - Each new script that is included blocks the browser until it is done downloading & runs\n\n
  • 3. EXECUTION ORDER - Managing order of downloading & running scripts- what comes before what & what needs to be on the page afterwards\n
  • \n
  • The easiest way to use it is to just load require.js on the page and point it to a single file that contains the scripts- it will download all scripts in parallel & execute in order\n
  • A single main file that can load any dependencies\n
  • Modules are where require.js really shines.\nJavaScript’s biggest problem is that it was designed to be written and run directly in the browser- they didn’t have to worry about how to manage dependencies in between scripts- they didn’t expect it to grow like it did. Require.js solves this problem for us.\n\n
  • Once you define a module, you can then use that module in any require script and directly call that script as a function\n
  • \n
  • Modules can be named, can require other modules (or files), and pass those modules into the module function\n
  • \n
  • \n
  • Assuming a structure like above, you can build a build script that can trace down through all of your files and build a minified version of each, as well as an overall minified project file\n
  • \n
  • 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.

    ×