ES7 ES7 The Evolution of JavaScript Who is Jafar Husain? - - PowerPoint PPT Presentation

▶
es7 es7
SMART_READER_LITE
LIVE PREVIEW

ES7 ES7 The Evolution of JavaScript Who is Jafar Husain? - - PowerPoint PPT Presentation

Nov 30, 2022 310 likes •1.57k views

ES7 ES7 The Evolution of JavaScript Who is Jafar Husain? Architect of Falcor, Netflixs OSS data platform Netflix representative TC-39 Formerly worked for MS and GE ES6 spec will be finalized in June 2015 Isnt it too early to

slide-1
SLIDE 1

ES7 ES7

The Evolution of JavaScript

slide-2
SLIDE 2

Who is Jafar Husain?

  • Architect of Falcor, Netflix’s OSS data

platform

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

June 2015

ES6 spec will be finalized in

slide-4
SLIDE 4

Isn’t it too early to talk about ES7 ES7?

slide-5
SLIDE 5

No.

slide-6
SLIDE 6

ES7 ES7 features are already starting to roll into browsers.

slide-7
SLIDE 7

ES7 ES7 ES6 ES6 ES5 ES5

slide-8
SLIDE 8

ES7 ES7 ES6 ES6

slide-9
SLIDE 9

BIG 2

ES7 ES7

slide-10
SLIDE 10

#1

slide-11
SLIDE 11

Easier Model/View Synchronization

Model Model View iew

slide-12
SLIDE 12

#2

slide-13
SLIDE 13

Easier Async Programming

pull push

slide-14
SLIDE 14

Arrow Functions

ES6 ES6

=> ¡

slide-15
SLIDE 15

Arrow Functions

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

ES 6 5

slide-16
SLIDE 16

Controller View Model

slide-17
SLIDE 17
slide-18
SLIDE 18

Why not natively support change notification?

? ?

slide-19
SLIDE 19

Object.observe

ES7 ES7

slide-20
SLIDE 20

Object.observe

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

slide-21
SLIDE 21

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” ¡ ¡ ¡ ¡ ¡} ¡ ] ¡

slide-22
SLIDE 22

Object.unobserve

Object.unobserve(person, ¡changesHandler); ¡ ¡

slide-23
SLIDE 23

unobserve ¡

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

slide-24
SLIDE 24 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

slide-25
SLIDE 25

How to avoid the

Notification Storm?

How to avoid the

Notification Storm?

slide-26
SLIDE 26

Microtasks

ES6 ES6

slide-27
SLIDE 27 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; ¡

slide-28
SLIDE 28 sync sync

Object.observe on Microtasks

Model A Model B DOM

slide-29
SLIDE 29

Try Object.observe

slide-30
SLIDE 30

Object.observe

slide-31
SLIDE 31

ES ES Feature Maturity Stages

  • 0. Strawman
  • 1. Proposal
  • 2. Draft
  • 3. Candidate
  • 4. Finished
slide-32
SLIDE 32

Maturity Stage 2: Draft

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

slide-33
SLIDE 33

How can we make async programming easier?

? ?

slide-34
SLIDE 34

Blocking is Easy

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

slide-35
SLIDE 35

Blocking means Pulling

¡ ¡ ¡ price ¡= ¡getStockPrice(“Devine ¡Inc.”); ¡

Data delivered in retur eturn position position

pull

slide-36
SLIDE 36

What if we want to wait instead of block?

? ?

slide-37
SLIDE 37

Waiting means Pushing

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

Data delivered in ar argument position gument position

push

slide-38
SLIDE 38

The Pyramid

  • f

DOOM

slide-39
SLIDE 39

Blocking/Pulling

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

slide-40
SLIDE 40

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); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}) ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡ ¡ ¡ ¡ ¡}) ¡ } ¡ ¡ ¡

slide-41
SLIDE 41

Pulling and Pushing

are symmetrical

slide-42
SLIDE 42

Why must waiting be so much harder than blocking?

? ?

slide-43
SLIDE 43

Promises

ES6 ES6

slide-44
SLIDE 44

Promises

42 ¡

X ¡

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

slide-45
SLIDE 45

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 ¡

slide-46
SLIDE 46

Not bad, but…

slide-47
SLIDE 47

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

? ?

slide-48
SLIDE 48

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 ¡

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

slide-49
SLIDE 49

Generator function

ES6 ES6

slide-50
SLIDE 50

A generator function can return multiple values.

96 ¡ 23 ¡ done ¡

slide-51
SLIDE 51

Generator Functions in ES6 ES6

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

slide-52
SLIDE 52

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 ¡} ¡ > ¡

slide-53
SLIDE 53

