From Imperative To Reactive Thinking

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

@ todd motto @ mrja me she nry

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

"REACTIVE THINKING"

Slide 5

Slide 5 text

"IMPERATIVE THINKING"

Slide 6

Slide 6 text

DESIGN PATTERNS

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

DISCOVERING PATTERNS Ob se rve r Pa tte rn Se que nce s a nd O pe ra tors

Slide 10

Slide 10 text

OBSERVER PATTERN

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Observers Observable

Slide 20

Slide 20 text

Consumers Producer

Slide 21

Slide 21 text

SEQUENCES AND OPERATORS

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Producer Consumer

Slide 24

Slide 24 text

Producer Pipeline Consumer

Slide 25

Slide 25 text

Producer Pipeline Consumer

Slide 26

Slide 26 text

Producer Pipeline (Sequence) .map() .filter() Consumer

Slide 27

Slide 27 text

Producer Pipeline (Sequence) Produces values Business logic Final outcome Consumer

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Water

Slide 30

Slide 30 text

Water heatWater() heatWater()

Slide 31

Slide 31 text

Water heatWater() heatWater() addBeans() addBeans()

Slide 32

Slide 32 text

Water heatWater() heatWater() addBeans() addBeans() addMilk()

Slide 33

Slide 33 text

White coffee Water heatWater() heatWater() addBeans() addBeans() addMilk() Black coffee

Slide 34

Slide 34 text

Consumer Producer Business logic Business logic Consumer

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

PATTERNS DISCOVERED Ob se rve r Pa tte rn Se que nce s a nd O pe ra tors

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

DEMO

Slide 44

Slide 44 text

Imperative SOLUTION #1:

Slide 45

Slide 45 text

Elements of our game 1.

James

Todd

4. 5. Start

Slide 46

Slide 46 text

Game Helpers 6. const CHANCE_OF_BAD_THROW = 0.5; 7. 8. // Throw affects chances of catching 9. function checkDropped(isBadThrow): boolean; 1. // Helpers to move ball around in the game 2. function addBall(player: Element): void; 3. function removeBall(player: Element): void; 4. 5. // Simple 50/50 chance of bad throw We use the throw quality to determine whether the ball is caught or not.

Slide 47

Slide 47 text

TODO 1. S ta rt the ga me on ` sta rtB tn` click 2. Th row a nd ca tch the ball be twee n 2 pla ye rs 3. Check each th row to see if i t wa s “bad” 4. Check ca tch, e ndi ng the ga me on d rop

Slide 48

Slide 48 text

