Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
-
Upload
manfred-steyer -
Category
Internet
-
view
312 -
download
0
Transcript of Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
26.09.2016
1
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Manfred Steyer
ManfredSteyer
About me …
• Manfred Steyer
• SOFTWAREarchitekt.at
• Trainer & Consultant
• GDE & MVP
• Focus: Angular
Page 2
ManfredSteyer
26.09.2016
2
Ziel
• Ideen hinter Redux mit Angular 2 und @ngrx/store kennen lernen
• Redux anhand eines Beispiels in Aktion sehen
Nicht-Ziel
• Einführung in Angular 2
26.09.2016
3
Inhalt
Motivation
Actions
Reducer
Store
Immutables
DEMO
Demo App
26.09.2016
4
Motivation
App
Home Booking Boarding
26.09.2016
5
App
Home Booking Boarding
FlightService PassengerService BoardingService
App
Home Booking Boarding
FlightService PassengerService BoardingService
Verworren Schwer Nachvollziehbar Keine Struktur
26.09.2016
6
Redux
• Redux hilft, komplexe UIs beherrschbar zu machen
• Ursprung: React
App
Home Booking Boarding
Store
State
… boarding
… …
BoardingReducer
State State StateAction Action Action
Action
…Reducer
Action
Single Immutable State Tree
…
26.09.2016
7
App
Home Booking Boarding
Store
State
… boarding
… …
BoardingReducer
State State StateAction Action Action
Action
…Reducer
Action
Single Immutable State Tree
…
Eine einzige „Quelle der Wahrheit“
Einfach zu speichern
Einfach zu debuggen
Undo/Redo
Immutables und Observables
Performance
Lesen: Direkt
Schreiben: Via Reducer
Action
26.09.2016
8
Teile einer Action
Type
Payload
{type: 'BOOKINGS_LOADED',payload: [
{ flightId: 7, passengerId: 17, …}, …
]}
Reducer
26.09.2016
9
Reducer
• Bringt Aktion zur Ausführung
• Pure Funktion
• Eingabe bestimmen Ausgaben
• Keine Seiteneffekte
• Zustandslos
• Einfach zu testen
Reducer
(currentStateTree, action) => newStateTree
26.09.2016
10
Store
Store
Verwaltet State Tree
Gewährt lesenden Zugriff (Pub/Sub über Observables)
Gewährt schreibenden Zugriff über Aktionen
26.09.2016
11
Store
dispatch(action)
select(tree => tree.borarding.statistics): Observable
Immutables?
26.09.2016
12
Immutables
• Unveränderbare Objekte
• Wenn sich repräsentierte Daten ändern: Neues Objekt erzeugen
• Man kann einfach herausfinden, ob sich etwas geändert hat• oldObject == newObject
• Mit oder ohne Bibliotheken möglich (wie immutable.js)
Immutables
const ONE_MINUTE = 1000 * 60;
let oldFlights = this.flights;
let oldFlight = oldFlights[0]; // Flight to change!
let oldFlightDate = new Date(oldFlight.datum); // Date to change
26.09.2016
13
Immutables
let newFlightDate = new Date(oldFlightDate.getTime() + ONE_MINUTE * 15);
let newFlight = {
id: oldFlight.id,
abflugort: oldFlight.abflugort,
zielort: oldFlight.zielort,
datum: newFlightDate.toISOString()
};
let newFlights = [
newFlight,
...oldFlights.slice(1, this.fluege.length-1)
];
this.flights = newFlights;
Checking for Change
console.debug("Array: " + (oldFlights == newFlights)); // false
console.debug("#0: " + (oldFlights[0] == newFlights[0])); // false
console.debug("#1: " + (oldFlights[1] == newFlights[1])); // true
26.09.2016
14
App
Home Booking Boarding
Store
State
… boarding
… …
BoardingReducer
State State StateAction Action Action
Action
…Reducer
Action
Single Immutable State Tree
…
DEMO
26.09.2016
15
DEMO
UNDO/REDO
26.09.2016
16
Undo/Redo
State0
Undo/Redo
State1
State0
Undo Stack
26.09.2016
17
Undo/Redo
State1
State0
Undo Stack
State2
Undo/Redo
State1
State0
Undo Stack
State3
State2
26.09.2016
18
Undo/Redo
State1
State0
Undo Stack
State3
State2
UNDO
Undo/Redo
State1
State0
Undo Stack
State3
State2
UNDO
26.09.2016
19
Undo/Redo
State1
State0
Undo Stack
State3
State2
UNDO
Redo Stack
Undo/Redo
State1
State0
Undo Stack
State2
State3
Redo Stack
26.09.2016
20
Undo/Redo
State1
State0
Undo Stack
State2
State3
Redo Stack
REDO
Undo/Redo
State1
State0
Undo Stack
State3
State2
26.09.2016
21
DEMO
Fazit• Zentraler Zustand vereinfacht Abgleich zwischen Komponenten
• Immutables: Performance und Nachvollziehbarkeit
• Observables: Performance
• Actions: Nachvollziehbarkeit, Undo/Redo
• Reducer: Testbarkeit
• Tools für „Zeitreise“
• Kritik: Immutability braucht ein wenig Übung!
• Aber: Ansätze machen auch isoliert voneinander Sinn!