- Angular 2 Grundlagen - Change Tracking - Migrationspfade

1. 1
Angular 2.0: Architektur und Konzepte für
moderne JavaScript-Anwendungen
Manfred Steyer
Aktuelles Buch
Folie 2
O'Reilly:
AngularJS: Moderne
Webanwendungen und Single Page
Applications mit JavaScript
Steyer, Softic

2. 2
Ziel
Überblick zu Angular 2 gewinnen
Migrationspfade
Page  3
Inhalt
Warum Angular ?
Überblick zu Angular 2
Datenbindung näher betrachtet
DEMO
Migrationspfade
Fazit
Page  4

3. 3
WARUM ANGULAR?
Page  5
Plattformen und Usability
HTML + JavaScript

4. 4
High-Level Architektur
Page  7
Services
HTML/
JavaScript-Client
HTTP
Single Page Application (SPA)
Page  8
HTML + JavaScript => Komplexität

5. 5
Page  9
HTML + JavaScript + jQuery => Komplexität
Page  10
Frameworks machen SPA beherrschbar

6. 6
Typische Möglichkeiten
Page  11
Abstraktion MV* Datenbindung
Testing Komponenten Routing
Validierung
Community (Februar 2016)
Page  13
AngularJS EmberJS Durandal Aurelia
Stars 46.168 15.615 1.680 5.220
Forks 21.632 3.364 379 231
Contributers 1.393 551 69 21

7. 7
Google Trends (Februar 2016)
Page  14
Job Trends (Indeed.com, Februar 2016)
Page  16

8. 8
HERAUSFORDERUNGEN IN
ANGULARJS 1.X
Page  17
Herausforderungen in AngularJS 1.x
Page  18
Performance Nachvollziehbarkeit Änderungsverfolgung
Use-Case:
Anwendungen
Zusammenspiel mit
anderen Bibliotheken

9. 9
ANGULAR 2
Page  19
Was ist Angular 2 ?
 Neuimplementierung
 Performance
 Komponenten (Web Components)
 TypeScript/ ES 6 (ES 5 möglich)
 Kompilierung nach ES 5
 Modularisierung
 Flexibles Rendering (auch: Web-Worker, Server)
 Spielt besser mit anderen Bibliotheken zusammen
Page  20

10. 10
Stand der Dinge
BETA seit Dezember 2015
Kern laut Produkt-Team stabil
Moving-Parts jenseits des Kerns
Kommt bereits bei Google zum Einsatz
 Green Tea, CMS, 100s Devs, 1.000.000s LOC
 Google AdWords, 100s Devs, 1.000.000s LOC
Page  21
Component Controller
Page  22
@Component({
selector: 'flug-suchen'
})
@View({
templateUrl: 'flug-suchen.html',
directives: [NgFor, NgIf]
})
export class FlugSuchen {
von: string;
nach: string;
fluege: Array<Flug>;
constructor(flugService: FlugService) { }
flugSuchen() { [...] }
selectFlug(flug) { [...] }
}

11. 11
View
Page  23
<input [(ngModel)]="von">
[…]
<table [hidden]="fluege.length == 0">
<tr *ngFor="#flug of fluege">
<td>{{flug.id}}</td>
<td>{{flug.datum}}</td>
<td>{{flug.abflugOrt}}</td>
<td>{{flug.zielOrt}}</td>
<td><a href="#" (click)="selectFlug(flug)">Auswählen</a></td>
</tr>
</table>
View
Page  24
<input bindon-ngModel="von">
[…]
<table bind-hidden="fluege.length == 0">
<tr template="ngFor: var flug of fluege">
<td>{{flug.id}}</td>
<td>{{flug.datum}}</td>
<td>{{flug.abflugOrt}}</td>
<td>{{flug.zielOrt}}</td>
<td><a href="#" on-click="selectFlug(flug)">Auswählen</a></td>
</tr>
</table>

12. 12
DATENBINDUNG NÄHER
BETRACHTET
Page  25
Data-Binding in Angular 1.x
Page  26
Model Model Directive

13. 13
Komponenten-Baum in Angular 2
Page  27
Komponente für App
Komponente (z. B. Liste)
Komponente
(z. B. Eintrag)
Komponente
(z. B. Eintrag)
Regeln für Property-Bindings
 Eine Komponente hängt nur von ihren eigenen Daten
(und indirekt von denen des Parents) ab
 Eine Komponente hängt nicht von
Daten ihrer Kinder ab!
 Abhängigkeits-Graph ist ein Baum
 Angular benötigt nur einen Digest um Baum mit GUI
abzugleichen
Page  28

14. 14
Property-Binding
Page  29
model
item item
{{ item.title }} {{ item.title }}
[http://victorsavkin.com/post/110170125256/change-detection-in-angular-2]
Weitere Performance-Verbesserungen
Page  30
Immutable
Data
Observables

15. 15
Immutable Objects and Performance
Page  31
oldObject == newObject

oldObject.a == newObject.a
&& oldObject.b == newObject.b …
Event-Bindings (One-Way, Bottom/Up)
Page  32
{{ item.title }} {{ item.title }}
Event-Handler
Event-Handler

16. 16
Event-Bindings (One-Way, Bottom/Up)
Kein Digest um Events zu versenden
Aber: Events können Daten ändern 
Property Binding
Page  33
Property- und Event-Bindings
Page  34
Property-Binding
ausführen
Event-Handler
ausführen
Ereignis tritt ein
App ist bereit
Alle Handler ausgeführt
Properties gebunden

17. 17
View
Page  35
<table [hidden]="flights.length == 0">
<tr *ngFor="#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>
Recap
Property-Binding: One-Way; Top/Down
Event-Binding: One-Way; Bottom/Up
Two-Way-Binding?
Two-Way = Property-Binding + Event-Binding
Page  36

18. 18
Syntax-Zucker für 2-Way-Binding
Page  39
<input [(ngModel)]="von">
<input bindon-ngModel="von">
DEMO: ANGULAR 2 MIT
TYPESCRIPT UND @CODE
Page  40

19. 19
MIGRATION
Page  41
Migration
Page  43
Angular
1.x
Angular
2

20. 20
Möglichkeiten
 Component Router: Parallelbetrieb
 NgUpgrade: Angular 2 und Angular 1.x mixen
 Angular 1.5: Komponenten in Angular 1
 NgForward: AngularJS 1.x im Angular-2-Stil
 Sinnvoll: Vorbereitung durch Einsatz von modernen
AngularJS 1.x-Code vorbereiten: EcmaScript 6,
TypeScript, Dekoratoren, Controller-As
Page  44
[https://github.com/angular/ngUpgrade]
Ein Blick auf ngUpgrade
Page  45
FlugCard
FlugSvc
PassagierCard
PassagierSvc
FlugSuchen PassagierSuchen
Anwendung1
1
1
1
2
2
2

21. 21
Fazit
 Angular: SPA-Framework mit großer Verbreitung
 Angular 2 ist Neuimplementierung
 Fokus: Komponenten, Performance, Modern Web
 Komponenten: Wartbarkeit, Wiederverwendbarkeit
 TypeScript, ES6: Wartbarkeit
 Datenbindungskonzept: Performance
 DI: Testbarkeit und Austauschbarkeit
 Flexibles Rendering
 Parallelbetrieb von Version 1 und 2
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Kontakt