NEW IN ES 2016 JAVASCRIPTS FIRST YEARLY RELEASE

NEW IN ES 2016 JAVASCRIPT'S FIRST YEARLY RELEASE Brian Terlson @bterlson brian. terlson@microsoft. com

AGENDA • History • Async Functions • Observableas • SIMD • Decorators • Value Types

ES 2016 – BRING ON THE TRAIN MODEL • Train leaves every year • Mature proposals get on the train • Multiple interoperable implementations required • test 262 collateral required • Work on Github: https: //github. com/tc 39/ecma 262 Image by speedemon 08 CC BY NC SA 2. 0

QUICK JAVASCRIPT FIX String#at "�� ". length 2 "�� "[0] "�" "�� ". at(0) "�� "

HOW DO WE… • Return a single value synchronously? • Functions! • Return many values synchronously? • Generator Functions! • Return a single value asynchronously? • Promise-returning function? • Async Functions!

ASYNC FUNCTIONS https: //github. com/tc 39/ecmascript-asyncawait Built on Promises and Generators Callable like any function but: • Returns a Promise • `await` inside its body Similar to async/await in C# and Dart Implementations: Babel, Traceur, Regenerator async class function Image { fetch(url) { try { get. Data() {. . . } async function fetch(url) { let data = = await $. get(url); let data await $. get(url); } return {. . . } return JSON. parse(data); } } catch (e) { let obj = { handle. Error(e); async fetch() {. . . } return JSON. parse(data); } fetch('/tc 39. json') } }. then(parse. JSON). then(f => { fetch('/tc 39. json') async (a, b) => await a + await b; console. log(f. members. length); . then(f => { }); console. log(f. members. length); });

HOW DO WE… • Return a single value synchronously? • Functions! • Return many values synchronously? • Generator Functions • Return a single value asynchronously? • Async Functions • Return many values asynchronously? • Observables!

OBSERVABLES https: //github. com/zenparsing/es-observable Represents push-based (async) data sources // Observer let observer = { • DOM events! next(value) {/* got value */}, throw(error) { Lazy – no data emitted until a consumer wants it /* error getting values */ }, return() {/* no more values */} Built on the ES 6 Generator interface }; Compositional: Chain map/filter/etc. operations let observable = { Amenable to new syntax // Observable subscribe(observer) {. . . } }

OBSERVABLES https: //github. com/zenparsing/es-observable Represents push-based (async) data sources • DOM events! // Observer let observer = { next(value) {/* got value */}, throw(error) { }, Lazy – no data emitted until a consumer wants it return() {/* no more values */} }; Built on the ES 6 Generator interface Compositional: Chain map/filter/etc. operations Amenable to new syntax // Observable let d = new Observable( obs => { obs. next(1); obs. return(); } ); d. subscribe(observer);

OBSERVABLES https: //github. com/zenparsing/es-observable Represents push-based (async) data sources // Observer let observer = function*() { • DOM events! Lazy – no data emitted until a consumer wants it while(1) log("Got " + (yield)); } // Observable Built on the ES 6 Generator interface Compositional: Chain map/filter/etc. operations Amenable to new syntax let d = new Observable(obs => { obs. next(1); obs. return(); }); d. subscribe(observer()); // => "Got 1"

OBSERVABLES https: //github. com/zenparsing/es-observable Represents push-based (async) data sources // Observer let observer = prime(function*(){ • DOM events! Lazy – no data emitted until a consumer wants it while(1) log("Got " + (yield)); }) // Observable Built on the ES 6 Generator interface Compositional: Chain map/filter/etc. operations Amenable to new syntax let d = new Observable(obs => { obs. next(1); obs. return(); }); d. subscribe(observer()); // => "Got 1"

OBSERVABLES https: //github. com/zenparsing/es-observable Represents push-based (async) data sources let d = new Observable(obs =>{ obs. next(1); obs. next(2); • DOM events! Lazy – no data emitted until a consumer wants it obs. return(); }); let d 2 = d. map(n => n * 2); Built on the ES 6 Generator interface d 2. subscribe({ Compositional: Chain map/filter/etc. operations }); Amenable to new syntax next: log // => 2 // 4

