The Old Way
•Dependencies defined out-of-band
•Lots of script tags (& requests)
•…or a very very big main.js
•…or a build step in development
•All files load synchronously
Slide 4
Slide 4 text
With RequireJS
? Dependencies defined out-of-band
? Lots of script tags (& requests)
? …or a very very big main.js
? …or a build step in development
? All files load synchronously
Slide 5
Slide 5 text
With RequireJS
Slide 6
Slide 6 text
Define Dependencies
in Scripts
require(['jquery', 'jquery.plugin'], function ($) {
// Main code goes here
});
Slide 7
Slide 7 text
Use require() to Declare
Dependencies For Scripts
require(['jquery', 'jquery.plugin'], function ($) {
// Main code goes here
});
Slide 8
Slide 8 text
Module IDs (Not Paths) in Array
Correspond to Arguments
require(['jquery', 'jquery.plugin'], function ($) {
// Main code goes here
});
Slide 9
Slide 9 text
Write Your Own
Modules!
define(['jquery', 'jquery.plugin'], function ($) {
function makeButton (el) {
$(el).click(function () {
alert('I was clicked!');
});
}
return makeButton;
});
Slide 10
Slide 10 text
Use define() to Declare
Dependencies For Modules
define(['jquery', 'jquery.plugin'], function ($) {
function makeButton (el) {
$(el).click(function () {
alert('I was clicked!');
});
}
return makeButton;
});
Slide 11
Slide 11 text
Dependencies Work the
Same as With require()
define(['jquery', 'jquery.plugin'], function ($) {
function makeButton (el) {
$(el).click(function () {
alert('I was clicked!');
});
}
return makeButton;
});
Slide 12
Slide 12 text
Return the Module
From the Function
define(['jquery', 'jquery.plugin'], function ($) {
function makeButton (el) {
$(el).click(function () {
alert('I was clicked!');
});
}
return makeButton;
});
Slide 13
Slide 13 text
Alternative Syntax Improves
Long Dependency Lists
define(function (require) {
var $ = require('jquery');
require('jquery.plugin');
function makeButton (el) {
$(el).click(function () {
alert('I was clicked!');
});
Slide 14
Slide 14 text
Use Your Module in Other
Modules or Scripts
define(function (require) {
var makeButton = require('makebutton');
makeButton('#element');
.
.
.
.
.
Slide 15
Slide 15 text
Module IDs Are
Based on File Names…
define(function (require) {
var makeButton = require('makebutton');
makeButton('#element');
.
.
.
.
.
Slide 16
Slide 16 text
…But Don’t Use Paths!
That’s What Config is For
require.config({
paths: {
makebutton: 'path/to/makebutton'
}
});
Slide 17
Slide 17 text
…And For “Shimming”
Scripts That Don’t Use AMD
require.config({
shim: {
underscore: {
deps: ['jquery'],
exports: '_'
}
},
paths: {
Slide 18
Slide 18 text
With RequireJS
•Dependencies defined out-of-band
•Lots of script tags (& requests)
•…or a very very big main.js
•…or a build step in development
•All files load synchronously
Slide 19
Slide 19 text
Use r.js Optimizer
For Production
•Module-aware concatenation
•Can build one file or many
$ node r.js -o name=main out=main-built.js
Slide 20
Slide 20 text
With RequireJS
•Dependencies defined out-of-band
•Lots of script tags (& requests)
•…or a very very big main.js
•…or a build step in development
•All files load synchronously