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