Start ES6 Modules Today

Start ES6 Modules Today

#m3dev

Ca0ab6e450f894e06652ee257df9d647?s=128

Shuhei Kagawa

June 19, 2014
Tweet

Transcript

  1. Start ES6 Modules today Shuhei Kagawa @M3 Tech Talk

  2. JavaScript Dependencies • Name conflicts • Different versions of jQuery…

    • So many <script /> tags • Edit HTML to modify JavaScript • Find something missing on browser
  3. JavaScript <script src=“jquery.js”></script> <script src=“jquery-hello.js”></script> ! <script> jQuery(function($) { $(‘#hello’).helloWorld();

    }); </script>
  4. 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); } }
  5. Ruby require ‘nokogiri’ require ‘csv’ ! class HelloWorld def say(xml)

    doc = Nokogiri::XML.parse(xml) # Say hello with XML… end end
  6. Declare Dependencies in JavaScript

  7. 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); });
  8. AMD & Require.js • Asynchronous load and execution • Bundle

    scripts with r.js for production • Compatible libraries • jQuery, underscore, backbone and more
  9. 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;
  10. 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
  11. ES6 Modules

  12. What’s ES6? • EcmaScript 6 aka ES.next or ES Harmony.

    • The upcoming version of EcmaScript.
  13. What’s EcmaScript? • The standard for JavaScript-like languages. • JavaScript

    of many browsers, JScript of Internet Exploer and etc.
  14. 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
  15. 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.
  16. ES6 Modules • Module Definition Syntax • Module Loader

  17. ES6 Modules • Module Definition Syntax • Module Loader

  18. Named Exports // foobar.js var foo = 'foo'; var bar

    = 'bar'; ! export { foo, bar }; import { foo, bar } from ‘foobar’; ! console.log(foo); // foo
  19. Default Exports // person.js export default function Person(name) { this.name

    = name; } import Person from ‘person’; ! var kate = var Person(‘Ann Kate’);
  20. All Exports // foobar.js var foo = 'foo'; var bar

    = 'bar'; ! export { foo, bar }; module foobar from ‘foobar’; ! console.log(foobar.foo); // foo
  21. 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.
  22. How can we use it? • ES6 Module Loader +

    System.js • RequireJS
  23. How can we use it? • RequireJS • Browserify •

    System.js • traceur —modules=instantiate • Able to load AMD, CommonJS and System.register
  24. Fin