Angular 2 Überblick Oktober 2015
11
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
-
Upload
manfred-steyer -
Category
Internet
-
view
720 -
download
2
Transcript of Angular 2 Überblick Oktober 2015
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
Inhalt
Warum AngularJS ?
Angular 2
DEMO
Migration
Fazit
Page 4
WARUM ANGULARJS?
Page 5
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
Google Analytics (April 2015)
Page 20
Job Trends (Indeed.com, April 2015)
Page 21
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
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
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
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
DEMO: ANGUALR 2 MIT TYPESCRIPT UND @CODE
Page 42
MIGRATION
Page 43
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
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] [email protected]
[blog] www.softwarearchitekt.at
[twitter] ManfredSteyer
Kontakt
www.software-engineering-leadership.de
