2. HELLO
my
name
is
Aaron Hardy
·∙
@AARONIUS
AARONHARDY.COM
So8ware
Engineer,
Adobe
Digital
MarkeAng
Suite
We
enable
management,
measurement,
execu1on,
and
op1miza1on
of
digital
adver1sing
and
marke1ng.
3. What
is
dependency
management?
Loading…
The
right
code.
In
the
right
order.
At
the
right
Ame.
At
the
right
speed.
(oh
and
btw,
make
it
easy)
6. What
is
a
module?
A
structure
used
to
encapsulate
methods
and
aTributes
to
avoid
polluAng
the
global
namespace.
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
};
})();
7. What
is
AMD?
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.
8. What
is
RequireJS?
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.
9. Defining
a
module
/js/book.js
define({
title: "My Sister's Keeper",
publisher: "Atria"
});
11. Se]ng
up
your
app
/index.html
<!DOCTYPE html>
<html>
<head>
<title>RequireJS Example</title>
<script data-main="js/main"
src="js/libs/require.js"></script>
</head>
<body/>
</html>
12. Se]ng
up
your
app
/js/main.js
require([
'bookshelf'
], function(bookshelf) {
bookshelf.listBook();
});
13. define()
vs.
require()
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.
15. Defining
a
constructor
module
/js/book.js
define(function() {
var Book = function(title, publisher) {
this.title = title;
this.publisher = publisher;
};
return Book;
});
16. Using
a
constructor
module
/js/bookshelf.js
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);
}
}
};
});
21. 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…
28. OpAmizaAon
using
almond
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