Component. UI Logic. Data Logic. Business. Logic. Model

1.

Component
UI Logic
Data Logic
Business
Logic
Model [ ]

2.

Component
UI Logic
Service
Data Logic
Business
Logic
Model [ ]

3.

Component
for fabric
UI Logic
Component
UI Logic
Service
Data Logic
Business
Logic
Model [ ]
Component
Fabric Service

4.

WebRTC
Web
Socket
DAL
Data Logic
Component
UI Logic
Service
Business
Logic
Model [ ]
HTTP
Component
for fabric
UI Logic
Component
Fabric Service

5.

6.

Store
DAL
Data Logic
Action
reducer
State
Model [ ]
Component
for fabric
UI Logic
Component
UI Logic
Service
Business
Logic
Component
Fabric Service

7.

8.

Store
DAL
Action
reducer
Data Logic
State
Selector
Model [ ]
Model
View
Model
Component
for fabric
UI Logic
Component
UI Logic
Service
Business
Logic
Component
Fabric Service

9.

10.

Store
@ngrx
Effects
DAL
Data Logic
Action
reducer
State
Selector
Component
UI Logic
Model [ ]
Model
View
Model
Component
for fabric
UI Logic
Service
Business
Logic
Component
Fabric Service

11.

12.

Store
@ngrx
Effects
DAL
Data Logic
Action
reducer
State
Selector
Model [ ]
Model
View
Model
Component
for fabric
UI Logic
Component
UI Logic
Component
Fabric Service

13.

Angular Detection Strategy
OnPush
changes
Default
===
Redux
State
Selector
reference
value

14.

Local State
UI / Service
select
App State
users
Models
focus
todos
hover
cars
position
posts
…
…
REDUX
Server

15.

Local State
select
focus
App State
cars
todos
position
…
UI / Service
todos
users
select
hover
position
users
Models
REDUX
cars
posts
posts
…
Server

16.

App State
user
select

17.

App State
ui state /
local state
Dictionary
key
user id
value
select

18.

App State
select
select
select
Component
Component
Component
ui state /
local state
Dictionary
key
component
prefix
value
Dictionary
key
user id
value
select

19.

App State
user
Dictionary
key
component
prefix
value
select

20.

App State
users
user[]
user
id
user
name
…
info
user
status[]
status
id
caption

21.

App State
users
user[]
user
user
info
status[]
Dictionary
…
status
key
component
prefix
value
select
user
id
caption

22.

App State
users
user[]
user
user
info
status[]
Dictionary
…
status
key
component
prefix
value
Dictionary
id
caption
user
key
user id
value
select

23.

App State
users
user[]
user
user
info
status[]
Dictionary
…
status
key
component
prefix
value
select
user
id
caption

24.

Service
Action
State
Selectors
Component
user
user
user

25.

user
rendering
performance
calculation
side effects

26.

App State
users
user[]
user
user
info
status[]
Dictionary
…
status
key
component
prefix
value
select
user
id
caption

27.

user

28.

Service
Action
State
Selectors
Component
user
select

29.

Service
Action
State
Selectors
Component
user
select

30.

Reference
Object Tree
Update Action

31.

Object Tree
select
id
name
info
status
USER

32.

Update Action
users
users
Auto
user[]
Immutable JS
user
user[]
user
name
Manual
new {…, old}
name