Architektura ngrx w angular 2+

Angular 2+
Architektura aplikacji
Paweł Żurowski

Angular 2+
Dlaczego zwane też przydługim wstępem
Przykłady
Paweł Żurowski

Paradygmaty:
imperatywny vs deklaratywny
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);

Skalar, tablica, promise, …
…trzy kropki

prymityw, tablica, promise, …
number
Array
<number>
Promise
<number>
?
jedna wartość wiele wartości
wartość dostępna teraz
wartość dostępna w przyszłości

Promise
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() < 0.5){
return resolve('Success');
}else{
return reject('Failure')
}
}, 5 * 1000);
});
promise
.then((value) => console.log(value))
.catch((reason) => console.error(reason))
.finally(() => console.log('Done'));

prymityw, tablica, promise, observable
number
Array
<number>
Promise
<number>
Observable
<number>

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));

prymityw, tablica, promise, observable
number
Iterable
<number>
Promise
<number>
Observable
<number>
pull semantics
push semantics

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

map-filter-reduce --- przypomnienie
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);

Stan…
• Stan (state) – wartości wszystkich zmiennych (np. komponentu,
aplikacji) w danym momencie, do których program ma dostęp.
…jest projektowany na…

Widok…
• Widok (view), GUI
• Widok funkcją stanu 𝑈𝐼 = 𝑓(𝑆𝑡𝑎𝑡𝑒)
…wywołuje…

Akcje…
• Akcja (action) – obiekt, który opisuje to, co się zdarzyło.
• Ważne – samo wyemitowanie akcji nie modyfikuje stanu.
…obsługiwane przez…

Reduktor…
• Reduktor (reducer) – czysta funkcja (pure function), która na
podstawie stanu i akcji synchronicznie (wręcz transakcyjnie) wylicza
nowy stan.
• Ważne – reduktor nie modyfikuje stanu – tworzy nowy stan.
• Ważne – reduktor nie wywołuje asynchronicznych funkcji.
…modyfikuje…

Store…
• Store – jeden obiekt, w którym zapisany jest stan całej aplikacji.
• Ważne – zapisany stan jest tylko do odczytu.
•  baza danych
…przechowuje…

Stan…
• Stan (state) – wartości wszystkich zmiennych (np. komponentu,
aplikacji) w danym momencie, do których program ma dostęp.
…jest projektowany na… itd.

Wzorzec REDUX
Store
State
ViewActions
Reducer
przechowuje
jest projektowany na
wywołuje
obsługiwane przez
modyfikuje
https://medium.com/@flashMasterJim/setting-up-ngrx-store-in-an-angular-2-project-e5232a7b082e#.23yso3phj

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

Reduktor z przykładowej aplikacji
export function reducer(state = initialState, action: ActionType): State {
switch (action.type) {
case Types.ADD:
case Types.REMOVE:
case Types.QUERY:
case Types.UPDATE:
return Object.assign({}, state, {loading: true});
case Types.ADDED:
return Object.assign({}, state, {loading: false}, {greetings: [...state.greetings, action.payload]});
case Types.REMOVED:
return Object.assign({}, state, {loading: false}, {greetings: state.greetings.filter(({id}) => id !== action.payload.id)});
case Types.UPDATED:
return Object.assign({}, state, {loading: false},
{greetings: state.greetings.map((gr) => gr.id === action.payload.id ? action.payload : gr)});
case Types.QUERIED:
return Object.assign({}, state, {loading: false}, {greetings: action.payload});
case Types.SORT:
return Object.assign({}, state, {greetings: sort(state.greetings, valueComparator)});
case Types.RSORT:
return Object.assign({}, state, {greetings: sort(state.greetings, (a, b) => valueComparator(b, a))});
default:
return state;
}
}

Operator scan – przypomnienie

ngrx/Store
• Po każdej akcji zostanie wypchnięty nowy stan
• Wszystko, co zasubskrybowało store, dostanie odpowiedni jego
fragment, o ile…
• …w ogóle się zmienił (a korzystamy z niemutowalnego drzewa stanu)

Nowy stan
Panel
Nagłówek
Ikona Tekst
Treść
Lorem
Ipsum
Panel
Nagłówek
Ikona Tekst
Treść
Ala ma
kota
Modyfikacja tekstu
Kopia referencji

Asynchroniczne wywołania – ngrx/Effects
• Wywoływane „obok”
• Nasłuchują akcji
• Gdy odpowiednia nadejdzie – wywołują asynchroniczny kod
(np. http)
• Po zakończeniu – zwracają 0..* akcji
• To także observables (można korzystać z operatorów, np.
debounce czy switchMap)
• switchMap w połączeniu z http potrafi anulować request –
out of the box

@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 w 21:55 i w 33:45

Wzorzec REDUX - dodatkowe korzyści
• Transakcyjne modyfikowanie stanu aplikacji
• Separacja logiki od prezentacji
• Możliwość zapisania stanu aplikacji w każdym momencie
• Możliwość odtworzenia wyglądu aplikacji z zapisanego stanu
(widok funkcją stanu)
• Time-travel debug – oprócz stanu można zapisać n (być może
nawet duże N) ostatnich akcji – możliwość odtworzenia
przebiegu działań użytkownika
• Dirty checking – niepotrzebne

