dev build step
build tool for prod
CommonJS (Node)
synchronous
Slide 20
Slide 20 text
tags
Slide 21
Slide 21 text
// module.js
var red = function() {
$('p').css('color', 'red');
}
// app.js
red();
// index.html
Slide 22
Slide 22 text
// module.js
var red = function() {
$('p').css('color', 'red');
}
// app.js
red();
// index.html
Slide 23
Slide 23 text
// module.js
var red = function() {
$('p').css('color', 'red');
}
// app.js
red();
// index.html
Slide 24
Slide 24 text
// module.js
var red = function() {
$('p').css('color', 'red');
}
// app.js
red();
// index.html
Slide 25
Slide 25 text
no dev build step (ish)
build tool for prod (ish)
no dependency
management
async or sync
Slide 26
Slide 26 text
no dependency
management
Slide 27
Slide 27 text
We can do better
Slide 28
Slide 28 text
We have done better
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
ES6 Modules
Slide 31
Slide 31 text
// module.js
import $ from './jquery';
export var red = function() {
$('p').css('color', red');
}
// app.js
import * as app from './module';
app.red();
Slide 32
Slide 32 text
// module.js
import $ from './jquery';
export var red = function() {
$('p').css('color', red');
}
// app.js
import * as app from './module';
app.red();
Slide 33
Slide 33 text
// module.js
import $ from './jquery';
export var red = function() {
$('p').css('color', red');
}
// app.js
import * as app from './module';
app.red();
Slide 34
Slide 34 text
// module.js
import $ from './jquery';
export var red = function() {
$('p').css('color', red');
}
// app.js
import * as app from './module';
app.red();
Slide 35
Slide 35 text
// module.js
import $ from './jquery';
export var red = function() {
$('p').css('color', red');
}
// app.js
import {red} from './module';
red();
Slide 36
Slide 36 text
// module.js
import $ from './jquery';
export default function() {
$('p').css('color', red');
}
// app.js
import red from './module';
red();
Slide 37
Slide 37 text
// module.js
import $ from './jquery';
export default function() {
$('p').css('color', red');
}
// app.js
import red from './module';
red();
Slide 38
Slide 38 text
Static
Slide 39
Slide 39 text
don't have to run code to know
exports
static lookups
visibility of variables
circular dependencies
ready for types (!)
Slide 40
Slide 40 text
async or sync
Slide 41
Slide 41 text
static imports = can
resolve before
evaluation of module
Slide 42
Slide 42 text
it just…works?
Slide 43
Slide 43 text
Module API
Slide 44
Slide 44 text
// module.js
import $ from './jquery';
export var red = function() {
$('p').css('color', red');
}
// app.js
System.import('./module')
.then(function(mod) {
mod.red();
});