RxJS Real World

2017/6/17 ng-japan 2017で発表した資料です。

Transcript

1. 3Y+43FBM8PSME
   +VO !OHKBQBO
   

   View Slide

2. 0,6/0,&/5"30
   'SPOUFOE&OHJOFFS
   1JYFM(SJE*OD
   5IFSFQSFTFOUBUJWFPGOHLZPUP
   

   View Slide

3. 5IFDVSSFOUEFWFMPQNFOU
   GPSUIF"OHVMBSBQQMJDBUJPO
   JOPVSDBTF
   

   View Slide

4. 8FVTF3Y+4BMPU
   

   View Slide

5. 5IFFWFOUESJWFO"OHVMBS+4
   

   View Slide

6. 5IFFWFOUESJWFO"OHVMBS+4
   • $scope.$emit()
   • $rootScope.$broadcast()
   • $scope.$on()
   

   View Slide

7. 5IFFWFOUESJWFO"OHVMBS+4
   • $scope.$emit('eventName', value)
   • $rootScope.$broadcast()
   • $scope.$on()
   
   

   View Slide

8. 0OUIFPUIFSIBOE JO"OHVMBS
   

   View Slide

9. 5IFFWFOUESJWFO"OHVMBS
   w @Output()
   w &NJUCBTFEWBMVFFYDIBOHF
   w "1*BTTVNJOHBTUSFBN
   w @angular/http, @angular/router
   

   View Slide

10. "SFZPVVTJOHtoPromise()
    UPPPGUFO
    

    View Slide

11. -FUTVTF3Y+4JOTUFBE
    

    View Slide

12. 0VSBQQMJDBUJPO
    w /VNCFSPG$PNQPOFOU
    w 0WFS
    w /VNCFSPG4FSWJDF
    w 0WFS
    w 4UJMMJODSFBTJOH
    

    View Slide

13. 0VSUFBN
    w 'SPOUFOE&OHJOFFST
    w QFPQMF%FTJHOFS
    w 4JNVMUBOFPVTEFWFMPQNFOUFWFSZEBZ
    w 1BSBMMFMEFWFMPQNFOUPGNVMUJQMFTDSFFOT
    

    View Slide

14. $PNNPOMBOHVBHFJTOFFEFE
    JOBSDIJUFDUVSF
    

    View Slide

15. 4IPVMEXFVTF'MVY
    

    View Slide

16. -FUTVTF3Y+4CBTFE$234
    JOTUFBE
    

    View Slide

17. $PNNBOE2VFSZ3FTQPOTJCJMJUZ4FHSFHBUJPO
    UI
    Command Query
    Database
    Read
    Write
    

    View Slide

18. $PNNBOE2VFSZ3FTQPOTJCJMJUZ4FHSFHBUJPO
    w .BJOMZQSPQPTFEGPSTFSWFSTJEF
    w 8FBEPQUFEJUUPDPOGSPOUDPNQMFYJUZ
    w 5IFSFBTPOGPSNBLJOHUIJTEFDJTJPOJTUIBU
    XFBSFQSBDUJDJOH%%%
    

    View Slide

19. $234JO'SPOUFOE
    w 0OFTDSFFO0OF$PNNBOET2VFSJFT
    w :PVDBOTFFBMMUIBUZPVDBOEPPOUIBU
    TDSFFOCZMPPLJOHBUUIF$PNNBOET
    w *GZPVMPPLBUUIF2VFSJFT ZPVDBOTFFBMM
    UIFOFDFTTBSZWBMVFTGPSUIBUTDSFFO
    

    View Slide

20. Angular @Component
    Commands Service
    Queries Service
    Repository Service
    Server-side
    

    View Slide

21. AngularJS Directive
    GOD Service !
    Server-side
    Server-side
    

    View Slide

22. GOD ng-controller !!!
    Server-side
    Server-side
    

    View Slide

23. Angular @Component
    Commands Service
    Queries Service
    Repository Service
    Server-side
    %JWJTJPOUPMPHJDBMMZDPOWFZUIFJOUFOUJPO
    

    View Slide

24. Angular @Component
    Commands Service
    Queries Service
    Repository Service
    Server-side
    &WFSZUIJOHJTBTZODISPOPVTTUSFBN
    Sync call
    Sync call
    Sync request and async response
    Async stream
    Async stream
    

    View Slide

25. &YBNQMFPGNVMUJQMF
    BTZODISPOPVTQSPDFTTJOH
    

    View Slide

26. &YBNQMFPGGFUDIJOHVTFST
    Component Endpoint
    fetchUsers()
    .then(users => {})
    8JUIPVU3Y+4
    

    View Slide

27. &YBNQMFPGGFUDIJOHVTFST
    8JUI$2343Y+4
    fetchUsers()
    fetchUsers()
    api.get() http.get()
    subscribe()
    subject.next()
    users$()
    Component Repository
    Queries
    Commands
    Endpoint
    ApiService
    

    View Slide

28. 'PDVTPO"QJ4FSWJDF
    Component Repository
    Queries
    Commands
    Endpoint
    ApiService Endpoint
    ApiService
    

    View Slide

29. HttpService
    ApiService Endpoint
    Cache
    Endpoint
    Map
    Authority
    Adapter
    'PDVTPO"QJ4FSWJDF
    

    View Slide

30. "MNPTUFWFSZUIJOHJTBTZOD
    HttpService
    ApiService Endpoint
    Cache
    Endpoint
    Map
    Authority
    Adapter
    5IJTJTUIFPOMZTZOD
    

    View Slide

31. HttpService
    ApiService Endpoint
    Cache
    Endpoint
    Map
    Authority
    Adapter
    HttpService
    ApiService Endpoint
    Endpoint
    Map
    .VMUJQMFTUSFBNT
    

    View Slide

32. HttpService
    ApiService Endpoint
    Cache
    Endpoint
    Map
    Authority
    Adapter
    HttpService Endpoint
    Authority
    1BSUJUJPOBOENFSHF
    

    View Slide

33. HttpService
    ApiService Endpoint
    Cache
    Endpoint
    Map
    Authority
    Adapter
    HttpService
    ApiService
    Adapter
    "OUJDPSSVQUJPOMBZFS
    

    View Slide

34. HttpService
    ApiService Endpoint
    Cache
    Endpoint
    Map
    Authority
    Adapter
    ApiService
    Cache
    'FUDIPSDBDIF
    

    View Slide

35. HttpService
    ApiService Endpoint
    Cache
    Endpoint
    Map
    Authority
    Adapter
    HttpService
    ApiService Endpoint
    Endpoint
    Map
    w *OPSEFSUPLOPXBMMUIFFOEQPJOUT XFIBWFUPHFUUIFNBQQJOH
    JOBEWBODF
    w 8FXJMMQSPDFFEUPUIFOFYUQSPDFTTJOHCZVTJOHconcatMap()
    w "TZODISPOPVTMZDPNCJOFBSFRVFTUCPEZBOEUIFFOEQPJOU
    JOGPSNBUJPO
    

    View Slide

36. HttpService
    ApiService Endpoint
    Cache
    Endpoint
    Map
    Authority
    Adapter
    HttpService
    ApiService Endpoint
    Endpoint
    Map
    this.endpoint
    .endpoint$
    .concatMap(ep => this.http.get(ep.url))
    

    View Slide

37. HttpService
    ApiService Endpoint
    Cache
    Endpoint
    Map
    Authority
    Adapter
    HttpService Endpoint
    Authority
    w 8FIBWFUPIBOEMFUIFQSFTFODFPS
    BCTFODFPGBDDFTTBVUIPSJUZ
    w 5IFTUSFBNJTUFNQPSBSJMZCSBODIFEVTJOH
    partition()BOEBDDFTT

    BVUIPSJUZJTTUPSFE
    w "OEXFNFSHFBHBJO

    CZVTJOHmerge()
    

    View Slide

38. HttpService
    ApiService Endpoint
    Cache
    Endpoint
    Map
    Authority
    Adapter
    HttpService Endpoint
    Authority
    const streams = somethingStream$
    .partition(authority => authority.isAllowed)
    const [allowed$, denied$] = streams
    return Observable.merge(
    allowed$
    .map(res => ({isAllowed: true, data: res})),
    denied$
    .map(authority => ({isAllowed: false, data: autority}))
    )
    

    View Slide

39. HttpService
    ApiService Endpoint
    Cache
    Endpoint
    Map
    Authority
    Adapter
    HttpService
    ApiService
    Adapter
    w 5IFSFJTOPUZQFBOOPUBUJPOJOUIF
    SFTQPOTFGSPNUIFTFSWFS
    w "OEUIFQSPQFSUZOBNFNBZCFEJGpDVMUUP
    SFBE
    w 8FNBLFJUFBTZUPSFBECZQBTTJOHUIF
    BEBQUFSWJBconcatMap()
    

    View Slide

40. HttpService
    ApiService Endpoint
    Cache
    Endpoint
    Map
    Authority
    Adapter
    HttpService
    ApiService
    Adapter
    this.wrapedHttp
    .get(inputModel)
    .concatMap(allowedOrDenied => {
    if (isFailure(allowedOrDenied)) {
    return this.denied()
    }
    const adaptedResponse
    = this.adapt(allowedOrDenied.data.json())
    this.cache.set(cacheKey, adaptedResponse)
    return this.allowed(adaptedResponse)
    })
    

    View Slide

41. HttpService
    ApiService Endpoint
    Cache
    Endpoint
    Map
    Authority
    Adapter
    ApiService
    Cache
    w 8FBSFQSPDFTTJOHFGpDJFOUSFRVFTUTVTJOHDBDIF
    w 5IFTFSWJDFTZODISPOPVTMZSFUVSOTUIFDBDIFJGJUFYJTUT
    w 8FVTFObservable.of()UPUSFBUTZODISPOPVTWBMVFT
    BTTUSFBNT
    

    View Slide

42. HttpService
    ApiService Endpoint
    Cache
    Endpoint
    Map
    Authority
    Adapter
    HttpService
    ApiService
    Adapter
    const cacheKey = inputModel.toCacheKey()
    if (this.cache.has(cacheKey)) {
    return this.allowed(this.cache.get(cacheKey))
    }
    return this.wrapedHttp
    .get(inputModel)
    .concatMap(allowedOrDenied => {
    //
    })
    

    View Slide

43. 8IBUXFEPOPUSFDPNNFOE
    

    View Slide

44. /FTUFEDPNCJOF-BUFTU
    class SomeQueriesService {
    get methodB$(): Observable<[...]> {
    return Observable.combineLatest(
    this.methodA$,
    this.otherRepository.someModels$
    )
    }
    get methodA$(): Observable<[...]> {
    return Observable.combineLatest(
    this.repository.entities$,
    this.config.config$
    )
    }
    }
    
    

    View Slide

45. class SomeQueriesService {
    get methodC$(): Observable<[...]> {
    return Observable.combineLatest(
    this.methodB$,
    this.greatRepository.niceValues$
    )
    }
    get methodB$(): Observable<[...]> {
    return Observable.combineLatest(
    this.methodA$,
    this.otherRepository.someModels$
    )
    }
    get methodA$(): Observable<[...]> {
    return Observable.combineLatest(
    this.repository.entities$,
    this.config.config$
    )
    }
    }
    
    /FTUFEDPNCJOF-BUFTUCFDPNFTWFSZDPNQMJDBUFE
    ,*44,FFQJUTIPSUBOETJNQMF
    

    View Slide

46. 6TJOHSFDLMFTT#FIBWJPS4VCKFDU
    new BehaviorSubject(null)
    
    
    

    View Slide

47. 6TJOHSFDLMFTT#FIBWJPS4VCKFDU
    new BehaviorSubject(null)
    new ReplaySubject(1)
    
    

    View Slide

48. *UXJMMUSZUPVTFUP1SPNJTFJNNFEJBUFMZ
    someStream$
    .take(1)
    .toPromise()
    .then(...)
    
    

    View Slide

49. *UXJMMUSZUPVTFUP1SPNJTFJNNFEJBUFMZ
    const subscription = someStream$
    .take(1)
    .subscribe(...)
    .BJOUBJOUIFTUSFBNBTNVDIBTQPTTJCMF
    CFDBVTF3Y+4JTBDPNNPOMBOHVBHFPGBTZODISPOPVTQSPDFTTJOH
    .FNPSZMFBLTBSFBWPJEFEXJUISubscription.unsubscribe()
    

    View Slide

50. )PXUPMFBSO
    

    View Slide

51. 4VHHFTUFETJUFT
    w 3Y+40GpDJBM
    w IUUQSFBDUJWFYJPSYKT
    w -FBSO3Y+4
    w IUUQTXXXMFBSOSYKTJP
    

    View Slide

52. $PEF(SJE
    
    IUUQTBQQDPEFHSJEOFU
    

    View Slide

53. )BWFBOJDF3Y+4
    5IBOLZPVGPSZPVSBUUFOUJPO
    

    View Slide