Angular (2+) building blocks
Typescript/ES2015, templates, examples

Typescript: typy
function asd() {
var a = 42;
var b = 'hello';
b = a; // Type 'number' is not assignable to type 'string'
return b;
}
console.log(asd()); // 42
var x: number;

ES2015: let, const
function x() {
var V = 1;
let L = 1;
const C = 1;
if (this) {
var V = 2;
let L = 2;
C = 4; // Cannot assign to 'C' because it is
// a constant or a read-only property.
}
console.log(L, V, C); // 1 2 4
}

Typescript: interfejsy
interface Action {
type: string; payload?: any;
}
interface ActionReducer<T> {
(state: T, action: Action): T;
}
let typeCache: { [label: string]: boolean } = {};
function sort<T>(
array: Array<T>,
compareFn?: (a: T, b: T) => number): Array<T> {
const shallowCopy = array.map(i => i);
shallowCopy.sort(compareFn); return shallowCopy;
}

ES2015: fat arrow function (fart)
function MyObject() {
this.value = 42;
}
MyObject.prototype.method = function method() {
setTimeout(() => console.log(this.value));
};

ES2015: template literals
const a = 10;
const b = 30;
const c = 24;
const template = `
${a} + ${b} = ${a + b}
${a} * ${c} = ${a * c}
max(a,b,c) = ${Math.max(a, b, c)}
min(b,c) = ${Math.min(b, c)}
`;

ES2015: spread rest
const a = [1,2,3];
const b = [10, 20, 30];
// spread operator
const c = [...a, -1, ...b];
// rest operator
const f = (n: number, ...x) => n * x.length;

ES2015: destructuring
interface PersonalData {
firstName: string,
lastName: string,
age: number,
address: {city: string, postalCode: string}
}
function fullName({firstName, lastName}: PersonalData) {
return `${firstName} ${lastName}`;
}
function simpleRecord({firstName, address}: PersonalData) {
const {city} = address;
return {firstName, city};
}

ES2015: default parameters
function createSth(name = 'defaultName') {
//...
}
const validateCar = ({engine, suspension} = DUMMY_CAR)
=> engine && suspension;

ES2015: import export
// sort.ts
export function sort<T>(array: Array<T>,
compareFn?: (a: T, b: T) => number): Array<T> {
const shallowCopy = array.map(i => i);
shallowCopy.sort(compareFn);
return shallowCopy;
}
// somewhere.ts
import {sort} from './sort';
declare function doProcess(array: Array<number>);
declare function takeArray(): Array<number>;
doProcess(sort(takeArray()));

ES5: obiekty z prototypem
function Something
( value) {
this.initialized = true;
this.value = value;
}
Something.prototype.somewhere = function somewhere(n) {
this.somehow = this.value + n;
};
var thing = new Something(42);
thing.somewhere(2);
console.log(thing.somehow());

ES2015: klasy (ale nie „klasyczne”!)
class Something {
constructor(public value) {
this.initialized = true;
}
somewhere(n) {
this.somehow = this.value + n;
};
}
var thing = new Something(42);
thing.somewhere(2);
console.log(thing.somehow());

Typescript: decorators
const dog = (language) => function (target) {
target.prototype.speak = () =>
language === 'pl' ? 'hau!' : 'woof!'
};
interface Speakable { speak(what: string): string; }
@dog('pl')
class Animal implements Speakable {
speak() { return 'speaking'; }
}
const s = new Animal();
console.log(s.speak());

Angular 2+: szablony
• {{interpolation}}
• [propertyBinding]
• (eventBindging)
• *structure
• #ref
<span>{{ firstName }}</span>
<img [src]="i.src" alt="image"/>
<a (click)="doIt()">do</a>
<div *ngIf="isVisible">sth</div>

Przykłady w kodzie
• Reducer
• Reducer – testy
• Effects
• Effects – testy
• Service
• Service –testy
• Component (smart, dumb)
• Component – testy

Podsumowanie
Deklaratywnie, Observable, Redux, Architektura

Wypadałoby jeszcze wspomnieć o:
• Narzędziach: Redux Dev Tools, Augury
• Style guide: https://angular.io/docs/ts/latest/guide/style-guide.html
• Reactive forms, reactive router, ngrx/router
• Testach jednostkowych:
• jednostka != plik, jednostka != klasa, jednostka != serwis
• AAA – arrange, act, assert
• https://angular.io/docs/ts/latest/guide/testing.html - guide
• https://docs.google.com/presentation/d/1gJCBr_M5dCcCX9WUM52ZUAKVlPj
6hQv3MYXKlgFMpSA/edit?usp=sharing - przykłady
• Korzystając z tej architektury celowo rezygnuje się części
funkcjonalności oferowanych przez Typescript i Angular

Architektura ngrx w angular 2+

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Viewers also liked

Viewers also liked (18)

Similar to Architektura ngrx w angular 2+

Similar to Architektura ngrx w angular 2+ (20)

Architektura ngrx w angular 2+