Housekeeping Welcome to today s ACM Webinar. The presentation - - PowerPoint PPT Presentation

▶
housekeeping
SMART_READER_LITE
LIVE PREVIEW

Housekeeping Welcome to today s ACM Webinar. The presentation - - PowerPoint PPT Presentation

Jun 13, 2023 29 likes •731 views

Housekeeping Welcome to today s ACM Webinar. The presentation starts at the top of the hour. If you are experiencing any problems/ issues, refresh your console by pressing the F5 key on your keyboard in W indow s , Com m and +

slide-1
SLIDE 1

“Housekeeping”

  • Welcome to today’s ACM Webinar. The presentation starts at the top of the hour.
  • If you are experiencing any problems/ issues, refresh your console by pressing the F5 key on your
keyboard in W indow s, Com m and + R if on a Mac, or refresh your browser if you’re on a mobile device; or close and re-launch the presentation. You can also view the Webcast Help Guide, by clicking on the “Help” widget in the bottom dock.
  • To control volume, adjust the master volume on your computer.
  • If you think of a question during the presentation, please type it into the Q&A box and click on the
submit button. You do not need to wait until the end of the presentation to begin submitting questions.
  • At the end of the presentation, you’ll see a survey open in your browser. Please take a minute to
fill it out to help us improve your next webinar experience.
  • You can download a copy of these slides by clicking on the Resources widget in the bottom dock.
  • This presentation is being recorded and will be available for on-demand viewing in the next 1-2
  • days. You will receive an autom atic e-m ail notification when the recording is ready.
1
slide-2
SLIDE 2

Async JavaScript at Netflix

Jafar Husain @jhusain

slide-3
SLIDE 3
  • 1,400+ trusted technical books and videos by leading publishers including

O’Reilly, Morgan Kaufmann, others

  • Online courses with assessments and certification-track mentoring, member

discounts on tuition at partner institutions

  • Learning Webinars on big topics (Cloud/ Mobile Development, Cybersecurity, Big

Data, Recommender Systems, SaaS, Agile, Machine Learning, NLP , Hadoop Parallel Programming, etc.)

  • ACM Tech Packs on top current computing topics: Annotated Bibliographies

compiled by subject experts

  • Popular video tutorials/ keynotes from ACM Digital Library, A.M. Turing Centenary

talks/ panels

  • Podcasts with industry leaders/ award winners

ACM Learning Center

http://learning.acm.org

3
slide-4
SLIDE 4

“Housekeeping”

  • Welcome to today’s ACM Webinar. The presentation starts at the top of the hour.
  • If you are experiencing any problems/ issues, refresh your console by pressing the F5 key on your
keyboard in W indow s, Com m and + R if on a Mac, or refresh your browser if you’re on a mobile device; or close and re-launch the presentation. You can also view the Webcast Help Guide, by clicking on the “Help” widget in the bottom dock.
  • To control volume, adjust the master volume on your computer.
  • If you think of a question during the presentation, please type it into the Q&A box and click on the
submit button. You do not need to wait until the end of the presentation to begin submitting questions.
  • At the end of the presentation, you’ll see a survey open in your browser. Please take a minute to
fill it out to help us improve your next webinar experience.
  • You can download a copy of these slides by clicking on the Resources widget in the bottom dock.
  • This presentation is being recorded and will be available for on-demand viewing in the next 1-2
  • days. You will receive an autom atic e-m ail notification when the recording is ready.
4
slide-5
SLIDE 5

Talk Back

  • Use the Facebook widget in the bottom panel to

share this presentation with friends and colleagues

  • Use Twitter widget to Tweet your favorite quotes

from today’s presentation with hashtag # ACMWebinarAsyncJS

  • Submit questions and comments via Twitter to

@acmeducation – we’re reading them!

slide-6
SLIDE 6

Who is Jafar?

  • Cross-Team Technical Lead for the Netflix

UIs

  • Created the async data platform for Netflix

