Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RxJS Real World

RxJS Real World

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

OKUNOKENTARO

June 17, 2017
Tweet

More Decks by OKUNOKENTARO

Other Decks in Technology

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