Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store

695 views

Published on

Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store

  1. 1. 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
  2. 2. 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
  3. 3. 26.09.2016 3 Inhalt Motivation Actions Reducer Store Immutables DEMO Demo App
  4. 4. 26.09.2016 4 Motivation App Home Booking Boarding
  5. 5. 26.09.2016 5 App Home Booking Boarding FlightService PassengerService BoardingService App Home Booking Boarding FlightService PassengerService BoardingService  Verworren  Schwer Nachvollziehbar  Keine Struktur
  6. 6. 26.09.2016 6 Redux • Redux hilft, komplexe UIs beherrschbar zu machen • Ursprung: React App Home Booking Boarding Store State … boarding … … Boarding Reducer State State StateAction Action Action Action … Reducer Action Single Immutable State Tree …
  7. 7. 26.09.2016 7 App Home Booking Boarding Store State … boarding … … Boarding Reducer 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
  8. 8. 26.09.2016 8 Teile einer Action Type Payload { type: 'BOOKINGS_LOADED', payload: [ { flightId: 7, passengerId: 17, …}, … ] } Reducer
  9. 9. 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
  10. 10. 26.09.2016 10 Store Store Verwaltet State Tree Gewährt lesenden Zugriff (Pub/Sub über Observables) Gewährt schreibenden Zugriff über Aktionen
  11. 11. 26.09.2016 11 Store dispatch(action) select(tree => tree.borarding.statistics): Observable Immutables?
  12. 12. 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
  13. 13. 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
  14. 14. 26.09.2016 14 App Home Booking Boarding Store State … boarding … … Boarding Reducer State State StateAction Action Action Action … Reducer Action Single Immutable State Tree … DEMO
  15. 15. 26.09.2016 15 DEMO UNDO/REDO
  16. 16. 26.09.2016 16 Undo/Redo State0 Undo/Redo State1 State0 Undo Stack
  17. 17. 26.09.2016 17 Undo/Redo State1 State0 Undo Stack State2 Undo/Redo State1 State0 Undo Stack State3 State2
  18. 18. 26.09.2016 18 Undo/Redo State1 State0 Undo Stack State3 State2 UNDO Undo/Redo State1 State0 Undo Stack State3 State2 UNDO
  19. 19. 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
  20. 20. 26.09.2016 20 Undo/Redo State1 State0 Undo Stack State2 State3 Redo Stack REDO Undo/Redo State1 State0 Undo Stack State3 State2
  21. 21. 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!
  22. 22. 26.09.2016 22 Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer

×