Embed Size (px)
DESCRIPTION
EclipseCon 2014 talk, https://www.eclipsecon.org/na2014/session/modular-javascript Source code available: https://github.com/aeisenberg/js-modularity-EclipseCon2014
Citation preview
ModularJavaScriptAndrew Eisenberg
Tasktop Technologies
���1
ModularJavaScriptAndrew Eisenberg
Tasktop Technologies
���1
(Non-)
A story about JavaScript and modularization in 4
parts
���2
A story about JavaScript and modularization in 4
parts
���2
No Modules (ancient history)
A story about JavaScript and modularization in 4
parts
���2
No Modules (ancient history)
Module Pattern (industrial revolution)
A story about JavaScript and modularization in 4
parts
���2
No Modules (ancient history)
Module Pattern (industrial revolution)
Module loaders (today)
A story about JavaScript and modularization in 4
parts
���2
No Modules (ancient history)
Module Pattern (industrial revolution)
Module loaders (today)
Harmony Modules (tomorrow)
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
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
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
But there is a core goodness
���4
But there is a core goodness
���4
No modules
Part I --- Ancient History (c. 1995)
���5
The original approach
Script tags
All code is global
���6
The original approach
Script tags
All code is global
���6
<html> <script “foo.js”/> <script “bar.js”/> </html>
The original approach
Script tags
All code is global
���6
<html> <script “foo.js”/> <script “bar.js”/> </html>
// foo.js var x = 9;
The original approach
Script tags
All code is global
���6
<html> <script “foo.js”/> <script “bar.js”/> </html>
// foo.js var x = 9;
// bar.js console.log(x);
Prognosis?
Name clashes
No explicit dependencies
Order is important
Just pray that all dependencies are available
���7
Prognosis?
Name clashes
No explicit dependencies
Order is important
Just pray that all dependencies are available
���7
Ugggh!
Module pattern
Part II --- Industrial Revolution (c. 2006)
���8
Module pattern
All code is still global
Each script defines its own namespace
Pattern has many variations
���9
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>
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;
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);
Still very populare.g., jQuery fn namespace*
���10
* jQuery 1.7 introduced AMD modules
Still very populare.g., jQuery fn namespace*
���10
(function( $ ) { $.fn.myPlugin=function(args){ // awesome plugin stuff }; })( jQuery );
$.fn.myPlugin(args);* jQuery 1.7 introduced AMD modules
Prognosis?
Name clashes,
but far less common
Easier to mock dependencies
But…
Order matters
Just pray that all dependencies are available
���11
Prognosis?
Name clashes,
but far less common
Easier to mock dependencies
But…
Order matters
Just pray that all dependencies are available
���11
Better
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!
Module loadersPart III --- Today
���12
The module explosion
���13
Idea! Use the environment to selectively load modules in order
The module explosion
���13
Idea! Use the environment to selectively load modules in order
Relies on a module loader outside the language specification
The module explosionFormats
CommonJS
AMD
���13
Idea! Use the environment to selectively load modules in order
Relies on a module loader outside the language specification
The module explosionFormats
CommonJS
AMD
Loaders
node (CJS)
requireJs (AMD)
curl (AMD)
…
���13
Idea! Use the environment to selectively load modules in order
Relies on a module loader outside the language specification
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;
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
Asynchronous module definition (AMD)
Asynchronous loading of modules
Makes a happy web
Syntax more cumbersome
���16
define(‘myModule’, [‘moduleA’, ‘moduleB], function(a, b) { return { aVal: a.myVal, bVal : b.myVal } });
Require.js: a sort of deep dive
(There’s magic, but the good kind)
���17
Universal Module Declarations (UMD)
Attempt to unify client and server side modules
BUT not a standard
Semantics different browser vs. server
���18
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; });
But UMD needs even more boilerplate
���19
All sorts of UMD proposals here: https://github.com/umdjs/umd
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 () {}; });
Browserify: no more boilerplate
Pre-processor
converts CJS -> AMD
something browser compatible
Avoid AMD boilerplate
Can use some node.js libs in browser
���20
*http://browserify.org/
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 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
Prognosis?
���22
Prognosis?No more language level name clashes
Not order dependent
Dependencies explicit in module
Load and edit time checkers
���22
Prognosis?No more language level name clashes
Not order dependent
Dependencies explicit in module
Load and edit time checkers
���22
Yay! We did it!
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?
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?
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!
Harmony ModulesPart IV --- Tomorrow
���23
Real Modules
ES6 Harmony
Official JavaScript module spec
Sync and async friendly
Browser and server friendly
���24
ES6 Harmony
���25
// foo.js module "foo" { export var x = 42; }
// bar.js import "foo" as foo; console.log(foo.x);
ES6 modules, today!Using the ES6 Module Transpiler*
���26
*https://github.com/square/es6-module-transpiler
Prognosis ES6?Finally, modules are first class in the language!
Loaders/runtimes will implement spec differently
sync loading possible
async loading possible
���27
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?
Prognosis JavaScript?
���28
Prognosis JavaScript?Plagued by poor design choices early on
���28
Prognosis JavaScript?Plagued by poor design choices early on
JS used to be a toy language
���28
Prognosis JavaScript?Plagued by poor design choices early on
JS used to be a toy language
Hard, but possible to fix past mistakes.
���28
ResourcesES6 module transpiler
https://github.com/square/es6-module-transpiler AMD module specification (draft, never ratified):
http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition CommonJS module specification:
http://wiki.commonjs.org/wiki/Modules UMD modules (various proposed implementations):
https://github.com/umdjs/umd ES6 Harmony draft specification
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts JavaScript Module pattern
http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
Browserify http://browserify.org http://superbigtree.tumblr.com/post/54873453939/introduction-to-browserify (borrowed browserify example)
���29
Questions?
Andrew Eisenberg
twitter: @werdnagreb
email: [email protected]
���30
Story parts
No modules
Module pattern
Module loaders
Language modules
