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

More Related Content

What's hot

Viewers also liked

Similar to RequireJS

More from Sebastiano Armeli

Recently uploaded

RequireJS