Starting the game 1. function handleClick() { 2. // our game code 3. } 4. 5. startBtn.addEventListener('click', handleClick);

Slide 49

Slide 49 text

TODO 1. S ta rt the ga me on ` sta rtB tn` click 2. Th row a nd ca tch the ball be twee n 2 pla ye rs 3. Check each th row to see if i t wa s “bad” 4. Check ca tch, e ndi ng the ga me on d rop

Slide 50

Slide 50 text

5. // TODO 6. // - person1 starts with ball 7. // - wait while they get ready to throw 1. // Our two refs to the people DOM nodes 2. throwAndCatchBetween(james, todd); 3. 4. function throwAndCatchBetween(person1, person2) {

Slide 51

Slide 51 text

Core throwing and catching 2. // person1 starts with ball 1. function throwAndCatchBetween(person1, person2) {

Slide 52

Slide 52 text

...now for humans 1. function throwAndCatchBetween(person1, person2) { 2. // person1 starts with ball 3. addBall(person1); 4. 5. // wait while they get ready to throw 6. setTimeout(() => { 7. 8. // person1 throws ball 9. removeBall(person1); 10. 11. // ball travels through the air 12. setTimeout(() => { 13. 14. // person2 catches ball 15. addBall(person2); 16. 17. // Back again! 18. throwAndCatchBetween(person2, person1); 19. Ball flies throught the air for 1 second before being caught.

Slide 53

Slide 53 text

TODO 1. S ta rt the ga me on ` sta rtB tn` click 2. Th row a nd ca tch the ball be twee n 2 pla ye rs 3. Check each th row to see if i t wa s “bad” 4. Check ca tch, e ndi ng the ga me on d rop

Slide 54

Slide 54 text

Check throw quality 8. // person1 throws ball 9. removeBall(person1); 10. // capture if throw was bad 11. const isBadThrow = 12. Math.random() <= CHANCE_OF_BAD_THROW; 1. function throwAndCatchBetween(person1, person2) { 2. // person1 starts with ball 3. addBall(person1); 4. 5. // wait while they get ready to throw 6. setTimeout(() => { 7. 13. 14. // ball travels through the air 15. setTimeout(() => { 16. 17. // person2 catches ball 18. addBall(person2); 19. 20. // Back again! 21. throwAndCatchBetween(person2, person1);

Slide 55

Slide 55 text

TODO 1. S ta rt the ga me on ` sta rtB tn` click 2. Th row a nd ca tch the ball be twee n 2 pla ye rs 3. Check each th row to see if i t wa s “bad” 4. Check ca tch, e ndi ng the ga me on d rop

Slide 56

Slide 56 text

Check if ball was dropped 10. // capture if throw was bad 11. const isBadThrow = 12. Math.random() <= CHANCE_OF_BAD_THROW; 13. 14. // ball travels through the air 15. setTimeout(() => { 16. 17. if (checkDropped(isBadThrow)) { 18. return // Game over: Ball dropped 19. } 3. addBall(person1); 4. 5. // wait while they get ready to throw 6. setTimeout(() => { 7. 8. // person1 throws ball 9. removeBall(person1); 20. 21. // person2 catches ball 22. addBall(person2); 23. 24. // Back again! 25. throwAndCatchBetween(person2, person1); 26.

Slide 57

Slide 57 text

1. S ta rt the ga me on ` sta rtB tn` click 2. Th row a nd ca tch the ball be twee n 2 pla ye rs 3. Check each th row to see if i t wa s “bad” 4. Check ca tch, e ndi ng the ga me on d rop

Slide 58

Slide 58 text

Reactive SOLUTION #2:

Slide 59

Slide 59 text

TODO 1. Ob se rvable 2. Ob se rvable 3. Ob se rvable

Slide 60

Slide 60 text

Observable 6. // Start listening for clicks 7. game$.subscribe(); 1. const startClick$ = Rx.Observable 2. .fromEvent(startBtn, 'click'); 3. 4. const game$ = startClick$; 5. We subscribe to the Observable to begin actually listening for the start button click events.

Slide 61

Slide 61 text

Turn a click into throw and catch! 4. const game$ = startClick$ 5. .switchMap( 6. handleThrowAndCatchBetween(james, todd) 7. ); 1. const startClick$ = Rx.Observable 2. .fromEvent(startBtn, 'click'); 3. 8. 9. // Start listening for clicks 10. game$.subscribe();

Slide 62

Slide 62 text

Core throwing and catching 1. // Usage 2. .switchMap( 3. handleThrowAndCatchBetween(james, todd) 4. ); 5.

Slide 63

Slide 63 text

TODO 1. Ob se rvable 2. Ob se rvable 3. Ob se rvable

Slide 64

Slide 64 text

What events make up a "throw"? 1. // person1 starts with ball 2. addBall(person1); 3. 4. // wait while they get ready to throw 5. setTimeout(() => { 6. 7. // person1 throws ball 8. // capture if throw was bad 9. removeBall(person1); 10. const isBadThrow = 11. Math.random() <= CHANCE_OF_BAD_THROW; 12. We can extract the relevant concepts from our imperative example...

Slide 65

Slide 65 text

Observable 1. // capture if throw was bad 2. const isBadThrow = 3. Math.random() <= CHANCE_OF_BAD_THROW; 4. 5. const throw$ = Rx.Observable.of(isBadThrow); We can make our initial throw$ stream encapsulate the throw quality (so we can evaluate it later).

Slide 66

Slide 66 text

Observable 9. // ball travels through the air 10. .delay(1000); 1. // capture if throw was bad 2. const throw$ = Rx.Observable.of(isBadThrow) 3. // person1 starts with ball 4. .do(() => addBall(person1)) 5. // wait while they get ready to throw 6. .delay(1000) 7. // person1 throws ball 8. .do(() => removeBall(person1))

Slide 67

Slide 67 text

Observable 4. return Rx.Observable.of(isBadThrow) 5. .do(() => addBall(person)) 6. .delay(1000) 7. .do(() => removeBall(person)) 8. .delay(1000); 9. } 1. function handleThrow$From(person) { 2. const isBadThrow = 3. Math.random() <= CHANCE_OF_BAD_THROW;

Slide 68

Slide 68 text

"Plug in" the throwing for p1 and p2 1. // Usage 2. .switchMap( 3. handleThrowAndCatchBetween(james, todd) 4. ); 5.

Slide 69

Slide 69 text

TODO 1. Ob se rvable 2. Ob se rvable 3. Ob se rvable

Slide 70

Slide 70 text

What events make up a "catch"? 5. // Ball is caught succesfully 6. return Rx.Observable.of('') 7. .do(() => addBall(person)) 1. // Ball is dropped 2. if (checkDropped(isBadThrow)) { 3. return Rx.Observable.throw(`Ball dropped`) 4. } If the ball is caught, we return an Observable (the value isn't important) and add the ball to the person as normal.

Slide 71

Slide 71 text

Observable 2. // The returned function will be used within 1. function handleCatch$By(person) { The `isBadThrow` value will be passed in via the switchMap from the previous throw$

Slide 72

Slide 72 text

"Plug in" the throwing for p1 and p2 1. // Usage 2. .switchMap( 3. handleThrowAndCatchBetween(james, todd) 4. ); 5.