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