3. A story about JavaScript
and modularization in 4
parts
2
4. A story about JavaScript
and modularization in 4
parts
2
No Modules
(ancient history)
5. A story about JavaScript
and modularization in 4
parts
2
No Modules
(ancient history)
Module Pattern
(industrial revolution)
6. A story about JavaScript
and modularization in 4
parts
2
No Modules
(ancient history)
Module Pattern
(industrial revolution)
Module loaders
(today)
7. A story about JavaScript
and modularization in 4
parts
2
No Modules
(ancient history)
Module Pattern
(industrial revolution)
Module loaders
(today)
Harmony Modules
(tomorrow)
8. A story about JavaScript
and modularization in 4
parts
2
No Modules
(ancient history)
Module Pattern
(industrial revolution)
Module loaders
(today)
Harmony Modules
(tomorrow)
This is really the story of a
language reaching maturity
9. We are Java Devs.
Why should we care?
JavaScript is not just blinky text and popups
Massive applications being built with it on
client AND server
JavaScript is useful and ubiquitous
TIOBE index #9 (March 2014)
But JavaScript is (or was) only a toy
language
3
blinky
10. We are Java Devs.
Why should we care?
JavaScript is not just blinky text and popups
Massive applications being built with it on
client AND server
JavaScript is useful and ubiquitous
TIOBE index #9 (March 2014)
But JavaScript is (or was) only a toy
language
3
21. Module pattern
All code is still global
Each script defines its
own namespace
Pattern has many
variations
9
22. Module pattern
All code is still global
Each script defines its
own namespace
Pattern has many
variations
9
html
script
“foo.js”/
script
“bar.js”/
/html
23. Module pattern
All code is still global
Each script defines its
own namespace
Pattern has many
variations
9
html
script
“foo.js”/
script
“bar.js”/
/html
//
foo.js
foo
=
foo
||
{};
foo.x
=
9;
24. Module pattern
All code is still global
Each script defines its
own namespace
Pattern has many
variations
9
html
script
“foo.js”/
script
“bar.js”/
/html
//
foo.js
foo
=
foo
||
{};
foo.x
=
9;
//
bar.js
(function(foo)
{
var
x
=
“Number
”;
console.log(x
+
foo.x);
})(foo);
26. Still very popular
e.g., jQuery fn namespace*
10
(function(
$
)
{
$.fn.myPlugin=function(args){
//
awesome
plugin
stuff
};
})(
jQuery
);
$.fn.myPlugin(args);
* jQuery 1.7 introduced AMD modules
27. Prognosis?
Name clashes,
but far less common
Easier to mock dependencies
But…
Order matters
Just pray that all
dependencies are available
11
28. Prognosis?
Name clashes,
but far less common
Easier to mock dependencies
But…
Order matters
Just pray that all
dependencies are available
11
Better
29. Prognosis?
Name clashes,
but far less common
Easier to mock dependencies
But…
Order matters
Just pray that all
dependencies are available
11
Better
But still ugggh!
35. CommonJS
Used by node
Bad news for the web
14
var
modA
=
require(‘moduleA’),
modB
=
require(‘moduleB’);
!
export.aVal
=
modA.myVal;
export.bVal
=
modB.myVal;
36. CJS is not web-friendly
15
//
main.js
if
(needSub)
{
require('./sub');
}
//
sub.js
console.log(‘here’);
Conditional loading of modules. (Yay!)
But, that means synchronous loading
Synchronous loading makes for horrendous web
experience
40. Universal Module
Declarations (UMD)
Attempt to unify client and server side modules
BUT not a standard
Semantics different browser vs. server
18
define(function(require,export,module){
var
modA
=
require(‘moduleA’),
modB
=
require(‘moduleB’);
export.aVal
=
modA.myVal;
export.bVal
=
modB.myVal;
});
41. But UMD needs even
more boilerplate
19
All sorts of UMD proposals here:
https://github.com/umdjs/umd
42. But UMD needs even
more boilerplate
19
All sorts of UMD proposals here:
https://github.com/umdjs/umd
//
Boilerplate
if
(typeof
module
===
'object'
typeof
define
!==
'function')
{
var
define
=
function
(factory)
{
module.exports
=
factory(require,exports,module);
};
}
//
Here
is
the
actual
module
define(function
(require,
exports,
module)
{
var
b
=
require('b');
return
function
()
{};
});
44. Browserify example
21
// require the core node events module!
var EventEmitter = require(‘events')!
! .EventEmitter;!
!
//create a new event emitter!
var emitter = new EventEmitter;!
!
// set up a listener for the event!
emitter.on('pizza', function(message){!
console.log(message);!
});!
!
// emit an event!
emitter.emit('pizza', ‘yummy!');
45. Browserify example
21
// require the core node events module!
var EventEmitter = require(‘events')!
! .EventEmitter;!
!
//create a new event emitter!
var emitter = new EventEmitter;!
!
// set up a listener for the event!
emitter.on('pizza', function(message){!
console.log(message);!
});!
!
// emit an event!
emitter.emit('pizza', ‘yummy!');
$
browserify
index.js
bundle.js
47. Prognosis?
No more language level name clashes
Not order dependent
Dependencies explicit in module
Load and edit time checkers
22
48. Prognosis?
No more language level name clashes
Not order dependent
Dependencies explicit in module
Load and edit time checkers
22
Yay! We did it!
49. Prognosis?
No more language level name clashes
Not order dependent
Dependencies explicit in module
Load and edit time checkers
22
Yay! We did it!
...right?
50. Prognosis?
No more language level name clashes
Not order dependent
Dependencies explicit in module
Load and edit time checkers
BUT...
Too many competing module systems
modules for client and server
Modules still not first class
Boilerplate
22
Yay! We did it!
...right?
51. Prognosis?
No more language level name clashes
Not order dependent
Dependencies explicit in module
Load and edit time checkers
BUT...
Too many competing module systems
modules for client and server
Modules still not first class
Boilerplate
22
Yay! We did it!
...right?
Ugggh!
54. ES6 Harmony
25
//
foo.js
module
foo
{
export
var
x
=
42;
}
//
bar.js
import
foo
as
foo;
console.log(foo.x);
55. ES6 modules, today!
Using the ES6 Module Transpiler*
26
*https://github.com/square/es6-module-transpiler
56. Prognosis ES6?
Finally, modules are first class in the
language!
Loaders/runtimes will implement spec
differently
sync loading possible
async loading possible
27
57. Prognosis ES6?
Finally, modules are first class in the
language!
Loaders/runtimes will implement spec
differently
sync loading possible
async loading possible
27
Expected release date? 201X?