RequireJS

RequireJS
Sebastiano Armeli-Battana
@sebarmeli
NDC 2013, Oslo (Norway)
Thursday, June 13, 13

1
2
3
4
5
6

app.js
view.js

view.js
------------

app.js
------------

app.js view.js
helpers.jsview2.js
helpers2.js
model.js

app.js view.js
helpers.jsview2.js
helpers2.js
model.js
1
2
3
5
4
6

app.js view.js
helpers.jsview2.js
helpers2.js
model.js
1
2
3
5
4
6
4
1
3
2
5
6

var module = (function(){
// private variables, methods
var title = “”;
function f1() {}
return {
// public/privileged methods
getTitle: function(){
return title;
}
}
}()) ;
MODULE PATTERN

define(function () {
var title = “”;
function f1() {}
return {
getTitle: function() {
return title;
}
}
});
RJS MODULE PATTERN

define(id?, dependencies?, factory)

index.html
js /
-- main.js
-- helpers.js
-- app /
-- views /
-- view1.js
-- vendor /
-- require.js
view1.js
------------
define([‘helpers’],
function(helpers){
return {
init: function(){}
}
});
define(function(){
// code here
});
helpers.js
------------

define([‘module1’, module2’],
function (dep1, dep2) {
// do something
}
)
Multiple Dependencies

require(dependencies?, factory)

index.html
------------
<script src=”js/vendor/require.js”
data-main=”js/main.js”
main.js
------------
require([‘view1’],function(view1){
view1.init();
});
index.html
js /
-- main.js
-- helpers.js
-- app /
-- views /
-- view1.js
-- vendor /
-- require.js

main.js
------------
require.config({
baseUrl: ‘./js’,
paths: {
‘view1’: ‘app/views/view1’
}
});
require([‘view1’],function(view1){
view1.init();
});
index.html
js /
-- main.js
-- helpers.js
-- app /
-- views /
-- view1.js
-- vendor /
-- require.js

NO blocking!

var node = document.createElement('script');
node.async = true;
node.setAttribute('data-requirecontext',
context.contextName);
node.setAttribute('data-requiremodule', moduleName);
node.src = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(node);
Script Loader

require() asynchronous
de!ne() - de!ne.amd
AMD
well suited for browser

exports.render = function() {};
var module = require(‘view1’);
NO de!ne()
require() synchronous
Server-side approach

Simpliﬁed CommonJS Wrapper
define(function(require, exports, module){
// Module required before the callback runs
var helpers = require(‘helpers’);
exports.render = function() {
helpers.doSomething();
}
});

define([“dep1”], function(require){
var helpers = require(‘helpers’);
//code here
});

if ( typeof define === "function" &&
define.amd ) {
define( "jquery", [], function () {
return jQuery;
});
}

index.html
js /
-- main.js
-- helpers.js
-- app /
-- views /
-- view1.js
-- vendor /
-- require.js
-- backbone.js
-- underscore.js
-- jquery.js
main.js
------------
require.config({
baseUrl: ‘js/vendor’,
shim: {
‘underscore’:{
exports: ‘_’
},
‘backbone’: {
deps: [‘jquery’, ‘underscore’],
exports: ‘Backbone’
}
}
});
require([‘backbone’],function(Backbone){
Backbone.history.start();
});

LOADER PLUGINS
• i18n!, async!, domReady!
• text!, css!, json!, cs!, hbs!
[plugin Module ID]![resource ID]

main.js
------------
require.config({
baseUrl: ‘./js’
});
require([‘text!partials/file.txt’],
function(txt) {
// txt goes here
});
index.html
js /
-- main.js
-- vendor /
-- require.js
-- text.js
-- partials /
-- !le.txt

main.js
------------
require.config({
baseUrl: ‘./js’
});
require([‘css!../css/style.css’],
function() {
// After css is loaded
});
index.html
js /
-- main.js
-- vendor /
-- require.js
-- css.js
css /
-- style.css

3 requests!

r.js
npm install -g requirejs
OPTIMIZER

r.js -o tools/build.js

build.js
------------
({
appDir:'../',
mainConfigFile: '../js/main.js',
dir: "../build",
modules: [
{
name: "../main"
}
]
})
index.html
js /
-- main.js
-- helpers.js
-- app /
-- views /
-- view1.js
-- vendor /
-- require.js
tools /
-- build.js

build/js/main.js
----------------
index.html
build /
-- index.html
-- build.txt
-- js /
-- main.js
-- helpers.js
-- app /
-- views /
-- view1.js
-- vendor /
-- require.js
-- tools /
-- build.js
js/vendor/../main.js
----------------
js/helpers.js
js/vendor/view1.js
js/vendor/../main.js
build/build.txt
----------------

OPTIMIZER
1 request!

({
appDir:'../',
mainConfigFile: '../js/main.js',
dir: "../build",
preserveLicenseComments: false,
removeCombined: true,
optimize: "uglify2",
modules: [
{
name: "../main",
excludeShallow: [
"view1"
]
}
]
})

SOURCE MAPS
({
// other options
generateSourceMaps: true,
optimize: ‘uglify2’
})

Testing
define([“view1”], function(view1) {
describe(“view1”, function(){
it(“should do something”, function(){
// expectations
});
});
});

runner.html
------------
runner.html
spec /
-- view1Spec.js
-- main.js
js /
-- vendor /
-- require.js
<script src=”js/vendor/require.js”
data-main=”spec/main.js”
require.config({
baseUrl: ‘js/vendor’,
paths: {
‘view1’: ...,
‘spec’: ‘../../spec’
}
});
main.js
------------

runner.html
spec /
-- view1Spec.js
-- main.js
js /
-- vendor /
-- require.js
-- domReady.js
require.config({
...
});
require(
[“domReady!”,“spec/view1Spec”],
function(document){
jasmine.getEnv().addReporter(
new jasmine.HtmlReporter()
);
jasmine.getEnv().execute();
});
main.js
------------

GRUNT integration??
npm install -g grunt-cli
Grunt!le
How to get Grunt?

GRUNT integration??
grunt-contrib-requirejs
npm install -g grunt-cli
npm install grunt-contrib-require-js --save-dev
Grunt!le
How to get Grunt?

module.exports = function(grunt) {
var config = require(“build”);
grunt.initConfig({
requirejs: {
compile: {
options: config
}
}
grunt.loadNpmTasks('grunt-contrib-requirejs');
}
Gruntfile.js
------------

grunt requirejs

ES6 - Modules
Module de!nition
module [module ID]
export [variable | function]
Module dependency
import { [var | fn] } from [module ID]

ES6 - Modules
module “helpers” {
}
module “view1” {
import helpers from “helpers”;
exports function init() {...};
}

Recap
• Modularity

Recap
• No globals
• Modularity

Recap
• Async Script loader
• No globals
• Modularity

Recap
• No globals
• Optimization
• Modularity

Recap
• Future proof
• No globals
• Optimization
• Modularity

http://requirejs.com
https://github.com/asciidisco/grunt-requirejs
@sebarmeli
https://github.com/amdjs/amdjs-api/wiki/AMD
http://wiki.ecmascript.org/doku.php?id=harmony:modules

RequireJS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to RequireJS

Similar to RequireJS (20)

More from Sebastiano Armeli

More from Sebastiano Armeli (11)

Recently uploaded

Recently uploaded (20)

RequireJS