Architecture for scalable Angular applications

Angular 2+
Architecture for scalable Angular applications
Paweł Żurowski <zurowski.pawel@gmail.com> 2017-09-15

Angular 2+
Architecture for scalable Angular applications
Scalable architecture for Angular applications

Agenda
• @AboutMe()
• Paradigms
• Promise & array
• Marbles
• Pattern
• Achitecture
• Q&A

Agenda
• @AboutMe()
• Paradigms
• Promise & array
• Marbles
• Pattern
• Achitecture
• Q&A
Mysterious, but get ready for a paradigm shift

@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

Paradigms:
imperative vs declarative
wykonywanie obliczeń w pętli

for vs forEach
const array = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
// for
for (let i = 0; i < array.length; ++i) {
console.log(array[i]);
}
// forEach
array.forEach((item) => console.log(item));

for vs map
const array = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
// for
const doubled1 = [];
let double = array[i] * 2;
doubled1.push(double);
}
// map
const doubled2 = array.map((item) => 2 * item);

for vs filter
const array = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
const isPrime = (n) => ...; // true or false
// for
const primes1 = [];
if(isPrime(array[i])){
primes1.push(array[i]);
}
}
// filter
const primes2 = array.filter(isPrime);

for vs reduce
const array = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
// for
let sum1 = 0;
sum1 = sum1 + array[i];
}
// reduce
const sum2 = array.reduce((last, item) => last + item, 0);

for vs reduce
const array = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
const add = (a, b) => a + b;
// for
let sum1 = 0;
sum1 = add(sum1, array[i]);
}
// reduce
const sum2 = array.reduce(add, 0);

map-filter-reduce
const array = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
const double = (x) => 2 * x;
const isPrime = (n) => ...;
const doubled2 = array.map(double);

Primitive value, array, promise, …
…

number
Array
<number>
Promise
<number>
?
Single Multiple
Now
In future

number
Array
<number>
Promise
<number>
Observable
<number>
Single Multiple
Now
In future

promise vs observable
promise
.then( (value) => console.log(value))
.catch( (reason) => console.error(reason))
.finally(() => console.log('Done'));
observable.subscribe(
(value) => console.log(value),
(reason) => console.error(reason),
() => console.log('Done')
);

promise
.then( (value) => console.log(value))
;
observable.subscribe(
(value) => console.log(value)
);

promise
.then((value) => console.log(value));
observable
.subscribe((value) => console.log(value));

Primitive value, array, promise, observable
number
Iterable
<number>
Promise
<number>
Observable
<number>
pull semantics
push semantics
Single Multiple
Now
In future

Observable - rxMarble
http://reactivex.io/assets/operators/legend.png

Age changes tariff vs Tariff is changed by age
Sum assuredPremium frequency MassHeigthAge
BMI
Loading
Tariff
Discount
Premium
Payment plan

map-filter-reduce --- recall
const array = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
const double = (x) => 2 * x;
const isPrime = (n) => ...;
const doubled2 = array.map(double);

State…
• State – values of all variables that app has access to
…is projected on…

View…
• View is a function of state 𝑈𝐼 = 𝑓(𝑆𝑡𝑎𝑡𝑒)
…triggers…

Actions…
• Action – object describing what happened.
• Important – action emitting does not modify the state.
…sent to…

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…

Store…
• Store – single place which holds state of the application
• Important – State is read-only.
•  database
…contains…

REDUX pattern
Store
State
ViewActions
Reducer
Contains
Is projected on
Triggers
Sent to
Updated
https://medium.com/@flashMasterJim/setting-up-ngrx-store-in-an-angular-2-project-e5232a7b082e#.23yso3phj

Reducer interface
interface ActionReducer<T> {
(state: T, action: Action): T;
}
const dumbReducer = (state, action) => state;

Reducer from example application
export function reducer(state: State = defaultState, action: Action = {} as Action) {
switch (action.type) {
case LOAD_QUOTE_SUCCESS: {
return {...state, options: action.payload.options};
}
}
return state;
}

Architecture
@ngrx/Store
Service
Smart Comp.
Dumb Comp.
Reducers
new state
select state (observable)
state (observable)
properties (bind)events
call
action (dispatch)
state + action
https://youtu.be/pjwVq8B-ZAw @ 21:55

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

@ngrx/StoreService
Smart Comp.
Dumb Comp.
Reducers
@ngrx/Effects
Effects Service
Data Service
HTTP
Service
Smart Comp.
Dumb Comp.
User action
event
call
dispatch select
state
bindings

@ngrx/StoreService
Smart Comp.
Dumb Comp.
Reducers
@ngrx/Effects
Effects Service
Data Service
HTTP
Service
Smart Comp.
Dumb Comp.
database
Inserts
& Updates
Queries
Triggers

Normalized state & derived values
Sum assuredPremium frequency MassHeigthAge
BMI
Loading
Tariff
Discount
Premium
Payment plan

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)

3. Do in parallel:
One task can be in progress by 5 developers in one time*

3. Do in parallel:
One task can be in progress by 5 developers in one time*
*even by 10 with pair programming ;)

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

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

Summary
Declarative, Observable, Redux, Architecture

Architecture for scalable Angular applications

More Related Content

What's hot (20)

Similar to Architecture for scalable Angular applications (20)

Recently uploaded (20)

Architecture for scalable Angular applications