Start ES6 Modules today Shuhei Kagawa @M3 Tech Talk

JavaScript Dependencies • Name conflicts • Different versions of jQuery… • So many tags • Edit HTML to modify JavaScript • Find something missing on browser

JavaScript ! jQuery(function($) { $(‘#hello’).helloWorld(); });

Java import com.m3.hello.*; import com.m3.world.*; ! public class HelloWorld { public say() { Hello hello = new Hello(); World world = new World(); hello.greetTo(world); } }

Ruby require ‘nokogiri’ require ‘csv’ ! class HelloWorld def say(xml) doc = Nokogiri::XML.parse(xml) # Say hello with XML… end end

Declare Dependencies in JavaScript

AMD & Require.js define(‘hello’, [‘jquery’, ‘something’], function($, something) { function Hello(name) { this.name = name; } Hello.prototype.say = function(el) { var text = ‘Hello, ‘ + something(name) + ‘!’; $(el).text(text); }; return Hello; }); ! require([‘hello’], function(Hello) { new Hello(‘Taro’).say(document.body); });

AMD & Require.js • Asynchronous load and execution • Bundle scripts with r.js for production • Compatible libraries • jQuery, underscore, backbone and more

CommonJS & Browserify var $ = require(‘jquery’); var something = require(‘something’); ! function Hello(name) { this.name = name; } Hello.prototype.say = function(el) { var text = ‘Hello, ‘ + something(name) + ‘!’; $(el).text(text); }; ! module.exports = Hello;

CommonJS & Browserify • Gained popularity with Node.js • Build in advance • NPM modules • jquery and other major libraries • Less popular than AMD • Workarounds using Browserify transforms

ES6 Modules

What’s ES6? • EcmaScript 6 aka ES.next or ES Harmony. • The upcoming version of EcmaScript.

What’s EcmaScript? • The standard for JavaScript-like languages. • JavaScript of many browsers, JScript of Internet Exploer and etc.

The History of EcmaScript • ES1, ES2: Before I was born. • ES3: The JavaScript that you write at work. • ES4: Failed. ActionScript 3.0… • ES5: The JavaScript that makes modern browsers (IE9+) modern. • Object.create/defineProperty • Array.prototype.forEach/map/filter/reduce • getter/setter

EcmaScript 6 • Currently under review until June 2015. • The feature set has been frozen. • Tons of new syntaxes and APIs. • yield, class, let, const, import/export • Promise, Map/Set, Proxy and more • Many awesome tools allow you to use it now.

ES6 Modules • Module Definition Syntax • Module Loader

ES6 Modules • Module Definition Syntax • Module Loader

Named Exports // foobar.js var foo = 'foo'; var bar = 'bar'; ! export { foo, bar }; import { foo, bar } from ‘foobar’; ! console.log(foo); // foo

Default Exports // person.js export default function Person(name) { this.name = name; } import Person from ‘person’; ! var kate = var Person(‘Ann Kate’);

All Exports // foobar.js var foo = 'foo'; var bar = 'bar'; ! export { foo, bar }; module foobar from ‘foobar’; ! console.log(foobar.foo); // foo

How can we use it? • Transpile with … • ES6 Module Transpiler by Square • Only ES6 module syntax • Traceur Compiler by Google • Packed with ES6 features like class, double arrow and etc.

How can we use it? • ES6 Module Loader + System.js • RequireJS

How can we use it? • RequireJS • Browserify • System.js • traceur —modules=instantiate • Able to load AMD, CommonJS and System.register

Fin