OBSERVABLES https: //github. com/zenparsing/es-observable Represents push-based (async) data sources let d = new Observable(obs =>{ obs. next(1); obs. next(2); • DOM events! Lazy – no data emitted until a consumer wants it obs. return(); }); let d 2 = d. map(n => n * 2); Built on the ES 6 Generator interface d 2. for. Each(log); Compositional: Chain map/filter/etc. operations // Amenable to new syntax // => 2 4

OBSERVABLES https: //github. com/zenparsing/es-observable Represents push-based (async) data sources let d = new Observable(obs =>{ obs. next(1); obs. next(2); • DOM events! Lazy – no data emitted until a consumer wants it obs. return(); }); let d 2 = d. map(n => n * 2); Built on the ES 6 Generator interface for async (n of d 2) { Compositional: Chain map/filter/etc. operations } Amenable to new syntax log(n); // => 2 // 4

OBSERVABLES https: //github. com/zenparsing/es-observable Represents push-based (async) data sources import {arrow. Keys} from 'Event. Filters'; • DOM events! let elem = $('document'); Lazy – no data emitted until a consumer wants it let keys = elem. listen('keypress'); Built on the ES 6 Generator interface arrow. Keys. for. Each(move. Character); Compositional: Chain map/filter/etc. operations Amenable to new syntax let arrows = keys. filter(arrow. Keys);

QUICK JAVASCRIPT FIX Exponentiation Operator: Math. pow(10, 2) 10 ** 2

SIMD – SINGLE INSTRUCTION, MULTIPLE DATA https: //github. com/johnmccutchan/ecmascript_simd • Hardware instructions for number crunching • Exploits data parallelism to perform multiple calculations simultaneously • Benefits applications in fields like games, 3 D graphics, audio/video processing, multimedia applications etc.

SIMD – SINGLE INSTRUCTION, MULTIPLE DATA https: //github. com/johnmccutchan/ecmascript_simd Scalar Operation SIMD Operation of vector length 4 Ax Ay Az Bx By Bz Cx Cy Cz Dx Dy Dz Dz let a = SIMD. int 32 x 4(0, [0, 1, 2, 3]; 1, 2, 3); let b = SIMD. int 32 x 4(4, [4, 5, 6, 7]; 5, 6, 7); let c = SIMD. int 32 x 4. add(a, [a[0] + b[0], a[1] + b); b[1], a[2] + b[2], a[3] + b[3]]

SIMD – SINGLE INSTRUCTION, MULTIPLE DATA https: //github. com/johnmccutchan/ecmascript_simd // normal sum function sum(list) { let sum = 0; let len = list. length; // SIMD sum function sum(i 32 list) { let sum = SIMD. int 32 x 4. zero(); let len = i 32 list. length; for (i = 0; i < len / 4; i++){ for (i = 0; i < len; i++){ sum += list[i]; } sum = SIMD. int 32 x 4. add( sum, SIMD. Int 32 x 4. load( i 32 list, i * 4 ) ); return sum; } } return sum[0] + sum[1] + sum[2] + sum[3]; }

SIMD – SINGLE INSTRUCTION, MULTIPLE DATA https: //github. com/johnmccutchan/ecmascript_simd DEMO

QUICK JAVASCRIPT FIX String#rpad & String#lpad "a". lpad(4) " a";

DECORATORS https: //github. com/wycats/javascript-decorators Modify behavior of things at design time Decoration of: • Classes • Properties • Functions • Parameters In the future, decoration of data properties Decorators are just functions! Early Implementation in Type. Script 1. 5 @Model class Person { class Article { @memoize @belongs. To author; get name() { @has. Many comments; return this. first + this. last; constructor() { /*. . . */ } } clear() { this. comments. delete. All()} } } @Model function memoize(target, name, desc) { class Author { desc. set @has. Many = articles; v => set. Value(target, v); constructor() { /*. . . */name, }; } desc. get = @Model () => get. From. Cache(target, name)|| class Comment { /*. . . */ } original. Get(target); }

