Javascript Modules in the Browser

Eric Drechsel / @edrex

Modules in the Browser

Outline

  • History of modular JS
  • ES Modules
  • SystemJS helps us get there
  • Crystal ball: the future of module delivery

History of modular JS

  • Archean era
  • AMD / Require.JS
  • Common JS
    • To the browser: browserify and webpack
  • ES6 Modules

Archean era

SCRIPT TAGS

Globals

AMD

Consuming modules

require(['foo'], function(foo){ foo.doStuff() } );

addyosmani.com/writing-modular-js

Defining modules

` define('foo', ['bar', 'baz'], // dependencies (foo and bar) are mapped to function parameters function ( bar, baz ) { var myModule = { doStuff:function(){ console.log('Yay! Stuff'); } }

    return function(x) {
        return [bar(x), baz(x)]
    };

}); `

addyosmani.com/writing-modular-js

CommonJS

aka NPM modules

Consuming modules

On Node:

var bar = require("bar")

Bundling (Browserify, Webpack)

EcmaScript Modules

Exports

` //------ module1.js ------ export default 123;

//------ module2.js ------ const D = 123; export { D as default }; `

2ality.com/2014/09/es6-modules-final.html

Declarative import syntax

import * as math from "lib/math"; import {sum, pi} from "lib/math";

Default vs named exports

` //------ foo.js ------ export default 123;

//------ module2.js ------ export const A = 321;

//------ main.js ------ import foo, { A } from 'foo'; `

System.import

Hint: it's just AMD's `require`

but I want it

NOW

Eric Drechsel / @edrex

Slides: eric.pdxhub.org/talks

Code: github.com/edrex/hello-systemjs