JavaScript Language Update 2016 (LLoT)

JavaScript Language Update 2016 (LLoT)

1. 1. JS LANGUAGE UPDATE @teppeis LLoT Aug 27, 2016
2. 2. Hello! • Teppei Sato, @teppeis • Cybozu, Inc. / kintone • Languages in Cybozu • JavaScript, PHP, Python • Java, Go, C/C++
3. 3. ECMAScript
4. 4. ECMAScript • JavaScript • Ecma International TC39
5. 5. http://wirfs-brock.com/allen/talks/forwardjs2016.pdf
6. 6. ES2015
7. 7. ES 2015 “ES6” ES 5.1 (2011) ES 5 (2009) ES 3 (1999) ES 2 (1998) ES 1 (1997) The ECMAScript Standard Timeline JS Performance Revolution “ES4” E4X “ES4” “Web 2.0” / AJAX http://wirfs-brock.com/allen/talks/forwardjs2016.pdf
8. 8. New syntax • Arrow Function • Classes • Modules • Block Scope (let/const) • Extended Object Literal • Default Params • Rest Params • Spread Operator • Destructuring • Iterator • Generator • Template Literal • Tail Call Optimization
9. 9. New built-in classes and objects • Promise • Map • Set • WeakMap/WeakSet • TypedArray • Symbol • Proxy/Reflect
10. 10. Improvement of existing classes • String • RegExp • Array • Object • Math • Number
11. 11. https://gihyo.jp/dp/ebook/2015/978-4-7741-7477-8
12. 12. ES6 compatibility table https://kangax.github.io/compat-table/es6/
13. 13. ES6 compat-table score • Safari 10 (WebKit): 100% • Chrome 52: 97% • Edge 14: 95% • Firefox 48: 91% • IE11: 11% => with Babel: 71% • • ES Modules …
14. 14. ES2016!
15. 15. ECMAScript 2016 • 2016/6/14 • 2 • Array.prototype.includes • Exponentiation Operator •
16. 16. Array.prototype.includes • Available in Chrome, Edge, Firefox, Safari 9+ assert([1, 2, 3].includes(2) === true); assert([1, 2, 3].includes(4) === false);
17. 17. Exponentiation Operator • Available in Chrome, Edge, WebKit // same as: 2 * 2 * 2 let cubed = 2 ** 3; let a = 2; // same as: a = a * a * a; a **= 3;
18. 18. … ES 2017 ES 2016 ES 2015 ES 5.1 (2011) ES 5 (2009) ES 3 (1999) ES 2 (1998) ES 1 (1997) The ECMAScript Standard Timeline Annual June Incremental Updates“ES4” E4X “ES4” Release trains are now leaving the station http://wirfs-brock.com/allen/talks/forwardjs2016.pdf
19. 19. • 5 Stage • Stage 
 6 ES20XX • 6 • Stage 2 • GitHub /
20. 20. The TC39 Process • Stage 0: Strawman ( ) • Stage 1: Proposal ( ) • Stage 2: Draft ( ) • Stage 3: Candidate ( , ) • Stage 4: Finished (2 )
21. 21. • "ES20XX" • Stage • compat-table
22. 22. Allen Wirfs-Brock “(ES6 is…) It’s the foundation for the next 10-20 years of JavaScript evolution.” https://flic.kr/p/9E5dV2
23. 23. What's in next ES2017?
24. 24. ES2017 (Current Stage 4 Proposals) • Async Functions • Object.values/Object.entries • String padding • Object.getOwnPropertyDescriptors • Trailing commas in function parameter lists and calls • and more…
25. 25. Async Functions • Available in Edge, Chrome with flag async function chainAnimationsAsync(elem, animations) { let ret = null; try { for(const anim of animations) { ret = await anim(elem); } } catch(e) { /* ignore and keep going */ } return ret; }
26. 26. ES6 Modules…
27. 27. ES Modules export/import // export.js export default function() { return "foo"; } // import.js import foo from "./export.js"; foo();
28. 28. ES Modules are Awesome! • JavaScript missing piece • Node.js • Browserify, Webpack • => •
29. 29. • ES6 • • Browser: whatwg/loader • Node.js: nodejs/node-eps#3 • • .js .mjs • Babel •
30. 30. • ES2015 (ES6) • ES2016 • async/await • ES Modules •