Requirejs

require.js
a keynote information loader
about
a javascript module loader

Wednesday, March 27, 13

what is requires

• a javascript module loader


where to get it?

• http://requirejs.org


who has it?

wget http://requirejs.org/docs/release/2.1.5/miniﬁed/require.js
-O ./public/js/require.min.js

wget http://requirejs.org/docs/release/2.1.5/comments/require.js
-O ./public/js/require.js


why do I need it?


why do I need it?
• Web sites are turning into Web apps


why do I need it?
• Code complexity grows as the site gets
bigger


why do I need it?
bigger
• Assembly gets harder


why do I need it?
bigger
• Developer wants discrete JS ﬁles/modules


why do I need it?
bigger
• Developer wants discrete JS ﬁles/modules
• Deployment wants optimized code in just
one or a few HTTP calls


how does it solve this?



• Some sort of #include/import/require



• ability to load nested dependencies



• ability to load nested dependencies
• ease of use for developer but then backed
by an optimization tool that helps
deployment


how do I use require.js?
// index.html
<script data-main="scripts/main" src="scripts/require.js"></script>

// scripts/main.js
require(["loc/module"], function(module) {
//This function is called when scripts/loc/module.js is loaded.
//If module.js calls deﬁne(), then this function is not ﬁred until
//util's dependencies have loaded, and the util argument will hold
//the module value for "helper/util".
});


writing a module, today

(function ($) {
function Foo() {
// do stuff here!
}

new Foo();
}(jQuery));


writing a module, today

var $ = require('jquery');

exports.myExample = function () {
// do stuff here!
};


writing a module,
today++: AMD
deﬁne('mod',function(){
return function() {
this.boom = function ()
{
alert( 'Boom' );
};
}
} );


What is AMD?

• Asynchronous Module Deﬁnition


why is this good?

• Uses the CommonJS practice of string IDs for dependencies

• IDs can be mapped to different paths.

• Encapsulates the module definition.

• Clear path to defining the module value.

• Allows setting a function as a return value. Useful for constructor functions.

• Defines a way to include multiple modules in one file.


why is this good?

• Easy to test, because modules are compartmentalized

• Dependency Injection


amd still handles this

(function () {

this.myGlobal = function () {};

}());


require still supports
normal javascript

require(["some/script.js"], function() {
//This function is called after some/script.js has loaded.
});


It’s easy!

• http://requirejs.org/docs/why.html


Optimization!

• We can compile all requirements into one
ﬁle
• We can minimize CSS and JavaScript using
Closure Compiler (or UglifyJS)
• We aren’t worried about CSS today


Can run...

• In the browser
• In Node
• In Rhino


Using Closure
Compiler

• Means uses Java
• Means using Rhino
• r.js


jscompile

#!/bin/sh

java -classpath /Users/jasonlotito/Downloads/rhino1_7R4/js.jar:/Users/
jasonlotito/Downloads/compiler-latest/compiler.jar
org.mozilla.javascript.tools.shell.Main r.js -o $1


Getting the Compiler

• http://requirejs.org/docs/download.html#rjs


compiler

java -classpath /Users/jasonlotito/Downloads/rhino1_7R4/js.jar:/Users/
jasonlotito/Downloads/compiler-latest/compiler.jar


compiler

java -classpath /Users/jasonlotito/Downloads/rhino1_7R4/js.jar:/
Users/jasonlotito/Downloads/compiler-latest/compiler.jar


How to compile?

• jscompile path/to/app.build.js


What’s app.build.js
({
appDir: "../",
baseUrl: "scripts/",
dir: "../../webapp-build",
optimize: "closure",
paths: {
"jquery": "empty:"
},
modules: [
//Optimize the application ﬁles. jQuery is not
//included since it is already in require-jquery.js
{
name: "main"
}
],
closure: {
CompilerOptions: {},
CompilationLevel: 'SIMPLE_OPTIMIZATIONS',
loggingLevel: 'WARNING'
},
generateSourceMaps: true,
preserveLicenseComments: false
})


Alright stop...
Let’s make sense of all these options by establishing our
surroundings, namely, our project structure


Our sample
directory
structure


Our sample
directory
structure
• r.js


Our sample
directory
structure
• r.js
• webapp/


Our sample
directory
structure
• r.js
• webapp/
• app.html


Our sample
directory
structure
• r.js
• webapp/
• app.html
• scripts/


Our sample
directory
structure
• r.js
• webapp/
• app.html
• scripts/
•
app.build.js


Our sample
directory
structure
• r.js
• webapp/
• app.html
• scripts/
•
app.build.js
•
app.build.dev.js


Our sample
directory
structure
• r.js
• webapp/
• app.html
• scripts/
•
app.build.js
•
app.build.dev.js
•
main.js


Our sample
directory
structure
• r.js
• webapp/
• app.html
• scripts/
•
app.build.js
•
app.build.dev.js
•
main.js
•
mod.js


