Architecture for applications that scales. It uses redux pattern and ngrx implementation with effects and store.
It's refreshed (but still 2+) presentation from my inner talk for colegues.
4. Agenda
• @AboutMe()
• Paradigms
• Promise & array
• Marbles
• Pattern
• Achitecture
• Q&A
Paweł Żurowski <zurowski.pawel@gmail.com> 2017-09-15
Mysterious, but get ready for a paradigm shift
5. @AboutMe()
• I started programming 18 years ago
• I code for money from the 9 years
• I code for Decerto 3 years
• I was programming in Pascal, C, PHP, Javascript, Bash, SQL, C++, Java,
Typescript
• I did some AJAX before it was popular
• I did some UX before it was so popular
• I did some Devops before it was so named
• I was programming SPAs over the last 4 years in AngularJS
• I observe the development of Angular 2 since AngularJS 1.5-beta.0
• I am doing SPA in Angular 2 & 4 the last few months
Paweł Żurowski <zurowski.pawel@gmail.com> 2017-09-15
6. @AboutMe()
• I started programming 18 years ago
• I code for money from the 9 years
• I code for Decerto 3 years
• I was programming in Pascal, C, PHP, Javascript, Bash, SQL, C++, Java,
Typescript
• I did some AJAX before it was popular
• I did some UX before it was so popular
• I did some Devops before it was so named
• I was programming SPAs over the last 4 years in AngularJS
• I observe the development of Angular 2 since AngularJS 1.5-beta.0
• I am doing SPA in Angular 2 & 4 the last few months
Paweł Żurowski <zurowski.pawel@gmail.com> 2017-09-15
38. State…
• State – values of all variables that app has access to
…is projected on…
39. View…
• View is a function of state 𝑈𝐼 = 𝑓(𝑆𝑡𝑎𝑡𝑒)
…triggers…
40. Actions…
• Action – object describing what happened.
• Important – action emitting does not modify the state.
…sent to…
41. Reducer…
• Reducer – pure function, which takes old state and action and gives
the new state
• Important – reducer doesn’t modify the state – creates the new one.
• Important – reducer doesn’t do asynchronous tasks.
…updates…
42. Store…
• Store – single place which holds state of the application
• Important – State is read-only.
• database
…contains…
43. State…
• State – values of all variables that app has access to
…is projected on…
50. Architecture
@ngrx/Store
Service
Smart Comp.
Dumb Comp.
Reducers
@ngrx/Effects
Effects Service
Data Service
HTTP
new state
select state (observable)
state (observable)
properties (bind)events
call
action (dispatch)
state + action
action (dispatch)
state + action
state + action
state (call)
state (call)response (observable)
response (observable)
state + action
https://youtu.be/pjwVq8B-ZAw @ 21:55 & @ 33:45
55. Scalable architecture
1. Design API (both http and state)
2. Quick mock data service with static example data
3. Do in parallel:
• Put main logic in actions & reducers
• Put query logic in service
• Put side-effect logic in effects
• Create dumb component
• Create data service
4. Glue everything up
• Smart components bridges services and dumb components
• Dispatch events to store in services
5. Replace mock data service with real one (but you can still use mock in tests)
56. Scalable architecture
1. Design API (both http and state)
2. Quick mock data service with static example data
3. Do in parallel:
• Put main logic in actions & reducers
• Put query logic in service
• Put side-effect logic in effects
• Create dumb component
• Create data service
4. Glue everything up
• Smart components bridges services and dumb components
• Dispatch events to store in services
5. Replace mock data service with real one (but you can still use mock in tests)
One task can be in progress by 5 developers in one time*
57. Scalable architecture
1. Design API (both http and state)
2. Quick mock data service with static example data
3. Do in parallel:
• Put main logic in actions & reducers
• Put query logic in service
• Put side-effect logic in effects
• Create dumb component
• Create data service
4. Glue everything up
• Smart components bridges services and dumb components
• Dispatch events to store in services
5. Replace mock data service with real one (but you can still use mock in tests)
One task can be in progress by 5 developers in one time*
*even by 10 with pair programming ;)
58. Scalable applications
• Think in layers:
• What I want to insert into store
• What I want query from the store (and watch for changes in effective way!)
• What does communicate with other systems (not only backend)
• What I want to show
• Can I divide it into smaller parts
• Do I already have everything in the store
59. Additional benefits of REDUX pattern
• Transactional modification of the application state
• Seperation of View and Logic
• You can persist application state in any moment
• You can restore view from persisted application state
• Time-travel debug – bug reporting made easy
• Dirty checking – you have not to
• You can share some actions with backend
• Easy unit testing