UI’s

  • Member of TC39
  • 13 years in the industry, formerly worked at

Microsoft and GE

slide-7
SLIDE 7

This is the story of how Netflix solved

BIG async problems

by thinking differently about

Events.

slide-8
SLIDE 8

201 4 3 2 1

slide-9
SLIDE 9

The Netflix App is Asynchronous

  • App Startup
  • Player
  • Data Access
  • Animations
  • View/Model binding
slide-10
SLIDE 10

Async Problems

  • Memory Leaks
  • Race Conditions
  • Callback Hell
  • Complex state machines
  • Error Handling
slide-11
SLIDE 11

Async is Hard

function play(movieId, cancelButton, callback) { var movieTicket, playError, tryFinish = function() { if (playError) { callback(null, playError); } else if (movieTicket && player.initialized) { callback(null, ticket); } }; cancelButton.addEventListener(“click”, function() { playError = “cancelled”; } if (!player.initialized) { player.init(function(error) { playError = error; tryFinish(); } } authorizeMovie(function(error, ticket) { playError = error; movieTicket = ticket; tryFinish(); }); }); function play(movieId, cancelButton, callback) { var movieTicket, playError, tryFinish = function() { if (playError) { callback(null, playError); } else if (movieTicket && player.initialized) { callback(null, ticket); } }; cancelButton.addEventListener(“click”, function() { playError = “cancelled”; } if (!player.initialized) { player.init(function(error) { playError = error; tryFinish(); }); } authorizeMovie(function(error, ticket) { playError = error; movieTicket = ticket; tryFinish(); }); }); function play(movieId, cancelButton, callback) { var movieTicket, playError, tryFinish = function() { if (playError) { callback(null, playError); } else if (movieTicket && player.initialized) { callback(null, ticket); } }; cancelButton.addEventListener(“click”, function() { playError = “cancelled”; } if (!player.initialized) { player.init(function(error) { playError = error; tryFinish(); }); } authorizeMovie(function(error, ticket) { playError = error; movieTicket = ticket; tryFinish(); }); }); function play(movieId, cancelButton, callback) { var movieTicket, playError, tryFinish = function() { if (playError) { callback(null, playError); } else if (movieTicket && player.initialized) { callback(null, ticket); } }; cancelButton.addEventListener(“click”, function() { playError = “cancelled”; } if (!player.initialized) { player.init(function(error) { playError = error; tryFinish(); } } authorizeMovie(function(error, ticket) { playError = error; movieTicket = ticket; tryFinish(); }); });
slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14 Iterator Observer ?
slide-15
SLIDE 15

Iterator

> var iterator = getNumbers(); > { value: 1, done: false } > > console.log(iterator.next()); > console.log(iterator.next()); > { value: 2, done: false } > > console.log(iterator.next()); > { value: 3, done: false } > > console.log(iterator.next()); > { done: true } >

slide-16
SLIDE 16

Observer Pattern

> 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-17
SLIDE 17 Iterator Observer progressively send information to consumer
slide-18
SLIDE 18
slide-19
SLIDE 19

“What’s the difference between an Array…

[{x: 23, y: 44}, {x:27, y:55}, {x:27, y:55}]

slide-20
SLIDE 20

… and an Event?

{x: 23, y: 44}...{x:27, y:55}.... {x:27, y:55}......

slide-21
SLIDE 21

Events and Arrays are both collections.

slide-22
SLIDE 22

Now for a brief

JavaScript 6 tutorial…

slide-23
SLIDE 23

Functions

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

JS 6 5

slide-24
SLIDE 24

Fin.

slide-25
SLIDE 25

The majority of Netflix’s async code is written with just a few

flexible functions.

slide-26
SLIDE 26

ForEach

> [1, 2, 3].forEach(x => console.log(x)) > 1 > 2 > 3 >

slide-27
SLIDE 27

Map

slide-28
SLIDE 28

Map

> [1, 2, 3].map(x => x + 1) > [2, 3, 4] >

slide-29
SLIDE 29

Filter

slide-30
SLIDE 30

Filter

> [1, 2, 3].filter(x => x > 1) > [2, 3] >

slide-31
SLIDE 31

concatAll

slide-32
SLIDE 32

concatAll

> [ [1], [2, 3], [], [4] ].concatAll() > [1, 2, 3, 4] >

slide-33
SLIDE 33

Map/Filter/ConcatAll

> [1, 2, 3].map(x => x + 1) > [2, 3, 4] > [1, 2, 3].filter(x => x > 1) > [2, 3] > [ [1], [2, 3], [], [4] ].concatAll() > [1, 2, 3, 4] >

slide-34
SLIDE 34
slide-35
SLIDE 35

Let’s use map, filter, and concatAll to get a list of your favorite Netflix titles.

slide-36
SLIDE 36

Top-rated Movies Collection

var getTopRatedFilms = user => user.videoLists. map(videoList => videoList.videos. filter(video => video.rating === 5.0)). concatAll(); getTopRatedFilms(user). forEach(film => console.log(film));

slide-37
SLIDE 37

What if I told you…

…that you could create a drag event… …with nearly the same code?

slide-38
SLIDE 38

Top-rated Movies Collection

var getTopRatedFilms = user => user.videoLists. map(videoList => videoList.videos. filter(video => video.rating === 5.0)). concatAll(); getTopRatedFilms(user). forEach(film => console.log(film));

slide-39
SLIDE 39

Mouse Drags Collection

var getElementDrags = elmt => elmt.mouseDowns. map(mouseDown => document.mouseMoves. filter takeUntil(document.mouseUps)). concatAll(); getElementDrags(image). forEach(pos => image.position = pos);

slide-40
SLIDE 40

Observable === Collection + Time

Introducing Observable

slide-41
SLIDE 41

Reactive Extensions

  • Observable Type + Array Functions (and more)
  • Open Source
  • Ported to…
  • C
  • C#/VB.Net
  • Javascript
  • Java (Netflix)
slide-42
SLIDE 42

Observables can model…

  • Events
  • Animations
  • Async IO
slide-43
SLIDE 43

Events to Observables

var mouseMoves = Observable. fromEvent(element, “mousemove”);

slide-44
SLIDE 44

Event Subscription

// “subscribe” var handler = (e) => console.log(e); document.addEventListener(“mousemoves”, handler); // “unsubscribe” document.removeEventListener(“mousemoves”, handler);

slide-45
SLIDE 45

Observable.forEach

// “subscribe” var subscription = mouseMoves.forEach(console.log); // “unsubscribe” subscription.dispose();

slide-46
SLIDE 46

Expanded Observable.forEach

// “subscribe” var subscription = mouseMoves.forEach( // next data event => console.log(event), // error error => console.error(error), // completed () => console.log(“done”)); // “unsubscribe” subscription.dispose();

  • ptional
slide-47
SLIDE 47

Observable Literal

JS6

time

{1……2…………3}

slide-48
SLIDE 48

ForEach

> {1……2…………3}.forEach(console.log) > 1 > > 2 > > 3 >

time

> {1……2…………3}

slide-49
SLIDE 49

Map

> {1……2…………3}.map(x => x + 1) > 2 > > 3 > > 4 >

time

slide-50
SLIDE 50

> 2 > 3 >

Filter

> {1……2…………3}.filter(x => x + 1) > > 2 >

time

slide-51
SLIDE 51

concatAll

[ [1] [2, 3], [], [4] ].concatAll() [1, 2, 3, 4]

slide-52
SLIDE 52

concatAll

{ …{1} ………{2………………3}, ……………{} ………………{4} }.concatAll() {…1…2………………3…4}

time

slide-53
SLIDE 53

mergeAll

{ …{1} ………{2………………3}, ……………{} ………………{4} }.mergeAll() {…1…2……4………3}

time

slide-54
SLIDE 54

switchLatest

{ …{1} ………{2………………3}, ……………{} ………………{4} }.switchLatest() {…1…2……4}

time subscription.dispose()

slide-55
SLIDE 55

TakeUntil

{…1…2…………3}.takeUntil( {……………4}) {…1…2…}

time Source collection Stop collection

slide-56
SLIDE 56

Don’t unsubscribe from Events. Complete them when another event fires.

slide-57
SLIDE 57

Mouse Drags Collection

var getElementDrags = elmt => elmt.mouseDowns. map(mouseDown => document.mouseMoves. takeUntil(document.mouseUps)). concatAll(); getElementDrags(image). forEach(pos => image.position = pos);

slide-58
SLIDE 58

Netflix Search

slide-59
SLIDE 59

Netflix Search

var searchResultSets = keyPresses. throttle(250). map(key => getJSON(“/searchResults?q=” + input.value). retry(3). takeUntil(keyPresses)). concatAll(); searchResultSets.forEach( resultSet => updateSearchResults(resultSet), error => showMessage(“the server appears to be down.”));

slide-60
SLIDE 60

Netflix Search

var searchResultSets = keyPresses. throttle(250). map(key => getJSON(“/searchResults?q=” + input.value). retry(3). takeUntil(keyPresses)). concatAll switchLatest(); searchResultSets.forEach( resultSet => updateSearchResults(resultSet), error => showMessage(“the server appears to be down.”));

slide-61
SLIDE 61

Netflix Search

var searchResultSets = keyPresses. throttle(250). map(key => getJSON(“/searchResults?q=” + input.value). retry(3)). switchLatest(); searchResultSets.forEach( resultSet => updateSearchResults(resultSet), error => showMessage(“the server appears to be down.”));

slide-62
SLIDE 62

Netflix Player

slide-63
SLIDE 63

Player Callback Hell

function play(movieId, cancelButton, callback) { var movieTicket, playError, tryFinish = function() { if (playError) { callback(null, playError); } else if (movieTicket && player.initialized) { callback(null, ticket); } }; cancelButton.addEventListener(“click”, function() { playError = “cancel”; }); if (!player.initialized) { player.init(function(error) { playError = error; tryFinish(); } } authorizeMovie(movieId, function(error, ticket) { playError = error; movieTicket = ticket; tryFinish(); }); });
slide-64
SLIDE 64

Player with Observable

var authorizations = player. init(). map(() => playAttempts. map(movieId => player.authorize(movieId). catch(e => Observable.empty). takeUntil(cancels)). concatAll())). concatAll(); authorizations.forEach( license => player.play(license), error => showDialog(“Sorry, can’t play right now.”));

slide-65
SLIDE 65

Netflix: Observable Everywhere

  • App Startup
  • Player
  • Data Access
  • Animations
  • View/Model binding
slide-66
SLIDE 66

Interactive Learning Exercises

http://jhusain.github.io/learnrx/

slide-67
SLIDE 67

Observable in JavaScript 7?

async function* getStocks() { let reader = new AsyncFileReader(“stocks.txt”); try { while(!reader.eof) { let line = await reader.readLine(); await yield JSON.parse(line); } } finally { reader.close(); } } async function writeStockInfos() { let writer = new AsyncFileWriter(“stocksAndPrices.txt”); try { for(let name on getStocks()) { let price = await getStockPrice(name); await writer.writeLine(JSON.stringify({name, price})); } } finally { writer.close(); } }
slide-68
SLIDE 68

Resources

  • reactivetrader.azurewebsites.net
  • https://github.com/Reactive-Extensions/RxJS
  • RxJava
  • http://jhusain.github.io/learnrx/
  • @jhusain
slide-69
SLIDE 69

Questions

slide-70
SLIDE 70

ACM: The Learning Continues…

  • Questions about this webcast? learning@acm.org
  • ACM Learning Webinars (on-demand archive):

http://learning.acm.org/webinar

  • ACM Learning Center: http://learning.acm.org
  • ACM Queue: http://queue.acm.org/
70