The whole future declared in a var
by
André Staltz
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
The whole future declared in a var @andrestaltz
Slide 2
Slide 2 text
var a = 3; var b = 10 * a; console.log(b); // 30 a = 4; console.log(b); // 30 b = 10 * a; console.log(b); // 40
Slide 3
Slide 3 text
var a = 3; var b = 10 * a; console.log(b); // 30 a = 4; console.log(b); // 30 b = 10 * a; console.log(b); // 40
Slide 4
Slide 4 text
var a = 3; var b = 10 * a; console.log(b); // 30 a = 4; console.log(b); // 30 b = 10 * a; console.log(b); // 40
Slide 5
Slide 5 text
var a = 3; var b = 10 * a; console.log(b); // 30 a = 4; console.log(b); // 30 b = 10 * a; console.log(b); // 40
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
var a = 3; var b = 10 * a; console.log(b); // 30 a = 4; b = 10 * a; console.log(b); // 40 a = 6; b = 10 * a; console.log(b); // 60
Slide 8
Slide 8 text
b 30 40 30
Slide 9
Slide 9 text
b 30 40 40
Slide 10
Slide 10 text
b 30 40 60
Slide 11
Slide 11 text
time
Slide 12
Slide 12 text
3 4 6 a
Slide 13
Slide 13 text
3 4 6 a a = 3; a = 4; a = 6; b = 10 * a; b = 10 * a; b = 10 * a;
Slide 14
Slide 14 text
b = 10 * a; b = 10 * a; b = 10 * a; updateB(a); updateB(a); updateB(a);
Slide 15
Slide 15 text
3 4 6 a Inconsistent Mutable State
Slide 16
Slide 16 text
Inconsistent undefined 30 40 60 State
Slide 17
Slide 17 text
undefined 30 40 60 30 60 40 Events State
Slide 18
Slide 18 text
undefined 30 40 60 30 60 40 b$ State Events
Slide 19
Slide 19 text
25 27 26 24 25 26 27 24 Age Birthdays
Slide 20
Slide 20 text
3 6 4 a$ 30 60 40 b$
Slide 21
Slide 21 text
map(a => 10 * a)
Slide 22
Slide 22 text
map(a => 10 * a) [3, 4, 6]_ [30, 40, 60]_
Slide 23
Slide 23 text
map(a => 10 * a)
Slide 24
Slide 24 text
a _ a$
Slide 25
Slide 25 text
var a$ = Observable.of(3, 4); var b$ = a$.map(a => 10 * a); b$.subscribe(b => { console.log(b); }); // 30 // 40
Slide 26
Slide 26 text
var a$ = Observable.of(3, 4); var b$ = a$.map(a => 10 * a); b$.subscribe(b => { console.log(b); }); // 30 // 40
Slide 27
Slide 27 text
var a$ = Observable.of(3, 4); var b$ = a$.map(a => 10 * a); b$.subscribe(b => { console.log(b); }); // 30 // 40
Slide 28
Slide 28 text
var a$ = Observable.of(3, 4); var b$ = a$.map(a => 10 * a); b$.subscribe(b => { console.log(b); }); // 30 // 40
Slide 29
Slide 29 text
var b$ = a$.map(a => 10 * a); All future values specified in the declaration
Slide 30
Slide 30 text
var b$ = a$.map(a => 10 * a); b$.set(60);
Slide 31
Slide 31 text
var a$ = Observable.of(3, 4); var b$ = a$.map(a => 10 * a); a$.set(6); b$.subscribe(b => { console.log(b); }); // 30 // 40
Slide 32
Slide 32 text
var a$ = Observable.of(3, 4, 6); var b$ = a$.map(a => 10 * a); b$.subscribe(b => { console.log(b); }); // 30 // 40 // 60
Slide 33
Slide 33 text
var a$ = Observable.of(3, 4, 6); var b$ = a$.map(a => 10 * a); var click$ = Observable .fromEvent(document, ‘click’);
Slide 34
Slide 34 text
var click$ = Observable .fromEvent(document, ‘click’); var a$ = click$ .scan((acc, ev) => acc + 1, 0); var b$ = a$.map(a => 10 * a);
Slide 35
Slide 35 text
var click$ = Observable .fromEvent(document, ‘click’); var a$ = click$ .scan((acc, ev) => acc + 1, 0); var b$ = a$.map(a => 10 * a);
Slide 36
Slide 36 text
var click$ = Observable .fromEvent(document, ‘click’); var a$ = click$ .scan((acc, ev) => acc + 1, 0); var b$ = a$.map(a => 10 * a); RxJS
Slide 37
Slide 37 text
map(a => 10 * a) 3 6 4 30 60 40
Slide 38
Slide 38 text
scan((acc, ev) => acc + ev, 0) 3 6 4 3 13 7
Slide 39
Slide 39 text
filter(a => a % 2 === 0) 3 6 4 6 4
Slide 40
Slide 40 text
3 6 4 6 4 3 delay
Slide 41
Slide 41 text
3 6 4 6 4 1 5 1 3 5 merge
Slide 42
Slide 42 text
A C B C2 B1 1 2 A1 B2 combineLatest
Slide 43
Slide 43 text
buffer catch combineLatest concat count debounce defaultIfEmpty delay distinctUntilChanged do elementAt every expand filter find first flatMap groupBy ignoreElements isEmpty last map max merge min multicast observeOn partition publish reduce refCount repeat retry sample scan share single skip skipUntil skipWhile startWith switch take takeUntil takeWhile throttle timeout window withLatestFrom zip
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
Reactive Programming Automatic updates
Slide 47
Slide 47 text
Separation of concerns
Slide 48
Slide 48 text
function andreStaltz() { showSlide1(); showSlide2(); showSlide3(); // ... showLastSlide(); for (var i = 0; i < audience.length; i++) { audience[i].goGetCoffee(); } }
Slide 49
Slide 49 text
var participant1 = { caffeineLevel: 0.05, goGetCoffee: function () { // ... } }
Slide 50
Slide 50 text
Speaker Participant Participant Participant goGetCoffee()
Slide 51
Slide 51 text
Speaker Participant Participant Participant goDoSomething()
Slide 52
Slide 52 text
Speaker Participant Participant Participant goDoSomething()
Slide 53
Slide 53 text
Speaker Participant Participant Participant goDoSomething()
Slide 54
Slide 54 text
Speaker Participant Participant Participant
Slide 55
Slide 55 text
var andreStaltz = { slide$: Observable.concat( slide1, slide2, slide3, // ... ) };
Slide 56
Slide 56 text
var andreStaltz = { slide$: Observable.concat( slide1, slide2, slide3, // ... ) }; slide$
Slide 57
Slide 57 text
var participant1 = { caffeineLevel$: speaker.slide$.last() .flatMap(() => this.goGetCoffee()) .scan(accumulationFormula, 0) };
Slide 58
Slide 58 text
The whole future declared in a var
Slide 59
Slide 59 text
speaker.slide$.last()