Iteration

42 ¡

Consumer Producer

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

slide-54
SLIDE 54

Iteration

39 ¡

Consumer Producer

var ¡result ¡= ¡iterator.next() ¡

slide-55
SLIDE 55

Iteration

done ¡

Consumer Producer

var ¡result ¡= ¡iterator.next() ¡

slide-56
SLIDE 56

How Y How Yield W ield Works

  • rks
function* ¡getFibonnacciSequence() ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡let ¡val1 ¡= ¡0, ¡val2 ¡= ¡1, ¡swap; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡yield ¡val1; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡yield ¡val2; ¡ ¡ ¡ ¡ ¡while(true) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡swap ¡= ¡val1 ¡+ ¡val2; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡val2 ¡= ¡swap; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡val1 ¡= ¡val2; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡yield ¡swap; ¡ ¡ ¡ ¡ ¡} ¡ } ¡ 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() ¡{ ¡ ¡ ¡ ¡ ¡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() ¡{ ¡ ¡ ¡ ¡ ¡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}; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡ ¡ ¡ ¡ ¡} ¡ } ¡
slide-57
SLIDE 57

All ES6 collections are Iterable.

ES6 ES6

slide-58
SLIDE 58

Iterator Pattern

> ¡var ¡iterator ¡= ¡[42, ¡39][@@iterator](); ¡ > ¡{ ¡value: ¡42, ¡done: ¡false ¡} ¡ > ¡ ¡ > ¡console.log(iterator.next()); ¡ ¡ > ¡console.log(iterator.next()); ¡ ¡ > ¡{ ¡value: ¡39, ¡done: ¡false ¡} ¡ > ¡ > ¡console.log(iterator.next()); ¡ ¡ > ¡{ ¡done: ¡true ¡} ¡ > ¡

slide-59
SLIDE 59

Consuming Consuming Iterables with for for.. ..of

  • f

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

slide-60
SLIDE 60

If generator functions return iterators…

slide-61
SLIDE 61

…why aren’t they called Iterator functions?

? ?

slide-62
SLIDE 62

Iterator Observer

Generator

slide-63
SLIDE 63

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

slide-64
SLIDE 64

A Generator is an Observer

receive data receive an error

receive return value ¡ generator.next(5); ¡ generator.throw(“fail”); ¡ generator.return(5); ¡

push

slide-65
SLIDE 65

Iteration only allows data to flow one-way.

96 ¡ 23 ¡ done ¡

slide-66
SLIDE 66

Generators allow feedback.

96 ¡ 33 ¡ 21 ¡ 99 ¡ done ¡

slide-67
SLIDE 67

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 ¡

slide-68
SLIDE 68

“PFE” ¡

Async Iteration

Consumer Producer

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

27.83 ¡

Async Iteration

Consumer Producer

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

“PFE” ¡

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

Async Iteration

Consumer Producer

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

27.83 ¡

var ¡price ¡= ¡27.83 ¡ return ¡price ¡

done ¡

slide-71
SLIDE 71 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

slide-72
SLIDE 72

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); ¡

slide-73
SLIDE 73

Get Task.js

slide-74
SLIDE 74

Why should easy waiting require a library?

? ?

slide-75
SLIDE 75

Async Functions

ES7 ES7

slide-76
SLIDE 76

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); ¡

slide-77
SLIDE 77

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 ¡

slide-78
SLIDE 78

Symmetrical support for push and pull functions.

ES7 ES7

slide-79
SLIDE 79

Async Functions

slide-80
SLIDE 80

Try Async Functions

slide-81
SLIDE 81

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

slide-82
SLIDE 82

…but what if you need to wait on

? ?

an async stream of values?

slide-83
SLIDE 83

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 ¡} ¡
slide-84
SLIDE 84

Unfortunately there’s a problem.

slide-85
SLIDE 85

The web has no standard Observable Observable interface.

slide-86
SLIDE 86

Iteration

Consumer Producer

Observation

Consumer

slide-87
SLIDE 87

b ¡ b ¡ b ¡ b ¡

42 ¡

Consumer Producer

  • bserver.next(42) ¡

Observation

39 ¡ done ¡

  • bserver.return() ¡

producer.observer(observer); ¡

  • bserver.next(39) ¡
slide-88
SLIDE 88

The Web’s Many Observable APIs

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

push

slide-89
SLIDE 89

interface ¡Iterable ¡{ ¡ ¡Generator ¡iterator(void); ¡ } ¡

Introducing Observable

interface ¡Observable ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡observer(Generator); ¡ } ¡ void ¡

slide-90
SLIDE 90

Observer pattern

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

