Module Frontiers

James Burke | github | twitter

Firefox OS - Gaia | RequireJS | volo

http://jrburke.com/talks/dotjs2013

IMO

• Not on TC-39, not speaking for Mozilla
• My origins: RequireJS, AMD

The Known Lands

ECMAScript 6

• Module Syntax
• Module Loaders

ES: Module declaration

// ! ES has important semantic diffs with AMD/CommonJS/Node analogs

// Import of default export. AMD, CommonJS/Node: require('x')
import x from 'x';

// Non-default import from 'lib'. AMD, CommonJS/Node: require('lib').y
import { w } from 'lib';

// Named export. AMD, CommonJS/Node: exports.y
export let y = ...;
// and/or
// Default export. AMD: return, Node: module.exports
export default function() {};

// Dynamic
// AMD: require([something + '/z']) Node: require(something + '/z')? sync
System.import(something + '/z', function(z) {});

Module Loader

From js-loaders: System.import('adventure')

• System.normalize - IDs to normalized form
• System.locate - ID to URL
• System.fetch - get the source at URL
• System.translate - convert source to JS
• System.instantiate - custom module translation

AMD loader plugins:

• normalize
• load - locate, fetch, translate, instantiate

The Frontiers

• JS environments
• Our apps

JS environments

Browser makers, us

ID normalization

• ./ and ../
• Allow URLs? Maybe not
• Loader plugin syntax? 'text!template.html'

Declarative loader config

• AMD has a set
• paths, map, module config [not packages]
• shim - LEGACY 4EVAR?

Inline module syntax

module 'id' {} would be sweet

• Needs more time

Inline module syntax

• <module>, <script type="module">
• zip/archive URLs
• loader.define(id, srcString)

Our apps

• Bridging ES6 and AMD, Node worlds
• Project layout
• Package managers

Bridging worlds, AMD

• ES6->AMD: es6-module-transpiler
• AMD->ES6: Command line tool, trivial transform
• Combo: Bootstrap: AMD-style config, plugins, adapter

Bridging worlds, Node

• es6-module-transpiler
• Loader hooks

Project Layout

• baseURL + moduleID + '.js'
• import x from 'x' -> baseURL + 'x.js'

Convention

* index.html
* app/ -> main.js, view.js
* lib/ -> jquery.js, underscore.js
* app.js:

requirejs.config({
    baseUrl: 'lib',
    paths: {
        app: '../app'
    }
});

// Start loading app.
requirejs(['app/main']);

// app/main uses relative IDs for other
// app modules: './view'

Package managers

baseURL + moduleID + '.js'

• Single file deps: baseURL + moduleID + '.js'
• Your metadata in app package.json or .metadata dir

Package managers

Packages directories still OK

• Adapter module at baseURL + moduleID + '.js'

// node
module.exports = require('x/main');
// AMD
define(['x/main'], function(x) {return x});
// ES
export default from 'x/main'; //maybe?

Package managers

• Local vs repo name
• 'underscore' -> 'lodash', branches, forks

Fin

• ES6: declaration and loader basics looking good
• Next: declarative config, inlining, loader plugins
• baseURL + moduleID + '.js'

http://jrburke.com/talks/dotjs2013