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)

1. A JAVASCRIPT MODULE LOADER
Ed Siok
@sioked
Slalom Consulting

2. THE PROBLEM

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. SPEED

5. EXECUTION ORDER

6. THE SOLUTION

7. BASIC USE
<script data-main="scripts/main" src="scripts/require.js"></script>

8. BASIC USE
require([“some/module”, “a.js”, “b.js”],
function(){
//This function is called once all scripts are
downloaded and executed
});

9. MODULES

10. // acura/tsx.js
define({
make: "Acura",
model: "tsx",
horsepower: 201
});
// main.js
require(['acura/tsx'], function(tsx){
console.log(tsx.horsepower);
});

11. // util.js
define(function(){
var SECONDS = 60,
MINS = 60,
HOURS = 24;
function convertDaysToSeconds(days){
return days*HOURS*MINS*SECONDS;
}
return {
daysToSeconds : convertDaysToSeconds
}
});
// main.js
require(['util'], function(util){
var days = 13;
var seconds = util.daysToSeconds(13);
});

12. // util.js
define("util", ["constants"], function(c){
function convertDaysToSeconds(days){
return days*c.HOURS*c.MINS*c.SECONDS;
}
return {
daysToSeconds : convertDaysToSeconds
}
});

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. OPTIMIZATION

16. FIN.