VALUE TYPES https: //github. com/brendaneich/value-spec (work in progress) New Primitive Types: • Int 64/Uint 64 • Bignum • Decimal • Complex • Rational • SIMD types • Typed. Array types // Example using factory let f 32 x 4 = Float 32 x 4(0, 1, 2, 3); let int 8 = Int 8(254); // Example using literal suffixes let i 64 = 0 L; // Int 64 let ui 64 = 0 UL; // Uint 64 Literal Suffixes! let f 32 = 0 f; // Float 32 Benefits: let bignum = 0 n; // Bignum • Serialize across iframes • Immutable • === compares by value let dec = 0 m; // Decimal

VALUE TYPES https: //github. com/brendaneich/value-spec (work in progress) // Measures. js Custom Primitive Types! Compose new primitive types from existing ones using the Value. Type factory Assign custom suffixes export let Yard = Value. Type(Symbol("Yard"), Float 64); export let Foot = Value. Type(Symbol("Feet"), Float 64); // Define literal suffixes (WIP!) Literal. Suffix. Table. ya = Yard; Literal. Suffix. Table. ft = Feet; Overload operators

VALUE TYPES https: //github. com/brendaneich/value-spec (work in progress) // Measures. js Custom Primitive Types! Compose new primitive types from existing ones using the Value. Type factory function add. Yand. F(y, f) { return Foot(y * 3 + f) } function add. Fand. Y(f, y) { return add. Cand. F(y, f) } Assign custom suffixes Overload operators Reflect. define. Operator('+', add. Yand. F, Yard, Foot); Reflect. define. Operator('+', add. Fand. Y, Foot, Yard);

VALUE TYPES https: //github. com/brendaneich/value-spec (work in progress) Import {Yard, Feet} from "Measures. js" let pos = 87 ya; Custom Primitive Types! Compose new primitive types from existing ones using the Value. Type factory let pass = 20 ft; let new. Pos = pos + pass; // Foot(281) // css math? 20 em + 10 px; Assign custom suffixes // vector math? Overload operators let v 1 = Vector(1, 2); let v 2 = Vector(3, 4); v 1 + v 2; // Vector(4, 6)

Thank You! Twitter: @bterlson Github: https: //github. com/bterlson

EASY WINS Exponentiation Operator: Math. pow(10, 2) 10 ** 2 String#rpad & String#lpad "a". lpad(4) " String#at "�� "[0] "�" "�� ". at(0) "�� " a";

ASYNC GENERATORS https: //github. com/zenparsing/async-iteration/ • Builds on Promises, Generators, and Async Functions • `await` and `yield` • • `await` behaves like Async Functions `yield` behaves like Generator Functions • Returns an Iterator-like object • Has. next, . throw, and. return • But each returns Promise<Iteration. Result> rather than Iteration. Result • Includes new Async for-of loop • async function* read. Lines(path) { • let file = await file. Open(path); • try { • while (!file. EOF) • • yield file. read. Line(); } finally { • • • } await file. close(); }

ASYNC GENERATORS https: //github. com/zenparsing/async-iteration/ • Builds on Promises, Generators, and • let iter = read. Lines('/foo. txt'); Async Functions • function read() { • `await` and `yield` • • `await` behaves like Async Functions `yield` behaves like Generator Functions • Returns an Iterator-like object • Has. next, . throw, and. return • But each returns Promise<Iteration. Result> rather than Iteration. Result • Includes new Async for-of loop • let p = iter. next(); • p. then(result => { • if(result. done) return; • print(result. value); • read(); • }); • } • read();

ASYNC GENERATORS https: //github. com/zenparsing/async-iteration/ • Builds on Promises, Generators, and Async Functions • `await` and `yield` • • `await` behaves like Async Functions `yield` behaves like Generator Functions • Returns an Iterator-like object • Has. next, . throw, and. return • But each returns Promise<Iteration. Result> rather than Iteration. Result • Includes new Async for-of loop • for async (let line of • read. Lines('foo. txt') • ) { • • } print(line);