The whole future declared in a var

Reactive programming is a paradigm centered on one idea: to specify the dynamic behavior of a variable only at the declaration of that variable. The benefits of this are declarative programming and separation of concerns. In this talk we will explore Reactive programming in JavaScript.

This talk was given at dotJS 2015 in Paris.

Transcript

1. The whole future
 declared in a var @andrestaltz
2. var a = 3; var b = 10 * a; console.log(b); // 30 a = 4; console.log(b); // 30 b = 10 * a; console.log(b); // 40
3. var a = 3; var b = 10 * a; console.log(b); // 30 a = 4; console.log(b); // 30 b = 10 * a; console.log(b); // 40
4. var a = 3; var b = 10 * a; console.log(b); // 30 a = 4; console.log(b); // 30 b = 10 * a; console.log(b); // 40
5. var a = 3; var b = 10 * a; console.log(b); // 30 a = 4; console.log(b); // 30 b = 10 * a; console.log(b); // 40
7. 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
8. b 30 40 30
9. b 30 40 40
10. b 30 40 60
11. time
12. 3 4 6 a
13. 3 4 6 a a = 3; a = 4; a = 6; b = 10 * a; b = 10 * a; b = 10 * a;
14. b = 10 * a; b = 10 * a; b = 10 * a; updateB(a);
 updateB(a);
 updateB(a);
15. 3 4 6 a Inconsistent Mutable
 State
16. Inconsistent undefined 30 40 60 State
17. undefined 30 40 60 30 60 40 Events State
18. undefined 30 40 60 30 60 40 b$ State Events
19. 25 27 26 24 25 26 27 24 Age Birthdays
20. 3 6 4 a$ 30 60 40 b$
21. map(a => 10 * a)
22. map(a => 10 * a) [3, 4, 6]_ [30, 40, 60]_
23. map(a => 10 * a)
24. a _ a$
25. 
 var a$ = Observable.of(3, 4);
 var b$ = a$.map(a => 10 * a);
 
 b$.subscribe(b => {
 console.log(b);
 });
 // 30
 // 40

26. 
 var a$ = Observable.of(3, 4);
 var b$ = a$.map(a => 10 * a);
 
 b$.subscribe(b => {
 console.log(b);
 });
 // 30
 // 40

27. 
 var a$ = Observable.of(3, 4);
 var b$ = a$.map(a => 10 * a);
 
 b$.subscribe(b => {
 console.log(b);
 });
 // 30
 // 40

28. 
 var a$ = Observable.of(3, 4);
 var b$ = a$.map(a => 10 * a);
 
 b$.subscribe(b => {
 console.log(b);
 });
 // 30
 // 40

29. 
 
 var b$ = a$.map(a => 10 * a);
 
 
 
 
 
 
 All future values 
 specified in the
 declaration
30. 
 
 var b$ = a$.map(a => 10 * a);
 
 b$.set(60);
 
 
 
 

31. 
 var a$ = Observable.of(3, 4);
 var b$ = a$.map(a => 10 * a);
 a$.set(6);
 b$.subscribe(b => {
 console.log(b);
 });
 // 30
 // 40

32. 
 var a$ = Observable.of(3, 4, 6);
 var b$ = a$.map(a => 10 * a);
 
 b$.subscribe(b => {
 console.log(b);
 });
 // 30
 // 40
 // 60
33. 
 var a$ = Observable.of(3, 4, 6);
 var b$ = a$.map(a => 10 * a);
 
 
 
 
 
 
 var click$ = Observable
 .fromEvent(document, ‘click’);
 
 
 
 
 
 

34. 
 var click$ = Observable
 .fromEvent(document, ‘click’);
 var a$ = click$
 .scan((acc, ev) => acc + 1, 0);
 var b$ = a$.map(a => 10 * a);
 
 
 

35. 
 var click$ = Observable
 .fromEvent(document, ‘click’);
 var a$ = click$
 .scan((acc, ev) => acc + 1, 0);
 var b$ = a$.map(a => 10 * a);
 
 
 

36. 
 var click$ = Observable
 .fromEvent(document, ‘click’);
 var a$ = click$
 .scan((acc, ev) => acc + 1, 0);
 var b$ = a$.map(a => 10 * a);
 
 
 
 RxJS
37. map(a => 10 * a) 3 6 4 30 60 40
38. scan((acc, ev) => acc + ev, 0) 3 6 4 3 13 7
39. filter(a => a % 2 === 0) 3 6 4 6 4
40. 3 6 4 6 4 3 delay
41. 3 6 4 6 4 1 5 1 3 5 merge
42. A C B C2 B1 1 2 A1 B2 combineLatest
43. 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
46. Reactive
 Programming Automatic updates
47. Separation of concerns
48. function andreStaltz() { showSlide1(); showSlide2(); showSlide3(); // ... showLastSlide(); for (var i = 0; i < audience.length; i++) { audience[i].goGetCoffee(); }
 }
49. var participant1 = {
 caffeineLevel: 0.05, 
 goGetCoffee: function () {
 // ... }
 }
50. Speaker Participant Participant Participant goGetCoffee()
51. Speaker Participant Participant Participant goDoSomething()
52. Speaker Participant Participant Participant goDoSomething()
53. Speaker Participant Participant Participant goDoSomething()
54. Speaker Participant Participant Participant
55. var andreStaltz = { slide$: Observable.concat(
 slide1, slide2, slide3, // ... )
 };
56. var andreStaltz = { slide$: Observable.concat(
 slide1, slide2, slide3, // ... )
 }; slide$
57. var participant1 = {
 caffeineLevel$: speaker.slide$.last()
 .flatMap(() => this.goGetCoffee())
 .scan(accumulationFormula, 0) };
58. The whole future
 declared in a var
 

59. speaker.slide$.last()