Unterlagen meines Angular-2-Überblicks (Alpha 44) aus dem Oktober 2015

1. 1
Angular 2.0:
Ausblick und Migrationspfade
Manfred Steyer
ManfredSteyer
Aktuelles Buch
Folie 2
O'Reilly:
AngularJS: Moderne
Webanwendungen und Single Page
Applications mit JavaScript
Steyer, Softic

2. 2
Inhalt
Warum AngularJS ?
Angular 2
DEMO
Migration
Fazit
Page  4
WARUM ANGULARJS?
Page  5

3. 3
Plattformen und Usability
HTML + JavaScript
Single Page Application
Community (April 2015)
Page  19
AngularJS EmberJS Durandal Aurelia
Stars 37.318 13.339 1.534 2.347
Forks 15.494 2.851 357 97
Contributers 1.215 474 69 8
Zahlen aus Core-Projekten übernommen

4. 4
Google Analytics (April 2015)
Page  20
Job Trends (Indeed.com, April 2015)
Page  21

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

6. 6
ANGULAR 2
Page  35
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  36

7. 7
Component Controller
Page  37
@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) { [...] }
}
Kann künftig großteils
entfallen
View
Page  38
<input [(ng-model)]="von">
[…]
<table [hidden]="fluege.length == 0">
<tr *ng-for="#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>

8. 8
View
Page  39
<input bindon-ng-model="von">
[…]
<table bind-hidden="fluege.length == 0">
<tr template="ng-for: 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>
Datenbindung
 Orientierung an Flux-Muster aus React --> Performance
 Performancegewinn durch Immutable Data
und Observables
 Performance: Im Bereich von/ besser als ReactJS
 Property-Binding: One-Way-Binding, Top/Down
 Event-Binding: Bottom/Up
 Two-Way-Binding: Property-Binding + Event-Binding
Page  40

9. 9
DEMO: ANGUALR 2 MIT
TYPESCRIPT UND @CODE
Page  42
MIGRATION
Page  43

10. 10
Migration
Page  45
Angular
1.x
Angular
2
Möglichkeiten
 Component Router: Parallelbetrieb
 Angular 1.5: Komponenten in Angular 1
 NgUpgrade: Angular 2 und Angular 1.x mixen
 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  46
[https://github.com/angular/ngUpgrade]

11. 11
Fazit
 Angular: SPA-Framework mit großer Verbreitung
 Angular 2 ist Neuimplementierung mit Fokus auf
Performance, Komponenten und modernen Standards
 Parallelbetrieb, u. a. mit neuem Router
 Vorbereitung durch modernen Angular 1.x-Code,
Neuer Component Router, ES 6/ TypeScript
Page  52
[mail] manfred.steyer@softwarearchitekt.at
[blog] www.softwarearchitekt.at
[twitter] ManfredSteyer
Kontakt
www.software-engineering-leadership.de