Getting Started

With ES6 Modules

import { talk } from './aaron-petcoff';
// @ughitsaaron on twitter
// web developer at _new york_ magazine
// http://aaronpetcoff.me

export { slides } from './aaron-petcoff';
// http://aaronpetcoff.me/talks

Why?

The web has changed a lot.

• 1999: ECMAScript 3
• ECMAScript 4 was abandoned
• 2009: ECMAScript 5
• 2015: ECMAScript 2015
• 2016: ECMAScript 2016

Why modules?

import and export have been reserved keywords in Javascript since the original specification

But, until recently, Javascript has had no built in system for handling modules

Javascript used to be relatively simple.

<a onclick="alert('gimme pizza')">helll yahhh</a>

But our applications have become more complex.

{{#link-to 'pizza'}}helll yahhh{{/link-to}}

More complex applications had to share code between scripts across the global scope…

…with no interface or namespacing, threatening maintainability, and creating barriers to collaboration

// utils.js
function slice(arr, n) {
  // ...
}

<!-- index.html -->
<script src="utils.js"></script>
<script src="pizza.js"></script>
<script>
  var slice = new Slice('plain');
  // conflicts with slice in utils.js
</script>

Now we have multiple ways of handling modules.

// commonjs
class Pizza {
  // ...
}

module.exports.Pizza = Pizza;

// amd
define(['Pizza'], function () {
  class Pizza {
    // ...
  }

  return Pizza;
});

(But they are incompatible.)

Other languages have a built-in interface for modules, giving developers one way to produce and consume modules

# pizza.py
class Pizza:
  def __init__(self, toppings):
    self.toppings = toppings

def Slice:
  def __init__(self, type):
    self.type = type

# main.py
from pizza import Slice

Having a built in specification for Javascript provides one standard for everyone to follow

ES6 Module Basics

• No modules or define keywords
• Just import and export
• No need to use strict
• Multiple exports(!)

Exports have to be declared.

You can export function, class, var, const, and let.

// toppings.js
export const combo = ['pineapple', 'feta'], // 😋

// pizza.js
export class Pizza {
  constructor(toppings) {
    this.toppings = toppings;
  }
}

// index.js
import { combo } from './libs/toppings';
import { Pizza } from './libs/pizza';

let pizza = new Pizza(combo);

You can have multiple exports…

// toppings.js
export const plain = [],
export const pepperoni = ['pepperoni'],
export const combo1 = ['pineapple', 'feta'],
export const combo2 = ['pepperoni', 'sausage', 'people'];

…or you can export a list…

// toppings.js
const plain = [],
      pepperoni = ['pepperoni'],
      combo1 = ['pineapple', 'feta'],
      combo2 = ['pepperoni', 'sausage', 'people'];

export { plain,
  pepperoni,
  combo1,
  combo2 }

…and rename your exports.

const plain = [],
      pepperoni = ['pepperoni'],
      combo1 = ['pineapple', 'feta'],
      combo2 = ['pepperoni', 'sausage', 'people'];

export { plain,
  pepperoni,
  combo1 as pineappleAndFeta,
  combo2 as meatLovers }

And you can do the same with imports.

// index.js
import { plain as noToppings,
         meatLovers as meeeat } from './libs/toppings';
import { Pizza } from './libs/pizza';

let pizza1 = new Pizza(noToppings),
    pizza2 = new Pizza(meeeat);

You can also namespace imports as an object

// toppings.js
export const plain = [];
export const pepperoni = ['pepperoni'];

// index.js
import * as toppings from './libs/toppings';

let plain = new Pizza(toppings.plain);
let pepperoni = new Pizza(toppings.pepperoni);

And you can re-export modules from another module's exports.

// plain.js
import { Pizza } from './libs/pizza';
export default new Pizza([]);

// pepperoni.js
import { Pizza } from './libs/pizza';
export default new Pizza(['pepperoni']);

// all.js
export { default as plain } from "./pizzas/plain";
export { default as pepperoni } from "./pizzas/pepperoni";

But what about default?

CommonJS and AMD modules only export once.

Those exports become equivalent to default in ES6

import _ from 'lodash';
// import { default as _ } from 'lodash';
// var _ = require('lodash');

let log = console.log.bind(console);

export default log;
// export { log as default }
// module.exports = console.log.bind(console);

Rules for implementation

No nested imports or exports

const date = new Date();

if (date.getDay() === 3) {
  // wednesday is pizza day
  import { plain } from './all'; // this should fail
}

An implementation must load all imported modules recursively.

Linking

// all.js
export { default as plain } from "./pizzas/plain";
export { default as pepperoni } from "./pizzas/pepperoni";
export { default as pineappleAndFeta } from "./pizzas/pineappleAndFeta";
export { default as meatLovers } from "./pizzas/meatLovers";

// index.js
import { taco } from './libs/all.js'; // this should fail

A module is run only once it's been loaded, parsed, and linked.

If any module fails, the application fails.

Using modules today

Modules are not supported in any browser, yet.

Transpilers & Bundlers

• Rollup
• Babel

Using Rollup

• By @Rich_Harris
• rollupjs.org
• Embraces ES6 modules
• CLI or Node module
• Simple configuration
• Plugins for interfacing with npm, Babel

"Tree-shaking"

Rollup only bundles what you need

// pizza.js
export class Pizza { ... }
export class Slice { ... }

// index.js
import { Pizza } from './pizza';
console.log(Pizza(['veggies', 'more veggies']));

// bundle.js
export class Pizza { ... }

console.log(Pizza(['veggies', 'more veggies']));

Wrapping up

We can't take full advantage of ES6 modules if they're not written as ES6 modules.

But publishing Javascript is already really complicated.

You can use jsnext:main to point toward ES6 source.

{
  "name": "pizza",
  "version": "9.0.0",
  "main": "dist/pizza.js",
  "jsnext:main": "dist/future-pizza.js"
}

Perhaps this is an opening for lots of new open-source contributions.

Further reading

• "ES6 In Depth: Modules," by Jason Orendorff
• "ECMAScript 6 modules: the final syntax," by Axel Rauschmayer
• "The struggles of publishing a JavaScript library," by Nolan Lawson
• Rollup's Github Wiki

Resources

• Rollup
• Babel

export { slides } from './aaron-petcoff';
// http://aaronpetcoff.me/talks

$ #a sandbox for es6 modules & rollup
$ git clone https://github.com/ughitsaaron/getting-started-es6-modules.git
$ cd getting-started-es6-modules
$ npm install

process.exit();
// @ughitsaaron on twitter
// web developer at _new york_ magazine
// http://aaronpetcoff.me