2. 20.10.2016
2
Ziele
• Wie funktioniert die Datenbindung in Angular 2?
• Wie kann man die Performance für Datenbindung verbessern?
• Immutables
• Observables
Nicht-Ziele
• Allgemeine Einführung in Angular 2
3. 20.10.2016
3
Didaktik
• 1. Abschnitt
• Präsentation
• Live-Coding
• 2. Abschnitt
• Übung mit Übungsblatt und Starterkit
Inhalt
• Überblick zur Datenbindung in Angular 2
• Datenbindung hinter den Kulissen
• Two-Way-Binding
• Überblick zu Immutables
• Performancetuning mit Immutables
• Überblick zu Observables
• Performancetuning mit Observables
• Übung
• Bonus: Ausblick auf AOT-Kompilierung
7. 20.10.2016
7
Data-Binding in AngularJS 1.x
Page 16
Model Model Directive
Komponentne-Baum in Angular 2
Page 17
Komponente für gesamte App
Komponente (z. B. list)
Komponente
(z. B. list-item)
Komponente
(z. B. list-item)
8. 20.10.2016
8
Regeln für Property Bindings
• Komponente hängt nur von Daten des Parents ab
• Komponente hängt nie von Daten der Kinder ab
• Abhängigkeits-Graph is ein Baum
• Angular benötigt nur eine einzige Iteration („digest“)
zum Abgleich des Baumes
Page 18
Property-Binding
Page 19
model
item item
{{ item.title }} {{ item.title }}
[http://victorsavkin.com/post/110170125256/change-detection-in-angular-2]
18. 20.10.2016
18
Angular traversiert standardmäßig den
gesamten Komponenten-Baum
flights
flight flight
{{ flight.id }} {{ flight.id }}
FlightSearch
Card Card
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)
19. 20.10.2016
19
Beispiel
const ONE_MINUTE = 1000 * 60;
let oldFlights = this.flights;
let oldFlight = oldFlights[0]; // Flight to change!
let oldFlightDate = new Date(oldFlight.date); // Date to change
Änderung ohne Immutables
date.setTime(date.getTime() + ONE_MINUTE * 15);
this.flights[0].date = date.toISOString();
20. 20.10.2016
20
Änderung mit Immutables
let newFlightDate = new Date(oldFlightDate.getTime() + ONE_MINUTE * 15);
let newFlight = {
id: oldFlight.id,
from: oldFlight.from,
to: oldFlight.to,
date: newFlightDate.toISOString()
};
let newFlights = [
newFlight,
...oldFlights.slice(1, this.flights.length)
];
this.flights = newFlights;
Auf Änderungen prüfen
console.debug("Array: " + (oldFlights == newFlights)); // false
console.debug("#0: " + (oldFlights[0] == newFlights[0])); // false
console.debug("#1: " + (oldFlights[1] == newFlights[1])); // true
21. 20.10.2016
21
Immutables und Angular 2
• Annahme: Jedes @Input() einer Komponente ist immutable
• Angular kann einfach prüfen, ob sich eingehende Daten einer
Komponente ändern
• Nur wenn das der Fall ist, müssen Komponente und deren
Kind-Komponenten betrachtetet werden
Immutables und Angular
flights
flight flight
{{ flight.id }} {{ flight.id }}
FlightSearch
Card Card
Änderung
23. 20.10.2016
23
Weitere Vorteile von Immutables
• Vereinfacht Nachvollziehbarkeit und Testing -> Kein Zustand
• Vereinfacht Undo/Redo
Observables
24. 20.10.2016
24
Was sind Observables?
• Repräsentieren asynchrone Daten, die im Verlauf der Zeit
veröffentlicht werden
Observer
„Senke“
Observable
„Quelle“
Operator
(z. B. map)
26. 20.10.2016
26
Eigenes Observable
var observable = Observable.create((sender) => {
sender.next(4711);
sender.next(815);
//sender.error("err!");
sender.complete();
});
Asynchron, Ereignis-gesteuert
var subscription = observable.subscribe(…);
subscription.unsubscribe();
return () => { console.debug('Bye bye'); };
Cold vs. Hot Observables
Page 55
Cold
• Standard
• Punkt zu Punkt
• Pro Empfänger ein Sender
• Sender startet erst bei
Anmeldung
Hot
• Punkt zu Multipunkt
• Sender startet auch ohne
Anmeldungen
35. 20.10.2016
35
Vorteile von AOT
• Bessere Startup-Performance
• Kleinere Bundles: Compiler für JIT muss nicht ausgeliefert werden
• Bessere statische Analysierbarkeit des Programmcodes
HTML
TypeScript
TypeScript
Angular 2
Tree Shaking
39. 20.10.2016
39
Fazit
• Hohes Potential (Performance, Bundle-Größe, Tree-Shaking)
• Sehr junges Feature
• Tooling entsteht gerade (z. B. Integration in WebPack)
• Wird wohl erst ab Version 2.1 „runde Sache“
Kontakt
[mail] manfred.steyer@SOFTWAREarchitekt.at
[web] SOFTWAREarchitekt.at
[twitter] ManfredSteyer