Embed Size (px)
DESCRIPTION
Citation preview
DEPENDENCY MANAGEMENT with RequireJS
So8ware Engineer, Adobe Digital MarkeAng Suite We enable management, measurement, execu1on, and
op1miza1on of digital adver1sing and marke1ng.
HELLO my name is
Aaron Hardy @AARONIUS AARONHARDY.COM ·∙
Loading… The right code. In the right order. At the right Ame. At the right speed. (oh and btw, make it easy)
What is dependency management?
<script src="script3.js"></script> <script src="script1.js"></script>
<script src="script13.js"></script>
<script src="script7.js"></script>
<script src="script6.js"></script>
<script src="script12.js"></script>
<script src="script4.js"></script>
<script src="script11.js"></script>
<script src="script5.js"></script> <script src="script9.js"></script>
<script src="script8.js"></script>
<script src="script10.js"></script>
<script src="script2.js"></script>
What are the dependencies here?
Old-‐school Dependency Management
Old-‐school Dependency Management
var Calculator = (function(){ function funkify(num) {
return num * Math.random() / Math.random();
}
function add(a, b, getFunky){
var sum = a + b;
return getFunky ? funkify(sum) : sum;
}
return {
add:add
};
})();
console.log(MyMath.add(1, 2));
A structure used to encapsulate methods and aTributes to avoid polluAng the global namespace.
What is a module?
Asynchronous module definiAon. • A mechanism for defining modules such that the module and its
dependencies can be asynchronously loaded. • Suited for a browser environment. • Generally used in tandem with an AMD loader.
What is AMD?
A JavaScript file and module loader. Capable of loading modules defined in the AMD format and their dependencies. Not the only AMD loader (but unofficially the most popular) • curl.js • lsjs • dojo • mootools Open source. New BSD or MIT licensed.
What is RequireJS?
define({ title: "My Sister's Keeper",
publisher: "Atria"
});
/js/book.js
Defining a module
define([ 'book'
], function(book) {
return {
listBook: function() {
alert(book.title);
}
};
});
/js/bookshelf.js
RequesAng dependencies
<!DOCTYPE html> <html>
<head>
<title>RequireJS Example</title>
<script data-main="js/main"
src="js/libs/require.js"></script>
</head>
<body/>
</html>
/index.html
Se]ng up your app
require([ 'bookshelf'
], function(bookshelf) {
bookshelf.listBook();
});
/js/main.js
Se]ng up your app
define() completes three steps: 1. Loads the specified dependencies 2. Calls the callback funcAon 3. Registers the return value from the callback funcAon
require() only performs #1 and #2.
define() vs. require()
DEMO hTp://code.aaronhardy.com/require-‐literal
define(function() { var Book = function(title, publisher) {
this.title = title;
this.publisher = publisher;
};
return Book;
});
/js/book.js
Defining a constructor module
define([ 'book'
], function(Book) {
var books = [
new Book('A Tale of Two Cities', 'Chapman & Hall'),
new Book('The Good Earth', 'John Day')
];
return { listBooks: function() {
for (var i = 0, ii = books.length; i < ii; i++) {
alert(books[i].title);
}
}
};
});
/js/bookshelf.js
Using a constructor module
DEMO hTp://code.aaronhardy.com/require-‐constructor
require.config({ baseUrl: '/another/path',
paths: {
'myModule': 'dirA/dirB/dirC/dirD/myModule’,
'templates': '../templates',
'text': 'libs/text'
}
});
require([
'bookshelf'
], function(bookshelf) {
bookshelf.listBook();
});
/js/main.js
Configuring RequireJS
require.config({ paths: {
jquery: 'libs/jquery',
underscore': 'libs/lodash',
backbone: 'libs/backbone',
},
shim: {
backbone: {
deps: ['underscore', 'jquery'], exports: 'Backbone'
},
underscore: {
exports: '_’
}
}
});
Shimming non-‐AMD libraries
/js/main.js
define([ 'backbone'
], function(Backbone) {
return Backbone.Model.extend({
defaults: {
genre: 'historical'
}
})
});
Using shimmed libraries
/js/book.js
RequireJS plugins
Used for loading and/or transforming different types of dependencies either at run-‐Ame or compile-‐Ame. • text – Loads files as plain text • i18n – InternaAonalizaAon • cs – Loads and compiles CoffeeScript • font – Loads web fonts • image – Loads image files • json – Loads and parses JSON • mdown – Loads and compiles Markdown and many more…
RequireJS text plugin usage
require.config({ 'paths': {
'jquery': 'libs/jquery',
'templates': '../templates',
'text': 'libs/text’
}
});
require([ 'jquery',
'text!templates/book.tpl.html'
], function($, template) {
$(document).ready(function() {
$('body').html(template);
});
});
/js/main.js
DEMO hTp://code.aaronhardy.com/require-‐template
CondiAonal dependencies require([ 'modernizr'
], function(Modernizr) {
var drawCircle = function() { … };
if (Modernizr.canvas) {
drawCircle();
} else {
require(['excanvas'], drawCircle); }
});
Errbacks requirejs.config({ enforceDefine: true,
paths: {
jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min'
}
});
require(['jquery'], function ($) {
//Do something with $ here
}, function (err) {
var failedId = err.requireModules && err.requireModules[0],
if (failedId === 'jquery') {
requirejs.undef(failedId);
requirejs.config({
paths: {
jquery: 'local/jquery'
}
});
require(['jquery'], function () {});
}
});
ConcatenaAon and minificaAon r.js – RequireJS opAmizer able to run in Node or Rhino (Java)
OpAmizaAon
DEMO hTp://code.aaronhardy.com/require-‐opAmizaAon node libs/r.js -‐o baseUrl=. name=main out=main-‐built.js
In producAon, replaces RequireJS and is bundled with built file. • 1K (almond) vs 14K (RequireJS) • Avoids two separate, sequenAal HTTP requests Biggest limitaAon: • No dynamic loading; all dependencies must be in the same file or
loaded beforehand
OpAmizaAon using almond
DEMO hTp://code.aaronhardy.com/require-‐almond node libs/r.js -‐o baseUrl=. name=libs/almond include=main out=main-‐built.js
THANK YOU! @aaronius ·∙ aaronhardy.com