the app
require( ["jquery", "mod"], function ( $, mod )
{
var mod = new mod();
setTimeout( function ()
{
mod.boom();
$( 'h1' ).text( 'Hey you guys!' );
}, 2000 );
{
mod.boom();
$( 'h1' ).text( 'Baby, ruth?' );
}, 4000 );
{
mod.boom();
$( 'h1' ).text( 'Trufﬂe Shufﬂe' );
}, 6000 );
} );


the module

deﬁne('mod',function(){
return function() {
{
alert( 'Boom' );
};
}
} );


modules can include
other modules
deﬁne('mod',['member/photos'],function(photos){
return function() {
{
alert( 'Boom' );
photos.boom();
};
}
} );


Compiled!
whee!


Compiled and minified
via Closure Compiler
(function(){define("mod",[],function(){return function(){this.boom=function()
{alert("Boom")}}});require(["jquery","mod"],function(b,a){a=new
a;setTimeout(function(){a.boom();b("h1").text("Hey you guys!")},
2E3);setTimeout(function(){a.boom();b("h1").text("Baby, ruth?")},
4E3);setTimeout(function(){a.boom();b("h1").text("Truffle Shuffle")},
6E3)});define("main",function(){})})();

//@ sourceMappingURL=main.js.map


Compiled with
Source Maps
closure: {
CompilerOptions: {},
CompilationLevel: 'SIMPLE_OPTIMIZATIONS',
loggingLevel: 'WARNING'
},
generateSourceMaps: true,
preserveLicenseComments: false


.map file
{"version":3,
"file":"main.js",
"lineCount":1,
"mappings":"AAAC,SAAA,GACDA,MAAA,UAAgB,QAAA,SACP,SAAA,GACLC,
SADK,CACOC,QAAAA,GAEVC,KAAA,QAFUD,CADP,CADO,CAAhB,CASA
E,QAAA,kBAA4B,QAAA,CAAWC,CAAX,CAAcC,CAAd,EAEtBA,CAFsB,CAE
hB,IAAIA,CAEdC,WAAA,CAAY,QAAA,GAEVD,CAAAL,KAAA,EACAI,EAAA,
MAAAG,KAAA,iBAHU,CAAZ,KAMAD,WAAA,CAAY,QAAA,GAEVD,CAAAL,
KAAA,EACAI,EAAA,MAAAG,KAAA,eAHU,CAAZ,KAMAD,WAAA,CAAY,QA
AA,GAEVD,CAAAL,KAAA,EACAI,EAAA,MAAAG,KAAA,mBAHU,CAAZ,KAh
B0B,CAA5B,CAwBAR,OAAA,QAAe,QAAA,IAAf,CAlCC,EAAA;",
"sources":["main.js.src"],
"names":
["define","boom","this.boom","alert","require","$","mod","setTimeout","text"]}


testing

define( 'mod', ['Profile'], function ( Profile ) {
function mod() {
this.boom = function () {
return (new Profile()).mockTrueLol();
};
}

return mod;
} );


JSTestDriver
# tests.jstd
load:
- r.js
- webapp/tests/app.build.test.js

# This let’s JSTestRunner serve up all the scripts for require
serve:
- webapp/scripts/*.js

# Could also just do - webapp/tests/*.js
test:
- webapp/tests/GangTest.js
- webapp/tests/LandTest.js
- webapp/tests/ProﬁleTest.js
- webapp/tests/TestJSTestDriver.js


JSTestRunner
# tests.jstd
load:
- r.js
- webapp/tests/app.build.test.js

# This let’s JSTestRunner serve up all the scripts for require
serve:
- webapp/scripts/*.js

# Could also just do - webapp/tests/*.js
test:
- webapp/tests/GangTest.js
- webapp/tests/LandTest.js
- webapp/tests/ProﬁleTest.js
- webapp/tests/TestJSTestDriver.js


TestJSTestDriver
(function (){
var Mod;

setUp: function ( queue ){
queue.call( function ( callbacks ){
require.undef( 'Profile' );
define( 'Profile', function (){
function Profile() {}

Profile.prototype.mockTrueLol = function() {
return true;
};

return Profile;
} );

require( [ 'mod' ], callbacks.add( function ( m ){
Mod = new m();
} ) );
} );
},
// tests here
} );
})();


TestJSTestDriver
(function (){
var Mod;

// setUp here
tearDown: function (){
Mod = null;
},
"test Mod is setup": function (){
assertTrue( Mod.hasOwnProperty( 'boom' ) );
assertTrue( Mod.boom() );
}
} );
})();


TestJSTestDriver
(function (){
var Mod;

// setUp here
tearDown: function (){
Mod = null;
},
"test Mod is setup": function (){
assertTrue( Mod.hasOwnProperty( 'boom' ) );
assertTrue( Mod.boom() );
}
} );
})();

// From Mod

this.boom = function () {
return (new Proﬁle()).mockTrueLol();
};


PHPStorm
Code and Compile Example
They all worked before, honest!


Requirejs

More Related Content

What's hot

Viewers also liked

Similar to Requirejs

Requirejs