Слайд 2
![Service Component UI Logic Data Logic Business Logic Model [ ]](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-1.jpg)
Service
Component
UI Logic
Data Logic
Business Logic
Model [ ]
Слайд 3
![Service Component UI Logic Data Logic Business Logic Component Fabric](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-2.jpg)
Service
Component
UI Logic
Data Logic
Business Logic
Component Fabric Service
Model [ ]
Component for fabric
UI Logic
Слайд 4
![Service Component UI Logic Business Logic Component Fabric Service DAL](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-3.jpg)
Service
Component
UI Logic
Business Logic
Component Fabric Service
DAL
WebRTC
Web
Socket
HTTP
Data Logic
Model [ ]
Component for fabric
UI Logic
Слайд 5
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-4.jpg)
Слайд 6
![Component UI Logic Component Fabric Service Component for fabric UI](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-5.jpg)
Component
UI Logic
Component Fabric Service
Component for fabric
UI Logic
DAL
Data Logic
Store
reducer
State
Action
Model [ ]
Service
Business Logic
Слайд 7
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-6.jpg)
Слайд 8
![Service Component UI Logic Business Logic Component Fabric Service Component](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-7.jpg)
Service
Component
UI Logic
Business Logic
Component Fabric Service
Component for fabric
UI Logic
DAL
Data Logic
Store
reducer
State
Action
Model [ ]
Selector
Model
View
Model
Слайд 9
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-8.jpg)
Слайд 10
![Service Component UI Logic Business Logic Component Fabric Service Component](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-9.jpg)
Service
Component
UI Logic
Business Logic
Component Fabric Service
Component for fabric
UI Logic
DAL
Data Logic
Store
State
reducer
Action
Model [ ]
Selector
Model
View
Слайд 11
![](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-10.jpg)
Слайд 12
![Component UI Logic Component Fabric Service Component for fabric UI](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-11.jpg)
Component
UI Logic
Component Fabric Service
Component for fabric
UI Logic
DAL
Data Logic
Store
State
reducer
Action
Model [ ]
Selector
Model
View Model
Effects
@ngrx
Слайд 13
![Angular Detection Strategy Default OnPush Redux Selector State changes === reference value](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-12.jpg)
Angular Detection Strategy
Default
OnPush
Redux
Selector
State
changes
===
reference
value
Слайд 14
![UI / Service select REDUX Local State focus hover position](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-13.jpg)
UI / Service
select
REDUX
Local State
focus
hover
position
users
Models
todos
cars
posts
App State
Server
…
…
Слайд 15
![UI / Service select REDUX Local State focus hover position](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-14.jpg)
UI / Service
select
REDUX
Local State
focus
hover
position
…
users
Models
todos
cars
posts
…
App State
Server
users
todos
cars
posts
select
position
Слайд 16
![App State user select](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-15.jpg)
Слайд 17
![App State Dictionary key value select user id ui state / local state](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-16.jpg)
App State
Dictionary
key
value
select
user id
ui state / local state
Слайд 18
![App State Dictionary key value Dictionary key value select component](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-17.jpg)
App State
Dictionary
key
value
Dictionary
key
value
select
component prefix
user id
ui state / local state
Component
Component
Component
select
select
select
Слайд 19
![App State user Dictionary key value select component prefix](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-18.jpg)
App State
user
Dictionary
key
value
select
component prefix
Слайд 20
![App State users user[] id name info user user … user status[] status caption id](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-19.jpg)
App State
users
user[]
id
name
info
user
user
…
user
status[]
status
caption
id
Слайд 21
![App State Dictionary key value select component prefix users user[]](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-20.jpg)
App State
Dictionary
key
value
select
component prefix
users
user[]
info
user
user
…
user
status[]
status
caption
id
Слайд 22
![App State Dictionary key value Dictionary key value select component](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-21.jpg)
App State
Dictionary
key
value
Dictionary
key
value
select
component prefix
user id
users
user[]
info
user
user
…
user
status[]
status
caption
id
Слайд 23
![App State Dictionary key value select component prefix users user[]](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-22.jpg)
App State
Dictionary
key
value
select
component prefix
users
user[]
info
user
user
…
user
status[]
status
caption
id
Слайд 24
![Action State Selectors Component Service user user user](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-23.jpg)
Action
State
Selectors
Component
Service
user
user
user
Слайд 25
![user rendering calculation performance side effects](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-24.jpg)
user
rendering
calculation
performance
side effects
Слайд 26
![App State Dictionary key value select component prefix users user[]](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-25.jpg)
App State
Dictionary
key
value
select
component prefix
users
user[]
info
user
user
…
user
status[]
status
caption
id
Слайд 27
![user](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-26.jpg)
Слайд 28
![Action State Selectors Component Service user select](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-27.jpg)
Action
State
Selectors
Component
Service
user
select
Слайд 29
![Action State Selectors Component Service user select](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-28.jpg)
Action
State
Selectors
Component
Service
user
select
Слайд 30
![Reference Object Tree Update Action](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-29.jpg)
Reference
Object Tree
Update Action
Слайд 31
![Object Tree USER id name info status select](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/54570/slide-30.jpg)
Object Tree
USER
id
name
info
status
select