The whole future declared in a var

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.

C8dbe3c6d219999ee0ecce86a450d0e3?s=128

André Staltz

December 07, 2015
Tweet

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
  6. None
  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
  44. None
  45. None
  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()