Start ES6 Modules Today

#m3dev

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