ES7. The Evolution of JavaScript

Transcription

1 ES7 The Evolution of JavaScript

2 Who is Jafar Husain? Architect of Falcor, Netflix s OSS data platform Netflix representative TC-39 Formerly worked for MS and GE

3 ES6 spec will be finalized in June 2015

4 Isn t it too early to talk about ES7?

5 No.

6 ES7 features are already starting to roll into browsers.

7 ES5 ES6 ES7

8 ES7 ES6

9 2 BIG ES7

10 #1

11 Easier Model/View Synchronization Model View

12 #2

13 Easier Async Programming pull push

14 Arrow Functions => ES6

15 Arrow Functions function(x) x { return => x + 1; function(x, y) { => return x + y; ES 5 6

16 Controller View Model

17

18 Why not natively support change notification??

19 Object.observe ES7

20 Object.observe var person = {; var changeshandler = changes => console.log(changes); Object.observe(person, changeshandler);

21 Object.observe person = { name: Dana T. Miller Miller, ; employer: Tommy's Box Store [ ] ] { "type": new", "type": update", "type": reconfigure", "type": delete", "name": name, "name": employer, oldvalue: Dana Tommy's Miller Box Store

22 Object.unobserve Object.unobserve(person, changeshandler);

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

24 The Event Loop Queue Observe notification person.name = Jim ; person.age = 22; Event Handler Browser render XHR handler Timeout handler Current Task Tasks on the event loop

25 How to avoid the Notification Storm?

26 Microtasks ES6

27 Event Loop Queue + Microtasks Observe handler person.name = Jim ; person.age = 23; Event handler Browser render XHR handler Timeout handler Current Task Tasks on the event loop

28 Object.observe on Microtasks sync Model A sync Model B DOM

29 Try Object.observe

30 Object.observe

31 ES Feature Maturity Stages 0. Strawman 1. Proposal 2. Draft 3. Candidate 4. Finished

32 Maturity Stage 2: Draft Commi&ee expects the feature to be developed and included in the standard.

33 How can we make async programming easier??

34 Blocking is Easy function getstockprice(name) { var symbol = getstocksymbol(name); var price = getstockprice(symbol); return price;

35 Blocking means Pulling Data delivered in return position price = getstockprice( Devine Inc. ); pull

36 What if we want to wait instead of block??

37 Waiting means Pushing Data delivered in argument position getstockprice( Devine Inc., price => { ); push

38 The Pyramid of DOOM

39 Blocking/Pulling function getstockprice(name) { var symbol = getstocksymbol(name); var price = getstockprice(symbol); return price;

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

41 Pulling and Pushing are symmetrical

42 Why must waiting be so much harder than blocking??

43 Promises ES6

44 Promises 42 X promise.then(value => {, error => { );

45 sync function getstockprice(name) { var symbol = getstocksymbol(name); var price = getstockprice(symbol); return price; async function getstockprice(name) { return getstocksymbol(name). then(symbol => getstockprice(symbol));

46 Not bad, but

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

48 sync async function getstockprice(name) { var symbol = getstocksymbol(name); var price = getstockprice(symbol); return price; function* getstockprice(name) {{ return var symbol getstocksymbol(name). = yield getstocksymbol(name); var price then(symbol = yield => getstockprice(symbol); getstockprice(symbol)); return price;

49 Generator function ES6

50 A generator function can return multiple values. done 96 23

51 Generator Functions in ES6 function* getnumbers() { yield 42; yield 32; return 19;

52 Retrieving function* results function* getnumbers() { yield 42; yield 32; return 19; > var iterator = getnumbers(); > console.log(iterator.next()); > { value: 42, done: false > console.log(iterator.next()); > { value: 32, done: false > console.log(iterator.next()); > { value: 19, done: true >

53 Iteration Consumer Producer 42 var var iterator result = = producer.iterator(); iterator.next()

54 Iteration Consumer Producer 39 var result = iterator.next()

55 Iteration Consumer Producer done var result = iterator.next()

56 How Yield Works function* function getfibonnaccisequence() { { return { next: function() { let val1 = 0, val2 let = val1 1, swap; = 0, val2 = 1, swap, state = 0; switch(state) { case 0: state = 1; yield val1; return {value: val1, done: false; case 1: state = 2; yield val2; return {value: val2, done: false; while(true) { default: swap = val1 + val2; swap = val1 + val2; val2 = swap; val2 = swap; val1 = val2; val1 = val2; yield swap; return {value: swap, done: false;

57 All ES6 collections are Iterable. ES6

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

59 Consuming Iterables with for..of > for(var x of [42,39,17]) { console.log(x); > 42 > 39 > 17 >

60 If generator functions return iterators

61 why aren t they called Iterator functions??

62 Iterator Generator Observer

63 A Generator is an Iterator yield value generator.next().value; throw an error return value try { generator.next(); catch(err) {... var pair = generator.next(); if (pair.done) alert(pair.value); pull

64 A Generator is an Observer receive data generator.next(5); receive an error generator.throw( fail ); receive return value generator.return(5); push

65 Iteration only allows data to flow one-way. done 96 23

66 Generators allow feedback. done

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

68 Async Iteration Consumer Producer PFE result.then(data var generator var = = getstockprice( Pfizer ); => generator.next(), error => ) var symbol = yield getstocksymbol( Pfizer );

69 Async Iteration Consumer Producer PFE result.then(data var = generator.next( PFE ) =>, error => ) var symbol price = = yield PFE getstockprice(symbol); getstocksymbol( Pfizer );

70 Async Iteration Consumer Producer done var result = generator.next( ) var return price price = yield getstockprice(symbol);

71 Asynchronous Iteration function* getstockprice(name) { var symbol = JNJ ; yield getstocksymbol(name); symbolpromise; var price = yield ; getstockprice(symbol) pricepromise; return price; function spawn(generator) { return new Promise((accept, reject) => { var onresult = lastpromiseresult JNJ => { var {value, done = {value: generator.next(lastpromiseresult); symbolpromise, , pricepromise, done: JNJ true; done: false; if (!done) { value.then(onresult, reject); else accept(value); ; onresult(); ); producer consumer > spawn(getstockprice( Johnson and Johnson )).then(console.log); >

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

73 Get Task.js

74 Why should easy waiting require a library??

75 Async Functions ES7

76 Async Functions in ES7 function* async function getstockprice(name) { { var symbol = yield await getstocksymbol(name); var price = yield await getstockprice(symbol); return price; var result = spawn(getstockprice.bind(null, ( PFE )); result.then(console.log, console.error);

77 sync async 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;

78 Symmetrical support for push and pull functions. ES7

79 Async Functions

80 Try Async Functions

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

82 but what if you need to wait on an async stream of values??

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: , oldprice:

84 Unfortunately there s a problem.

85 The web has no standard Observable interface.

86 Observation Iteration Consumer Producer Consumer

87 Observation Producer Consumer done b observer.next(39) observer.next(42) observer.return() producer.observer(observer);

88 The Web s Many Observable APIs DOM Events Websockets Server-sent Events Node Streams Service Workers jquery Events XMLHttpRequest setinterval push

89 Introducing Observable interface Iterable { Generator iterator(void); interface Observable { void observer(generator);

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

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

92 Push APIs implement Observable DOM Events Websockets Server-sent Events Node Streams Service Workers jquery Events XMLHttpRequest setinterval Observable

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

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

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;

96 Try Observable

97 If an async function returns a Promise, and a function* returns an Iterator

98 what does an async function* return??

99 Function Types in ES7 Synchronous Asynchronous function T Promise function* Iterator

100 A function* returns multiple values. done 96 23

101 An async function pushes one value. 96

102 An async function* pushes multiple values. done 96 23

103 An async generator function returns an Observable. b

104 Async generator functions b ES7

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 ;

106 Consuming Observables in ES7 > async function printspikes() { ()); for(var spike on getpricespikes( JNJ, 2.00)) { console.log(pricespike); > { oldprice: , price: > { oldprice: , price: > { oldprice: , price: > { oldprice: , price: > { oldprice: , price: > { oldprice: , price: > { oldprice: , price:

107 ES7 should have symmetrical support for push and pull streams.

108 How can we make async I/O easier??

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

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

111 Async Observation Producer Consumer done b

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(); promise returned from async next fn async function writestockinfos() { var writer = new AsyncFileWriter( stocksandprices.txt ); try { for(var await getstocks.foreach(async name on getstocks()) { function(name) { var price = await getstockprice(name); await writer.writeline(json.stringify({name, price)); ); finally { await writer.close();

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(); promise returned from async next fn async function writestockinfos() { var writer = new AsyncFileWriter( stocksandprices.txt ); try { await getstocks.foreach(async function(name) { var price = await getstockprice(name); await writer.writeline(json.stringify({name, price)); ); finally { await writer.close();

114 Function Types in ES7 Synchronous Asynchronous function T Promise function* Iterator Observable

115 More Info on async function*

116 async function*

117 ES Maturity Stage 0: Strawman Allow for feedback

118 Resources esdiscuss.org

119 Questions??

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

121 Observer Pattern with setinterval > var counter = 0; setinterval(function next(e) { > 0 > 1 > 2 > 3 > 4 > 5 > 6 > 7 console.log(counter++);, 20);

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

123 Iteration is Pull var result = generator.next(); pull

124 Observation is Push b generator.next(5); push

125 Iteration and Observation are symmetrical