ES7 - QCon New York · Server-sent Events Node Streams Service Workers jQuery Events XMLHttpRequest...

ES7

The Evolution of JavaScript

Who is Jafar Husain?

•  Architect of Falcor, Netflix’s OSS data platform

•  Netflix representative TC-39 •  Formerly worked for MS and GE

June 2015

ES6 spec will be finalized in

Isn’t it too early to talk about ES7?

ES7 features are already starting to roll into browsers.

ES7

ES6

ES5

ES7 ES6

BIG 2ES7

Easier Model/View Synchronization

Model View

Easier Async Programming

pull

push

Arrow Functions

ES6

=>

Arrow Functions

x + 1 function(x) { return x + 1; }

x => function(x, y) { return x + y; } (x, y)

x + y

=>

ES 6 5

Controller

View Model

Why not natively support change notification?

?

Object.observe

ES7

Object.observe

var person = {}; var changesHandler = changes => console.log(changes); Object.observe(person, changesHandler);

Object.observe person = { name:

[ { "type":”new", "name":”employer” } ]

[ { "type":”update", "name":”name”, “oldValue: “Dana Miller” } ]

“Dana T. Miller” “Dana Miller” };

, employer: “Tommy's Box Store”

[ { "type":”reconfigure", "name":”name” } ]

[ { "type":”delete", "name":”employer”, “oldValue: “Tommy's Box Store” } ]

Object.unobserve

Object.unobserve(person, changesHandler);

unobserve The word you’ve entered isn’t in the dic2onary.

irregardless regardless.

Event Handler Browser render XHR handler Timeout

handler

Tasks on the event loop

The Event Loop Queue

Observe notification

person.name = “Jim”; person.age = 22;

Current Task

How to avoid the

Notification Storm? How to avoid the

Notification Storm?

Microtasks

ES6

Event handler Browser render XHR handler Timeout

handler

Tasks on the event loop

Event Loop Queue + Microtasks

Observe handler

Current Task

person.name = “Jim”; person.age = 23;

sync sync

Object.observe on Microtasks

Model A Model B DOM

Try Object.observe

Object.observe

ES Feature Maturity Stages

0. Strawman 1. Proposal 2. Draft 3. Candidate 4. Finished

Maturity Stage 2: Draft

“Commi&ee expects the feature to be developed and…included in the standard.”

How can we make async programming easier?

?

Blocking is Easy

function getStockPrice(name) { var symbol = getStockSymbol(name); var price = getStockPrice(symbol); return price; }

Blocking means Pulling

price = getStockPrice(“Devine Inc.”);

Data delivered in return position

pull

What if we want to wait instead of block?

?

Waiting means Pushing

getStockPrice(“Devine Inc.”, price => { … });

Data delivered in argument position

push

The Pyramid of

DOOM

Blocking/Pulling


Waiting/Pushing function getStockPrice(name, cb) { getStockSymbol(name, (error, symbol) => { if (error) { cb(error); } else { getStockPrice(symbol, (error, price) => { if (error) { cb(error); } else { cb(price); } }) } }) }

function getStockPrice(name, cb) { getStockSymbol(name, (error, symbol) => { if (error) { cb(error); } else { getStockPrice(symbol, (error, price) => { if (error) { cb(error); } else { cb(price); } }) } }) }

Pulling and Pushing

are symmetrical

Why must waiting be so much harder than blocking?

?

Promises

ES6

Promises

42 X promise.then(value => {…}, error => {…});

function getStockPrice(name) { var symbol = getStockSymbol(name); var price = getStockPrice(symbol); return price; } function getStockPrice(name) { return getStockSymbol(name). then(symbol => getStockPrice(symbol)); }

sync

async

Not bad, but…

…why does waiting have to look so different than blocking?

?


function getStockPrice(name) { return getStockSymbol(name). then(symbol => getStockPrice(symbol)); }

sync

async function* getStockPrice(name) { var symbol = yield getStockSymbol(name); var price = yield getStockPrice(symbol); return price; }

Generator function

ES6

A generator function can return multiple values.

96 23 done

Generator Functions in ES6

function* getNumbers() { yield 42; yield 32; return 19; }

Retrieving function* results function* getNumbers() { yield 42; yield 32; return 19; } > var iterator = getNumbers();

> { value: 42, done: false } >

> console.log(iterator.next());

> console.log(iterator.next()); > { value: 32, done: false } > > console.log(iterator.next()); > { value: 19, done: true } >

Iteration

42

Consumer Producer

var result = iterator.next() var iterator = producer.iterator();

Iteration

39

Consumer Producer

var result = iterator.next()

Iteration

done

Consumer Producer

var result = iterator.next()

How Yield Works

function getFibonnacciSequence() { return { next: function() { let val1 = 0, val2 = 1, swap, state = 0; switch(state) { case 0: state = 1; return {value: val1, done: false}; case 1: state = 2; return {value: val2, done: false}; default: swap = val1 + val2; val2 = swap; val1 = val2; return {value: swap, done: false}; } } } }

function* getFibonnacciSequence() { let val1 = 0, val2 = 1, swap; yield val1; yield val2; while(true) { swap = val1 + val2; val2 = swap; val1 = val2; yield swap; } }




All ES6 collections are Iterable.

ES6

Iterator Pattern

> var iterator = [42, 39][@@iterator]();

> { value: 42, done: false } >



> { value: 39, done: false } > > console.log(iterator.next()); > { done: true } >

Consuming Iterables with for..of

> for(var x of [42,39,17]) { console.log(x); } > 42 > 39 > 17 >

If generator functions return iterators…

…why aren’t they called Iterator functions?

?

Iterator Observer Generator

A Generator is an Iterator

yield value

throw an error

return value

generator.next().value;

try { generator.next(); } catch(err) { ... }

var pair = generator.next(); if (pair.done) alert(pair.value);

pull

A Generator is an Observer

receive data

receive an error

receive return value

generator.next(5);

generator.throw(“fail”);

generator.return(5);

push

Iteration only allows data to flow one-way.

96 23 done

Generators allow feedback.

96 33 21 99 done

Waiting with Async Iteration function* getStockPrice(name) { var symbol = yield getStockSymbol(name); var price = yield getStockPrice(symbol); return price; } > spawn(getStockprice(“Pfizer”)). then( price => console.log(price), error => console.error(error));

> 353.22

“PFE”

Async Iteration Consumer Producer

var result = generator.next() var generator = getStockPrice(‘Pfizer’); var symbol = yield getStockSymbol(‘Pfizer’); result.then(data => …, error => …)

27.83


var result = generator.next(“PFE”) var symbol = yield getStockSymbol(‘Pfizer’);

“PFE”

var symbol = “PFE” var price = yield getStockPrice(symbol); result.then(data => …, error => …)


var result = generator.next(“27.83”) var price = yield getStockPrice(symbol);

27.83

var price = 27.83 return price

done

function* getStockPrice(name) { var symbol = yield getStockSymbol(name); var price = yield getStockPrice(symbol) return price; } function spawn(generator) { return new Promise((accept, reject) => { var onResult = lastPromiseResult => { var {value, done} = generator.next(lastPromiseResult); if (!done) { value.then(onResult, reject); } else accept(value); }; onResult(); }); } > spawn(getStockPrice(“Johnson and Johnson”)).then(console.log);

“JNJ”

pricePromise; symbolPromise;

Asynchronous Iteration

420.25

“JNJ”

“JNJ”;

420.25 420.25

420.25;

>

function* getStockPrice(name) { var symbol = var price = return price; } function spawn(generator) { return new Promise((accept, reject) => { var onResult = if (!done) { value.then(onResult, reject); } else accept(value); }; onResult(); }); } > spawn(getStockPrice(“Johnson and Johnson”)).then(console.log);§

function spawn(generator) { return new Promise((accept, reject) => { }); } then(console.log);

{value: symbolPromise, done: false}; {value: pricePromise, done: false}; {value: 420.25, done: true};

producer

consumer

Waiting with with Task.js

function* getStockPrice(name) { var symbol = yield getStockSymbol(name); var price = yield getStockPrice(symbol); return price; } var result = spawn(getStockPrice.bind(null, “Pfizer”)); result.then(console.log, console.error);

Get Task.js

Why should easy waiting require a library?

?

Async Functions

ES7

Async Functions in ES7

function* getStockPrice(name) { var symbol = yield getStockSymbol(name); var price = yield getStockPrice(symbol); return price; } var result = spawn(getStockPrice.bind(null, “PFE”)); result.then(console.log, console.error);

async function getStockPrice(name) { var symbol = await getStockSymbol(name); var price = await getStockPrice(symbol); return price; } var result = getStockPrice (“PFE”) ; result.then(console.log, console.error);

function getStockPrice(name) { var symbol = getStockSymbol(name); var price = getStockPrice(symbol); return price; } async function getStockPrice(name) { var symbol = await getStockSymbol(name); var price = await getStockPrice(symbol); return price; }

sync

async

Symmetrical support for push and pull functions.

ES7

Async Functions

Try Async Functions

The await keyword makes it easy to wait on an async value…

…but what if you need to wait on

? an async stream of values?

Waiting on a stream with for…on async function getNextPriceSpike(stock, threshold) { var delta, oldPrice, price; for(var price on new WebSocket(“/prices/" + stock)) { if (oldPrice == null) { oldPrice = price; } else { delta = Math.abs(price -‐ oldPrice); oldPrice = price; if (delta > threshold) { return { price: price, oldPrice: oldPrice }; } } } } > getNextPriceSpike(“JNJ”,2.50).then(diff => console.log(diff)); > { price: 420.22, oldPrice: 423.19 }

Unfortunately there’s a problem.

The web has no standard Observable interface.

Iteration Consumer Producer

Observation Consumer

b b b b

42

Consumer Producer

observer.next(42)

Observation

39 done

observer.return() producer.observer(observer); observer.next(39)

The Web’s Many Observable APIs •  DOM Events •  Websockets •  Server-sent Events •  Node Streams •  Service Workers •  jQuery Events •  XMLHttpRequest •  setInterval

push

interface Iterable { Generator iterator(void);

}

Introducing Observable

interface Observable { observer(Generator);

} void

Observer pattern

> nums().observer({ next(v) { console.log(v); }, return(v) { console.log(“done:” + v); } throw (e) { console.error(e); }, }); > 1

> 2

> done: 3

Adding Sugar to Observation nums().observer({ next(v) { console.log(v); }, return(v) { console.log(“done:” + v); } throw (e) { console.error(e); }, });

nums(). forEach(v => console.log(v)). // next then( v => console.log(“done:”), // return e => console.error(e)); // throw (async function writeNums() { try { for(var v on nums()) { console.log(v); } } catch(e) { console.error(e); } console.log(“done”); })();

Push APIs implement Observable

DOM Events Websockets Server-sent Events Node Streams Service Workers jQuery Events XMLHttpRequest setInterval

Observable

Implementing Observable WebSocket.prototype.observer = function(generator) { var cleanUp, message = v => { var pair = generator.next(v); if (pair.done) cleanUp(); }, error = e => { cleanUp(); generator.throw(e); }, close = v => { cleanUp(); generator.return(v); }; cleanUp = () => { this.removeEventListener(“message”, message); this.removeEventListener(“error”, error); this.removeEventListener(“close”, close); }; this.addEventListener(“message”, message); this.addEventListener(“error”, error); this.addEventListener(“close”, close); };

Consuming Observables in ES7

> (async function() { for(var member on new WebSocket(“/signups”)){

console.log(JSON.stringify(member)); } }());

> { firstName: “Tom” … } > { firstName: “John” … } > { firstName: “Micah” … } > { firstName: “Alex” … } > { firstName: “Yehuda” … } > { firstName: “Dave” … } > { firstName: “Ben” … } > { firstName: “Dave” … }

Observable Composition async function drag(element) { var downs = Observable.fromEvent(element, “mousedown”); var ups = Observable.fromEvent(document, “mouseup”); var moves = Observable.fromEvent(document, “mousemoves”); var drags = downs. map(down => moves.takeUntil(ups)). flatten();

for(var drag on drags) {

element.style.top = drag.offsetY; element.style.left = drag.offsetX;

} }

Try Observable

If an async function returns a Promise,

and a function* returns an Iterator…

…what does an async function* return?

?

Function Types in ES7

Synchronous Asynchronous

function T Promise

function* Iterator

A function* returns multiple values.

96 23 done

An async function pushes one value.

96

An async function* pushes multiple values.

96 23 done

An async generator function returns an Observable.

b

Async generator functions

ES7

b

async function* in action async function* getPriceSpikes(stock, threshold) { var delta, oldPrice, price; for(var price on new WebSocket(“/prices/" + stock)) { if (oldPrice == null) { oldPrice = price; } else { delta = Math.abs(price -‐ oldPrice); oldPrice = price; if (delta > threshold) { yield { price: price, oldPrice: oldPrice }; } } } }

Consuming Observables in ES7

> async function printSpikes() { for(var spike on getPriceSpikes(“JNJ”, 2.00)) { console.log(priceSpike); } }()); > { oldPrice: 392.55, price: 396.82 } > { oldPrice: 397.14, price: 395.03 } > { oldPrice: 394.18, price: 392.01 } > { oldPrice: 392.55, price: 400.92} > { oldPrice: 401.53, price: 403.12} > { oldPrice: 404.22, price: 407.74} > { oldPrice: 403.28, price: 405.88} > { oldPrice: 406.18, price: 409.29}

ES7 should have symmetrical support for push and pull streams.

How can we make async I/O easier?

?

Sync I/O is easy with function* function* getStocks() {

var reader = new FileReader(“stocks.txt”); try { while(!reader.eof) { var line = reader.readLine(); yield JSON.parse(line);

} } finally { reader.close(); }

} function writeStockInfos() {

var writer = new FileWriter(“stocksAndPrices.txt”); try { for(var name of getStocks()) { var price = getStockPrice(name); writer.writeLine(JSON.stringify({name, price})); } } finally { writer.close(); }

}

producer

consumer

Async I/O with async function* async function* getStocks() {

var reader = new AsyncFileReader(“stocks.txt”); try { while(!reader.eof) { var line = await reader.readLine(); await yield JSON.parse(line);

} } finally { await reader.close(); }

} async function writeStockInfos() {

var writer = new AsyncFileWriter(“stocksAndPrices.txt”); try { for(var name on getStocks()) { var price = await getStockPrice(name); await writer.writeLine(JSON.stringify({name, price})); } } finally { await writer.close(); }

}

producer

consumer

b b b b

42

Consumer Producer

Async Observation

39 done

Async IO with async function* async function* getStocks() {




var writer = new AsyncFileWriter(“stocksAndPrices.txt”); try {

} finally { await writer.close(); }

}

await getStocks.forEach(async function(name) { var price = await getStockPrice(name); await writer.writeLine(JSON.stringify({name, price})); });

for(var name on getStocks()) { var price = await getStockPrice(name); await writer.writeLine(JSON.stringify({name, price})); }

promise returned from async next fn

Async IO with async function* async function* getStocks() {




var writer = new AsyncFileWriter(“stocksAndPrices.txt”); try {

} finally { await writer.close(); }

}

await getStocks.forEach(async function(name) { var price = await getStockPrice(name); await writer.writeLine(JSON.stringify({name, price})); });

promise returned from async next fn

Function Types in ES7

Synchronous Asynchronous

function T Promise

function* Iterator Observable

More Info on async function*

async function*

ES Maturity Stage 0: Strawman

“Allow for feedback”

Resources

•  esdiscuss.org •  https://facebook.github.io/regenerator/ •  http://taskjs.org/ •  http://github.com/jhusain/asyncgenerator

Questions?

?

Observer Pattern with Events

> document.addEventListener( “mousemove”, function next(e) { console.log(e); });

> { clientX: 425, clientY: 543 }








Observer Pattern with setInterval

> var counter = 0; setInterval(function next(e) { console.log(counter++); }, 20);

> 0

> 1

> 2

> 3

> 4 > 5 > 6 > 7

The decision to push or pull is orthogonal to most algorithms.

push

pull

Iteration is Pull

var result = generator.next();

pull

Observation is Push

b

generator.next(5);

push

Iteration and Observation

are symmetrical

ES7 - QCon New York · Server-sent Events Node Streams Service Workers jQuery Events XMLHttpRequest...

Documents

Transcript of ES7 - QCon New York · Server-sent Events Node Streams Service Workers jQuery Events XMLHttpRequest...