Brian Terlson (@bterlson)Program ManagerMicrosoft

What’s New in JavaScript for Fast and Scalable Apps

2-763

NOTE: This talk was presented without PowerPoint slides. This deck is a rough approximation of the content presented.

• ECMAScript 6: State of the Union• Advanced Async Programming Patterns• Arrow Functions• Promises• Iterators• Generators

• JavaScript Futures: Near Native Performance• Asm.js• SIMD

Today's Agenda

• ES6 ES2015• Final Draft completed• Largest Update in

JavaScript's History• Moving to train model• Future updates will be much

smaller

• Test262 Coverage In Progress• You can help!

https://github.com/tc39/test262

ES6 Status

ECMAScript6

Library Builders

map, set & weakmap__proto__Proxies

SymbolsSub-classable built-ins

Scalable Apps

let, const & block- scoped bindings

ClassesPromisesIterators

GeneratorsTyped arrays

Modules

Syntactic Sugar

Arrow functionsEnhanced object literals

Template stringsDestructuring

Rest, Spread, DefaultString, Math, Number, Object, RegExp APIs

Behind a config flag: Generators, Default parameters, RegExp /y /u flaghttps://status.modern.ie/

• Highest Score Among Browsers: ES6 Compat Table

• Interoperability-driven Standards Development• Spartan delivers without breaking the web or needlessly differing from

other browsers

• Embrace the Future• ASM.js can be turned on via about:flags. SIMD in development.

Project Spartan <3 ES6

http://aka.ms/ES6CompatChart

ES6+

Async Programming=

AWESOMENESS

New Function Syntax:• Terse• Always anonymous• Lexical this, arguments, and super

Arrow Functions

let arr = [1, 2, 3];let sum = arr .map(x => x * 2) .reduce((sum, x) => sum + x);

log(sum); // ==> 12

Arrow Functions – Example

• Object that represents a future value• Has one of three states: pending, fulfilled,

or rejected• Immutable once fulfilled or rejected• Producer returns a promise which it can

later fulfill or reject• Consumers listen for state changes

with .then and .catch methods

Promises

// producer creates a promise, resolves when readyfunction timeout(ms) { return new Promise(resolve => { setTimeout(resolve, ms); });}

log("start");

// consumer gets a promise, is notified when resolvedlet p = timeout(1000);p.then(() => log("end"));

Promises – Example

• Now part of the platform• Interoperable with existing promise libraries• DOM APIs now free to return promises• Expect better tooling and performance from

browser vendors

Promises

interface IIterable { [Symbol.iterator](): IIterator}

interface IIterator { next(): IIteratorResult, throw()?: IIteratorResult, return()?: IIteratorResult}

interface IIteratorResult { value: T, done: boolean}

Iterators• Consumers pull multiple values from a

producer• Three Interfaces: Iterable, Iterator, and

IteratorResult• Many new language features accept

iterables:• for-of loop• spread operator• Array.from• Map & Set constructors

• Many new language features produce iterables:• Array.prototype.values• Map.prototype.keys• Map.prototype.values• Map.prototype.entries• Set.prototype.values

let arr = ['a', 'b', 'c'];for(let item of arr) { log(item) }

let map = new Map();map.set(1, 'a');map.set(2, 'b');for(let pair of map) { log(pair) }for(let key of map.keys()) { log(key) }for(let value of map.values()) { log(value) }

Using Iterators – Example

• Returns multiple values• Generator functions are iterable• Generator functions return iterators when

called• Make implementing iterators much nicer• With Promises, make async code much

nicer

Generators

spawn(function*() { log(1); yield timeout(1000); // returns promise log(2);

return "Done!";}).then(v => log(v)) // logs "Done!"

// note: spawn available as a standalone library called// taskjs. Also available in many promise libraries.

Generators for Async – Example

JavaScript Futures:Progress in Project Spartan

• An optimizable, low-level subset of JavaScript• Not suitable for hand writing but as a

compiler target• Compiled ahead-of-time, no JIT, no bailouts

=== more predictable performance• More aggressive optimizations ===

performance wins in compile-to-JS scenarios• DEMO

asm.js – the assembly language for the web

• Hardware instructionsthat carry outmultiple calculationswith a singleinstruction

• Works on vectors: same operation is applied to all elements of a vector at once. Examples: • Operations on RGB/A pixels, XYZW coordinates• Arbitrary length arrays where each element is processed in a similar

way• Useful for games, 3D graphics, audio/video processing, cryptography,

etc.

SIMD – Single Instruction, Multiple Data

Ax

Bx

Cx

Dx

Ay

By

Cy

Dy

Az

Bz

Cz

Dz

Scalar Operation

Ax

Bx

Cx

Dx

Ay

By

Cy

Dy

Az

Bz

Cz

Dz

SIMD Operation of vector length 4

• Spartan supports advanced async programming patterns• Arrow Functions• Promises• Iterators• Generators

• Most ES6 features• Brings near native performance to the web

platform• Asm.js (available now)• SIMD (available soon)

The Future of JavaScript Development is Here

© 2015 Microsoft Corporation. All rights reserved.