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

https://gihyo.jp/dp/ebook/2015/978-4-7741-7477-8

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