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.

Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet

501 views

Published on

Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet

  1. 1. 26.09.2016 1 Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet Manfred Steyer ManfredSteyer Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • GDE & MVP • Focus: Angular 2 Page  2 ManfredSteyer
  2. 2. 26.09.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. 3. 26.09.2016 3 Inhalt • Überblick zur Datenbindung in Angular 2 • Datenbindung hinter den Kulissen • Two-Way-Binding • Performancetuning mit Immutables und Observables • Formulare Warum ist dieses Thema interessant? • Grundlegender Mechanismus jedes SPA-Frameworks • Beeinflusst Performance maßgeblich • Two-Way-Binding für u. a. für Biz-Anwendungen • Ansatzpunkte für Performanceoptimierungen
  4. 4. 26.09.2016 4 Benchmark Überblick zur Datenbindung in Angular 2
  5. 5. 26.09.2016 5 Angular-2-Anwendung sind Komponenten Page  9 @Component({ selector: 'flug-suchen', templateUrl: 'flug-suchen.html' }) export class FlugSuchenComponent { von: string; nach: string; fluege: Array<Flug>; constructor(http: Http) { } search() { [...] } select(flug) { [...] } } Page  10 <input [(ngModel)]="von"> <input [(ngModel)]="nach"> <button [disabled]="!von || !nach" (click)="search()"> Search </button> <table> <tr *ngFor="let flug of fluege"> <td>{{flug.id}}</td> <td>{{flug.datum}}</td> <td>{{flug.von}}</td> <td>{{flug.nach}}</td> </tr> </table> Template
  6. 6. 26.09.2016 6 Hinter den Kulissen Page  11 Data-Binding in AngularJS 1.x Page  12 Model Model Directive
  7. 7. 26.09.2016 7 Komponentne-Baum in Angular 2 Page  13 Komponente für gesamte App Komponente (z. B. list) Komponente (z. B. list-item) Komponente (z. B. list-item) Regeln für Property Bindings • Komponente hängt nur von Daten des Parent 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  14
  8. 8. 26.09.2016 8 Property-Binding Page  15 model item item {{ item.title }} {{ item.title }} [http://victorsavkin.com/post/110170125256/change-detection-in-angular-2] Event-Bindings (One-Way, Bottom/Up) Page  16 {{ item.title }} {{ item.title }} Event-Handler Event-Handler
  9. 9. 26.09.2016 9 Event-Bindings (One-Way, Bottom/Up) • Kein Digest nötig • Event-Handler == Callbacks • Aber: Events können Anwendungszustand verändern  Digest um Property-Bindings zu aktualisieren Page  17 Property- und Event-Bindings Page  18 Property-Bindings ausführen Event-Handler warden ausgeführt Ereignis tritt ein Anwendung ist bereit! Alle Handler ausgeführt Properties gebunden
  10. 10. 26.09.2016 10 Bindings definieren Page  19 View Page  20 <button (click)="search()" [disabled]="!from || !to">Search</button> <table> <tr *ngFor="let flight of flights"> <td>{{flight.id}}</td> <td>{{flight.date}}</td> <td>{{flight.from}}</td> <td>{{flight.to}}</td> <td><a href="#" (click)="selectFlight(flight)">Select</a></td> </tr> </table> <td [text-content]="flight.id"></td>
  11. 11. 26.09.2016 11 Recap • Property-Binding: One-Way; Top/Down • Event-Binding: One-Way; Bottom/Up • Two-Way-Binding? • Two-Way = Property-Binding + Event-Binding Page  21 Property- und Event-Bindings kombinieren Page  22 <input [ngModel]="from" (ngModelChange)="updateFrom($event)"> updateFrom(newValue) { this.from = newValue; }
  12. 12. 26.09.2016 12 Property- und Event-Bindings kombinieren Page  23 <input [ngModel]="from" (ngModelChange)="from = $event"> Syntax-Zucker für Two-Way-Binding Page  24 <input [(ngModel)]="from">
  13. 13. 26.09.2016 13 Vorteile • Performance • Events: Flexibilität • Syntaxzucker: Einfache Nutzung Page  25 DEMO: Two-Way-Binding Page  26
  14. 14. 26.09.2016 14 Beispiel: flight-card Page  27 Using flight-card Page  28 <div *ngFor="let f of flights"> <flight-card [item]="f" [selectedItem]="selectedFlight" (selectedItemChange)="selectedFlight = $event"> </flight-card> </div>
  15. 15. 26.09.2016 15 flug-card Page  29 flug-card item selectedItem > > > selectedItemChange flug selectedFlug DEMO
  16. 16. 26.09.2016 16 Performance-Tuning mit Immutables and Observables Angular traversiert standardmäßig den gesamten Komponenten-Baum flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card
  17. 17. 26.09.2016 17 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.date); // Date to change
  18. 18. 26.09.2016 18 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
  19. 19. 26.09.2016 19 Immutables und Angular 2 • Daten fließen top/down • Modus für Optimierung: Jedes @Input-Binding einer Komponente ist immutable • Vereinfacht Prüfung auf Änderung • Wenn sich kein Input einer Komponente geändert hat • Komponente inkl. aller Sub-Komponenten auslassen Immutables und Angular flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card Änderung
  20. 20. 26.09.2016 20 Optimierung aktivieren @Component({ […] changeDetection: ChangeDetectionStrategy.OnPush }) export class FlightCard { […] @Input flight; } DEMO
  21. 21. 26.09.2016 21 Observables mit OnPush Page  41 flights flight$ flight$ {{ flight$.id }} {{ flight$.id }} FlightSearch Card Card Change Observables mit OnPush Page  42 flights$ flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Change Card
  22. 22. 26.09.2016 22 Observable binden <flight-card [item]="flight | async" […]> </flight-card> Nicht „Alles-oder-Nichts“ • Optimierungen mit Immutables und Observables funktionieren nicht nach dem „Alles-oder-Nichts“-Prinzip • Sie können bei Bedarf genutzt werden
  23. 23. 26.09.2016 23 Formulare Template-driven Forms <form> <input type="text" name="von" [(ngModel)]="von"> </form>
  24. 24. 26.09.2016 24 Reaktive Formulare export class FlugSuchenComponent { filter: FormGroup; constructor(flightService: FlightService, fb: FormBuilder) { […] this.filter = fb.group({ von: ['Graz', Validators.required], nach: ['Hamburg', Validators.required] }); […] } searchFlights() { var filter = this.filter.value; […] } } Reaktive Formulare Page  48 <form [formGroup]="filter"> <input id="from" formControlName="von" type="text"> <div *ngIf="!filter.controls.von.valid">…Error…</div> […] </form>
  25. 25. 26.09.2016 25 DEMO Fazit • Property-Bindings: Top/Down, One-Way • Event-Bindings: Bottom/Up, One-Way • 2-Way-Bindings: Property-Binding + Event-Binding • Architektur: „Fast by default“ • Wer mehr Performance benötigt: Immutables und Observables • Template-driven Forms vs. Reactive Forms
  26. 26. 26.09.2016 26 Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer

×