JavaScript Language Update 2016 (LLoT)
33
JS LANGUAGE UPDATE @teppeis LLoT Aug 27, 2016
-
Upload
teppei-sato -
Category
Technology
-
view
5.457 -
download
0
Transcript of JavaScript Language Update 2016 (LLoT)
JSLANGUAGE UPDATE
@teppeis
LLoT Aug 27, 2016
Hello!• Teppei Sato, @teppeis • Cybozu, Inc. / kintone • Languages in Cybozu
• JavaScript, PHP, Python • Java, Go, C/C++
ECMAScript
ECMAScript
• JavaScript • Ecma International TC39
http://wirfs-brock.com/allen/talks/forwardjs2016.pdf
ES2015
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
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
New built-in classes and objects
• Promise • Map • Set • WeakMap/WeakSet • TypedArray • Symbol • Proxy/Reflect
Improvement of existing classes
• String • RegExp • Array • Object • Math • Number
ES6 compatibility tablehttps://kangax.github.io/compat-table/es6/
ES6 compat-table score
• Safari 10 (WebKit): 100% • Chrome 52: 97% • Edge 14: 95% • Firefox 48: 91% • IE11: 11% => with Babel: 71%
• • ES Modules …
ES2016!
ECMAScript 2016
• 2016/6/14 • 2
• Array.prototype.includes • Exponentiation Operator
•
Array.prototype.includes
• Available in Chrome, Edge, Firefox, Safari 9+
assert([1, 2, 3].includes(2) === true); assert([1, 2, 3].includes(4) === false);
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;
…ES�
2017ES �
2016ES �
2015ES 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
• 5 Stage
• Stage
6 ES20XX
• 6
• Stage 2
• GitHub /
The TC39 Process
• Stage 0: Strawman ( )
• Stage 1: Proposal ( )
• Stage 2: Draft ( )
• Stage 3: Candidate ( , )
• Stage 4: Finished (2 )
• "ES20XX"
• Stage
• compat-table
Allen Wirfs-Brock
“(ES6 is…) It’s the foundation for the next 10-20 years of JavaScript evolution.”
https://flic.kr/p/9E5dV2
What's in next ES2017?
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…
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; }
ES6 Modules…
ES Modules export/import
// export.js export default function() { return "foo"; }
// import.js import foo from "./export.js"; foo();
ES Modules are Awesome!
• JavaScript missing piece
• Node.js
• Browserify, Webpack
• => •
• ES6 •
• Browser: whatwg/loader • Node.js: nodejs/node-eps#3
• • .js .mjs
• Babel •
• ES2015 (ES6)
• ES2016
• async/await
• ES Modules •
• Making a Standard: Inside the ECMAScript Sausage Factory by Allen Wirfs-Brockhttp://wirfs-brock.com/allen/talks/forwardjs2016.pdf
• ECMAScript as a Living Standard by azuhttp://azu.github.io/slide/2016/node-es/ecmascript.html
• You Don't Know ES Modules by teppeis https://www.slideshare.net/teppeis/you-dont-know-es-modules