slide-91
SLIDE 91

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”); ¡ })(); ¡ ¡ ¡ ¡ ¡ ¡

slide-92
SLIDE 92

Push APIs implement Observable

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

slide-93
SLIDE 93

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); ¡ }; ¡
slide-94
SLIDE 94

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” ¡… ¡} ¡

slide-95
SLIDE 95

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; ¡ ¡ ¡} ¡ } ¡

slide-96
SLIDE 96

Try Observable

slide-97
SLIDE 97

If an async

async function returns a Promise,

and a function

function* returns an Iterator…

slide-98
SLIDE 98

…what does an async

async function function* return?

? ?

slide-99
SLIDE 99

Function Types in ES7

Synchr Synchronous

  • nous

Asynchr Asynchronous

  • nous

function T Promise function* * Iterator

slide-100
SLIDE 100

A function* returns multiple values.

96 ¡ 23 ¡ done ¡

slide-101
SLIDE 101

An async function pushes one value.

96 ¡

slide-102
SLIDE 102

An async function* pushes multiple values.

96 ¡ 23 ¡ done ¡

slide-103
SLIDE 103

An async generator function returns an Observable.

b ¡

slide-104
SLIDE 104

Async generator functions

ES7 ES7

b ¡

slide-105
SLIDE 105

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 ¡}; ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡ ¡ ¡ ¡ ¡} ¡ } ¡ ¡

slide-106
SLIDE 106

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} ¡

slide-107
SLIDE 107

ES7 should have symmetrical

support for push and pull streams.

slide-108
SLIDE 108

How can we make async I/O easier?

? ?

slide-109
SLIDE 109

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

slide-110
SLIDE 110

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

slide-111
SLIDE 111

b ¡ b ¡ b ¡ b ¡

42 ¡

Consumer Producer

Async Observation

39 ¡ done ¡

slide-112
SLIDE 112

Async IO 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 ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡ ¡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

slide-113
SLIDE 113

Async IO 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 ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡ ¡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

slide-114
SLIDE 114

Function Types in ES7

Synchr Synchronous

  • nous

Asynchr Asynchronous

  • nous

function T Promise function* * Iterator Observable

slide-115
SLIDE 115

More Info on async function*

slide-116
SLIDE 116

async function*

slide-117
SLIDE 117

ES Maturity Stage 0: Strawman

“Allow ¡for ¡feedback” ¡

slide-118
SLIDE 118

Resources

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

Questions?

? ?

slide-120
SLIDE 120

Observer Pattern with Events

> ¡document.addEventListener( ¡ ¡ ¡ ¡ ¡“mousemove”, ¡ ¡ ¡ ¡ ¡function ¡next(e) ¡{ ¡ ¡ ¡ ¡ ¡ ¡console.log(e); ¡ ¡ ¡ ¡ ¡}); ¡ > ¡{ ¡clientX: ¡425, ¡clientY: ¡543 ¡} ¡ ¡ ¡ > ¡{ ¡clientX: ¡450, ¡clientY: ¡558 ¡} ¡ ¡ ¡ > ¡{ ¡clientX: ¡455, ¡clientY: ¡562 ¡} ¡ ¡ ¡ > ¡{ ¡clientX: ¡460, ¡clientY: ¡743 ¡} ¡ ¡ ¡ > ¡{ ¡clientX: ¡476, ¡clientY: ¡760 ¡} ¡ ¡ ¡ > ¡{ ¡clientX: ¡476, ¡clientY: ¡760 ¡} ¡ ¡ ¡ > ¡{ ¡clientX: ¡476, ¡clientY: ¡760 ¡} ¡ ¡ > ¡{ ¡clientX: ¡476, ¡clientY: ¡760 ¡} ¡

slide-121
SLIDE 121

Observer Pattern with setInterval

> ¡var ¡counter ¡= ¡0; ¡ ¡ ¡setInterval(function ¡next(e) ¡{ ¡ ¡ ¡ ¡ ¡ ¡console.log(counter++); ¡ ¡ ¡}, ¡20); ¡ > ¡0 ¡ ¡ ¡ > ¡1 ¡ ¡ ¡ > ¡2 ¡ ¡ ¡ > ¡3 ¡ ¡ ¡ > ¡4 ¡ > ¡5 ¡ > ¡6 ¡ > ¡7 ¡

slide-122
SLIDE 122

The decision to push or pull is

  • rthogonal to most algorithms.

push pull

slide-123
SLIDE 123

Iteration is Pull

var ¡result ¡= ¡generator.next(); ¡ pull

slide-124
SLIDE 124

Observation is Push

b ¡ generator.next(5); ¡ push

slide-125
SLIDE 125

Iteration and Observation

are symmetrical