RxJS Real World

3Y+43FBM8PSME +VO !OHKBQBO

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

5IFDVSSFOUEFWFMPQNFOU GPSUIF"OHVMBSBQQMJDBUJPO JOPVSDBTF

8FVTF3Y+4BMPU

5IFFWFOUESJWFO"OHVMBS+4

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

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

0OUIFPUIFSIBOE JO"OHVMBS

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

"SFZPVVTJOHtoPromise() UPPPGUFO

-FUTVTF3Y+4JOTUFBE

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

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

$PNNPOMBOHVBHFJTOFFEFE JOBSDIJUFDUVSF

4IPVMEXFVTF'MVY

-FUTVTF3Y+4CBTFE$234 JOTUFBE

$PNNBOE2VFSZ3FTQPOTJCJMJUZ4FHSFHBUJPO UI Command Query Database Read Write

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

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

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

AngularJS Directive GOD Service ! Server-side Server-side

GOD ng-controller !!! Server-side Server-side

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

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

&YBNQMFPGNVMUJQMF BTZODISPOPVTQSPDFTTJOH

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

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

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

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

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

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

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

Adapter "OUJDPSSVQUJPOMBZFS

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

Endpoint Endpoint Map w *OPSEFSUPLOPXBMMUIFFOEQPJOUT XFIBWFUPHFUUIFNBQQJOH JOBEWBODF w 8FXJMMQSPDFFEUPUIFOFYUQSPDFTTJOHCZVTJOHconcatMap() w "TZODISPOPVTMZDPNCJOFBSFRVFTUCPEZBOEUIFFOEQPJOU JOGPSNBUJPO

Endpoint Endpoint Map this.endpoint .endpoint$ .concatMap(ep => this.http.get(ep.url))

Authority w 8FIBWFUPIBOEMFUIFQSFTFODFPS BCTFODFPGBDDFTTBVUIPSJUZ w 5IFTUSFBNJTUFNQPSBSJMZCSBODIFEVTJOH partition()BOEBDDFTT  BVUIPSJUZJTTUPSFE w "OEXFNFSHFBHBJO  CZVTJOHmerge()

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})) )

Adapter w 5IFSFJTOPUZQFBOOPUBUJPOJOUIF SFTQPOTFGSPNUIFTFSWFS w "OEUIFQSPQFSUZOBNFNBZCFEJGpDVMUUP SFBE w 8FNBLFJUFBTZUPSFBECZQBTTJOHUIF BEBQUFSWJBconcatMap()

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) })

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

Adapter const cacheKey = inputModel.toCacheKey() if (this.cache.has(cacheKey)) { return this.allowed(this.cache.get(cacheKey)) } return this.wrapedHttp .get(inputModel) .concatMap(allowedOrDenied => { // })

8IBUXFEPOPUSFDPNNFOE

/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$ ) } }

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

6TJOHSFDLMFTT#FIBWJPS4VCKFDU new BehaviorSubject(null)

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

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

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

)PXUPMFBSO

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

$PEF(SJE IUUQTBQQDPEFHSJEOFU

)BWFBOJDF3Y+4 5IBOLZPVGPSZPVSBUUFOUJPO

RxJS Real World

RxJS Real World

More Decks by OKUNOKENTARO

Other Decks in Technology

Featured

Transcript