Quantum Facades: Why NgRx Facades are terrible or awesome depending on how you observe them (AngularConnect 2019)

7beed3a6fa39e12c9e873b903e4d9244?s=47 Sam Julien
September 20, 2019

Quantum Facades: Why NgRx Facades are terrible or awesome depending on how you observe them (AngularConnect 2019)

NgRx facades are terrible! No wait, they're the best thing ever! What the heck is a facade, anyway? You may have heard recently about a topic whizzing around the Angular community: facades in NgRx. But are facades good or bad? Much like the age-old controversy of whether light is a particle or a wave, the answer depends on how you look at them. In this talk, you'll learn what facades are, why you should embrace them, why you should never, ever use them, and how to implement one without making Mike Ryan wake up in a cold sweat somewhere in Alabama.

7beed3a6fa39e12c9e873b903e4d9244?s=128

Sam Julien

September 20, 2019
Tweet

Transcript

  1. 9.

    Sam Julien @samjulien Developer Advocate Engineer at Auth0 GDE &

    Angular Collaborator UpgradingAngularJS.com @samjulien
  2. 10.

    Sam Julien @samjulien Developer Advocate Engineer at Auth0 GDE &

    Angular Collaborator UpgradingAngularJS.com @samjulien Author at Thinkster.io
  3. 34.

    @samjulien class Client { doSomething() { this.serviceA.getStuff(); this.serviceB.getStuff(); this.serviceD.getMore(); }⠀

    }⠀ class OtherClient { doSomething() { this.serviceA.getStuff(); this.serviceB.getStuff(); this.serviceD.getMore(); }⠀ }⠀
  4. 35.

    @samjulien class Client { doSomething() { this.serviceA.getStuff(); this.serviceB.getStuff(); this.serviceD.getMore(); }⠀

    }⠀ class OtherClient { doSomething() { this.serviceA.getStuff(); this.serviceB.getStuff(); this.serviceD.getMore(); }⠀ }⠀
  5. 36.

    @samjulien class Client { doSomething() { this.serviceA.getStuff(); this.serviceB.getStuff(); this.serviceE.update(); }

    } class OtherClient { doSomething() { this.serviceA.getStuff(); this.serviceB.getStuff(); this.serviceD.getMore(); } }
  6. 37.

    @samjulien class Client { doSomething() { this.serviceA.getStuff(); this.serviceB.getStuff(); this.serviceE.update(); }

    } class OtherClient { doSomething() { this.serviceA.getStuff(); this.serviceB.getStuff(); this.serviceE.update(); } }
  7. 38.

    @samjulien class Client { doSomething() { this.serviceA.getStuff(); this.serviceB.getStuff(); this.serviceE.update(); }⠀

    }⠀ class OtherClient { doSomething() { this.serviceA.getStuff(); this.serviceB.getStuff(); this.serviceE.update(); }⠀ }⠀
  8. 39.

    @samjulien class Client { doSomething() { this.serviceA.getStuff(); this.serviceB.getStuff(); this.serviceE.update(); }⠀

    }⠀ class OtherClient { doSomething() { this.serviceA.getStuff(); this.serviceB.getStuff(); this.serviceE.update(); }⠀ }⠀ class OtherOtherClient { doSomething() { this.serviceA.getStuff(); this.serviceB.getStuff(); this.serviceE.update(); }⠀ }⠀
  9. 54.

    @samjulien class Client { doSomething() { this.facade.getEverything(); }⠀ }⠀ class

    OtherClient { doSomething() { this.facade.getEverything(); }⠀ }⠀
  10. 64.

    @samjulien [Magnets] Cool Magnets [Beam One] Start Beam One [Collider]

    Find Higgs Boson?? [Beam Two] Start Beam Two
  11. 65.

    @samjulien [Magnets] Cool Magnets [Beam One] Start Beam One [Collider]

    Find Higgs Boson?? [Beam Two] Start Beam Two
  12. 71.

    @samjulien @Component({...}) export class BeamOneComponent { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } }
  13. 72.

    @samjulien @Component({...}) export class BeamOneComponent { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } }
  14. 73.

    @samjulien @Component({...}) export class BeamOneComponent { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } }
  15. 74.

    @samjulien @Component({...}) export class BeamOneComponent { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } }
  16. 75.

    @samjulien @Component({...}) export class BeamOneComponent { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } }
  17. 76.

    @samjulien @Component({...}) export class BeamOneComponent { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } }
  18. 77.

    @samjulien @Component({...}) export class BeamOneComponent { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } }
  19. 78.

    @samjulien @Component({...}) export class BeamOneComponent { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } } ☹
  20. 82.

    @samjulien @Component({...}) export class BeamOneComponent { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } }
  21. 83.

    @samjulien @Injectable({...}) export class BeamOneFacade { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } }
  22. 84.

    @samjulien @Injectable({...}) export class BeamOneFacade { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } }
  23. 85.

    @samjulien @Injectable({...}) export class BeamOneFacade { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } }
  24. 86.

    @samjulien @Injectable({...}) export class BeamOneFacade { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } }
  25. 87.

    @samjulien @Injectable({...}) export class BeamOneFacade { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } }
  26. 88.

    @samjulien @Component({...}) export class BeamOneComponent { beamOneStatus$: Observable<BeamStatus>; constructor(private facade:

    BeamOneFacade) { this.beamOneStatus$ = this.facade.beamOneStatus$; } turnOn() { this.facade.turnOn(); } }
  27. 89.

    @samjulien @Component({...}) export class BeamOneComponent { beamOneStatus$: Observable<BeamStatus>; constructor(private facade:

    BeamOneFacade) { this.beamOneStatus$ = this.facade.beamOneStatus$; } turnOn() { this.facade.turnOn(); } }
  28. 90.

    @samjulien @Component({...}) export class BeamOneComponent { beamOneStatus$: Observable<BeamStatus>; constructor(private facade:

    BeamOneFacade) { this.beamOneStatus$ = this.facade.beamOneStatus$; } turnOn() { this.facade.turnOn(); } }
  29. 91.

    @samjulien @Component({...}) export class BeamOneComponent { beamOneStatus$: Observable<BeamStatus>; constructor(private facade:

    BeamOneFacade) { this.beamOneStatus$ = this.facade.beamOneStatus$; } turnOn() { this.facade.turnOn(); } }
  30. 92.

    @samjulien @Injectable({...}) export class BeamOneFacade { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } }
  31. 93.

    @samjulien @Injectable({...}) export class BeamOneFacade { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOneAndMagnet); } }
  32. 100.

    @samjulien class Client { doSomething() { this.facade.getEverything(); }⠀ }⠀ class

    OtherClient { doSomething() { this.facade.getEverything(); }⠀ }⠀
  33. 101.
  34. 102.

    @samjulien [Magnets] Cool Magnets [Beam One] Start Beam One [Collider]

    Find Higgs Boson?? [Beam Two] Start Beam Two
  35. 103.

    @samjulien [Magnets] Cool Magnets [Beam One] Start Beam One [Collider]

    Find Higgs Boson?? [Beam Two] Start Beam Two
  36. 104.

    @samjulien [Magnets] Cool Magnets [Beam One] Start Beam One [Collider]

    Find Higgs Boson?? [Beam Two] Start Beam Two
  37. 105.

    @samjulien @Component({...}) export class ColliderComponent { beamOneStatus$: Observable<BeamStatus>; beamTwoStatus$: Observable<BeamStatus>;

    constructor( private beamOneFacade: BeamOneFacade, private beamTwoFacade: BeamTwoFacade ) { this.beamOneStatus$ = this.beamOneFacade.beamOneStatus$; this.beamTwoStatus$ = this.beamTwoFacade.beamTwoStatus$; } }
  38. 106.

    @samjulien @Component({...}) export class ColliderComponent { beamOneStatus$: Observable<BeamStatus>; beamTwoStatus$: Observable<BeamStatus>;

    constructor( private beamOneFacade: BeamOneFacade, private beamTwoFacade: BeamTwoFacade ) { this.beamOneStatus$ = this.beamOneFacade.beamOneStatus$; this.beamTwoStatus$ = this.beamTwoFacade.beamTwoStatus$; } }
  39. 107.

    @samjulien @Component({...}) export class ColliderComponent { beamOneStatus$: Observable<BeamStatus>; beamTwoStatus$: Observable<BeamStatus>;

    constructor( private beamOneFacade: BeamOneFacade, private beamTwoFacade: BeamTwoFacade ) { this.beamOneStatus$ = this.beamOneFacade.beamOneStatus$; this.beamTwoStatus$ = this.beamTwoFacade.beamTwoStatus$; } }
  40. 109.

    @samjulien @Component({...}) export class ColliderComponent { beamOneStatus$: Observable<BeamStatus>; beamTwoStatus$: Observable<BeamStatus>;

    constructor( private beamOneFacade: BeamOneFacade, private beamTwoFacade: BeamTwoFacade ) { this.beamOneStatus$ = this.beamOneFacade.beamOneStatus$; this.beamTwoStatus$ = this.beamTwoFacade.beamTwoStatus$; }⠀ }⠀
  41. 111.

    @samjulien private beamTwoFacade: BeamTwoFacade ) { this.beamOneStatus$ = this.beamOneFacade this.beamTwoStatus$

    = this.beamTwoFacade }⠀ turnOnBeams() { this.beamOneFacade.turnOn(); this.beamTwoFacade.turnOn(); }⠀ }⠀
  42. 112.

    @samjulien @Component({...}) export class ColliderComponent { beamOneStatus$: Observable<BeamStatus>; beamTwoStatus$: Observable<BeamStatus>;

    constructor( private beamOneFacade: BeamOneFacade, private beamTwoFacade: BeamTwoFacade ) { this.beamOneStatus$ = this.beamOneFacade.beamOneStatus$; this.beamTwoStatus$ = this.beamTwoFacade.beamTwoStatus$; }⠀ turnOnBeams() { this.beamOneFacade.turnOn(); this.beamTwoFacade.turnOn(); }⠀ }⠀
  43. 115.
  44. 116.
  45. 132.

    @samjulien @Injectable({...}) export class BeamOneFacade { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } }
  46. 133.

    @samjulien @Injectable({...}) export class BeamOneFacade { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } turnOn() { this.store.dispatch(BeamOneActionTypes.startBeamOne); } }
  47. 134.

    @samjulien @Injectable({...}) export class BeamOneFacade { beamOneStatus$: Observable<BeamStatus>; constructor(private store:

    Store<State>) { this.beamOneStatus$ = this.store.select(selectBeamOneStatus); } dispatch(action: Action) { this.store.dispatch(action); } }
  48. 135.
  49. 136.
  50. 140.

    @samjulien @Component({...}) export class ColliderComponent { beamOneStatus$: Observable<BeamStatus>; beamTwoStatus$: Observable<BeamStatus>;

    constructor( private beamOneFacade: BeamOneFacade, private beamTwoFacade: BeamTwoFacade ) { this.beamOneStatus$ = this.beamOneFacade.beamOneStatus$; this.beamTwoStatus$ = this.beamTwoFacade.beamOneStatus$; } }
  51. 141.

    @samjulien @Component({...}) export class ColliderComponent { beamOneStatus$: Observable<BeamStatus>; beamTwoStatus$: Observable<BeamStatus>;

    constructor( private beamOneFacade: BeamOneFacade, private beamTwoFacade: BeamTwoFacade ) { this.beamOneStatus$ = this.beamOneFacade.beamOneStatus$; this.beamTwoStatus$ = this.beamTwoFacade.beamOneStatus$; } }
  52. 143.

    @samjulien @Component({...}) export class ColliderComponent { beamOneStatus$: Observable<BeamStatus>; beamTwoStatus$: Observable<BeamStatus>;

    constructor( private beamOneFacade: BeamOneFacade, private beamTwoFacade: BeamTwoFacade ) { this.beamOneStatus$ = this.beamOneFacade.beamOneStatus$; this.beamTwoStatus$ = this.beamTwoFacade.beamOneStatus$; }⠀ }⠀
  53. 144.

    @samjulien constructor( private beamOneFacade: BeamOneFacade, private beamTwoFacade: BeamTwoFacade ) {

    this.beamOneStatus$ = this.beamOneFacade.beamOneStatus$; this.beamTwoStatus$ = this.beamTwoFacade.beamOneStatus$; }⠀ ⠀
  54. 145.

    @samjulien constructor( private beamOneFacade: BeamOneFacade, private beamTwoFacade: BeamTwoFacade ) {

    this.beamOneStatus$ = this.beamOneFacade.beamOneStatus$; this.beamTwoStatus$ = this.beamTwoFacade.beamOneStatus$; this.bothBeams$ = combineLatest( this.beamOneStatus$, this.beamTwoStatus$ ).pipe( map(([beamOne, beamTwo]) => beamOne && beamTwo) ); }
  55. 146.

    @samjulien constructor( private beamOneFacade: BeamOneFacade, private beamTwoFacade: BeamTwoFacade ) {

    this.beamOneStatus$ = this.beamOneFacade.beamOneStatus$; this.beamTwoStatus$ = this.beamTwoFacade.beamOneStatus$; this.bothBeams$ = combineLatest( this.beamOneStatus$, this.beamTwoStatus$ ).pipe( map(([beamOne, beamTwo]) => beamOne && beamTwo) ); }
  56. 160.

    @samjulien @Injectable({...}) export class ColliderFacade { combinedStatus$: Observable<CombinedStatus>; constructor(private store:

    Store<State>) { this.combinedStatus$ = this.store.select(selectCombinedStatus); }⠀ dispatch(action: Action) { this.store.dispatch(action); }⠀ }⠀
  57. 161.

    @samjulien @Injectable({...}) export class ColliderFacade { combinedStatus$: Observable<CombinedStatus>; constructor(private store:

    Store<State>) { this.combinedStatus$ = this.store.select(selectCombinedStatus); }⠀ dispatch(action: Action) { this.store.dispatch(action); }⠀ }⠀
  58. 162.

    @samjulien @Injectable({...}) export class ColliderFacade { combinedStatus$: Observable<CombinedStatus>; constructor(private store:

    Store<State>) { this.combinedStatus$ = this.store.select(selectCombinedStatus); }⠀ dispatch(action: Action) { this.store.dispatch(action); }⠀ }⠀
  59. 163.

    @samjulien @Injectable({...}) export class ColliderFacade { combinedStatus$: Observable<CombinedStatus>; constructor(private store:

    Store<State>) { this.combinedStatus$ = this.store.select(selectCombinedStatus); }⠀ dispatch(action: Action) { this.store.dispatch(action); }⠀ }⠀
  60. 164.

    @samjulien @Injectable({...}) export class ColliderFacade { combinedStatus$: Observable<CombinedStatus>; magnetStatus$: Observable<MagnetStatus>;

    constructor(private store: Store<State>) { this.combinedStatus$ = this.store.select(selectCombinedStatus); this.magnetStatus$ = this.store.select(selectMagnetStatus); }⠀ dispatch(action: Action) { this.store.dispatch(action); }⠀ }⠀
  61. 165.

    @samjulien @Injectable({...}) export class ColliderFacade { combinedStatus$: Observable<CombinedStatus>; constructor(private store:

    Store<State>) { this.combinedStatus$ = this.store.select(selectCombinedStatus); }⠀ dispatch(action: Action) { this.store.dispatch(action); }⠀ }⠀
  62. 166.

    @samjulien @Injectable({...}) export class ColliderFacade { combinedStatus$: Observable<CombinedStatus>; constructor(private store:

    Store<State>) { this.combinedStatus$ = this.store.select(selectCombinedStatus); }⠀ dispatch(action: Action) { this.store.dispatch(action); }⠀ }⠀
  63. 167.

    @samjulien @Component({...}) export class ColliderComponent { combinedStatus$: Observable<CombinedStatus>; constructor(private colliderFacade:

    ColliderFacade) { this.combinedStatus$ = this.colliderFacade.combinedStatus$; } turnOnBeams() { this.colliderFacade.dispatch(ColliderActionTypes.turnBeamsOn); } }
  64. 168.

    @samjulien @Component({...}) export class ColliderComponent { combinedStatus$: Observable<CombinedStatus>; constructor(private colliderFacade:

    ColliderFacade) { this.combinedStatus$ = this.colliderFacade.combinedStatus$; } turnOnBeams() { this.colliderFacade.dispatch(ColliderActionTypes.turnBeamsOn); } }
  65. 169.

    @samjulien @Component({...}) export class ColliderComponent { combinedStatus$: Observable<CombinedStatus>; constructor(private colliderFacade:

    ColliderFacade) { this.combinedStatus$ = this.colliderFacade.combinedStatus$; } turnOnBeams() { this.colliderFacade.dispatch(ColliderActionTypes.turnBeamsOn); } }
  66. 170.

    @samjulien @Component({...}) export class ColliderComponent { combinedStatus$: Observable<CombinedStatus>; constructor(private colliderFacade:

    ColliderFacade) { this.combinedStatus$ = this.colliderFacade.combinedStatus$; } turnOnBeams() { this.colliderFacade.dispatch(ColliderActionTypes.turnBeamsOn); } }
  67. 171.
  68. 172.
  69. 184.
  70. 185.
  71. 186.
  72. 189.