Angular 2.0: Architektur und Konzepte für moderne JavaScript-Anwendungen
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
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) { [...] }
}
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