Tweet
Tweet

Slide 1

Slide 1 text

3Y+43FBM8PSME +VO !OHKBQBO

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

5IFDVSSFOUEFWFMPQNFOU GPSUIF"OHVMBSBQQMJDBUJPO JOPVSDBTF

Slide 4

Slide 4 text

8FVTF3Y+4BMPU

Slide 5

Slide 5 text

5IFFWFOUESJWFO"OHVMBS+4

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

0OUIFPUIFSIBOE JO"OHVMBS

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

"SFZPVVTJOHtoPromise() UPPPGUFO

Slide 11

Slide 11 text

-FUTVTF3Y+4JOTUFBE

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

$PNNPOMBOHVBHFJTOFFEFE JOBSDIJUFDUVSF

Slide 15

Slide 15 text

4IPVMEXFVTF'MVY

Slide 16

Slide 16 text

-FUTVTF3Y+4CBTFE$234 JOTUFBE

Slide 17

Slide 17 text

$PNNBOE2VFSZ3FTQPOTJCJMJUZ4FHSFHBUJPO UI Command Query Database Read Write

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

AngularJS Directive GOD Service ! Server-side Server-side

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

&YBNQMFPGNVMUJQMF BTZODISPOPVTQSPDFTTJOH

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

HttpService ApiService Endpoint Cache Endpoint Map Authority Adapter HttpService Endpoint Authority w 8FIBWFUPIBOEMFUIFQSFTFODFPS BCTFODFPGBDDFTTBVUIPSJUZ w 5IFTUSFBNJTUFNQPSBSJMZCSBODIFEVTJOH partition()BOEBDDFTT
 BVUIPSJUZJTTUPSFE w "OEXFNFSHFBHBJO
 CZVTJOHmerge()

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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 => { // })

Slide 43

Slide 43 text

8IBUXFEPOPUSFDPNNFOE

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

6TJOHSFDLMFTT#FIBWJPS4VCKFDU new BehaviorSubject(null)

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

)PXUPMFBSO

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

$PEF(SJE IUUQTBQQDPEFHSJEOFU

Slide 53

Slide 53 text

)BWFBOJDF3Y+4 5IBOLZPVGPSZPVSBUUFOUJPO