Embed Size (px)
Citation preview
1
Clients für alle Plattformen mit Angular 2, TypeScript und Visual Studio Code
Manfred Steyer
ManfredSteyer
Side-Projects
Page 2
www.software-engineering-leadership.de
2
Inhalt
Warum AngularJS ?
Angular 2
DEMO
Fazit
Page 5
WARUM ANGULARJS?
Page 6
3
Plattformen und Usability
HTML + JavaScript
Single Page Application
High-Level Architektur
Page 8
Services
HTML/
JavaScript-Client
HTTP
Single Page Application (SPA)
4
Page 13
HTML + JavaScript => Komplexität
Page 14
HTML + JavaScript + jQuery => Komplexität
5
Page 15
Frameworks machen SPA beherrschbar
Community (April 2015)
Page 20
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
6
Google Analytics (April 2015)
Page 21
Job Trends (Indeed.com, April 2015)
Page 22
7
HERAUSFORDERUNGEN IN ANGULARJS 1.X
Page 34
Herausforderungen in AngularJS 1.x
Page 35
Performance Nachvollziehbarkeit Änderungsverfolgung
Use-Case: Anwendungen
Zusammenspiel mit anderen Bibliotheken
8
ANGULAR 2
Page 36
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 37
9
Component Controller
Page 38
@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 39
<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>
10
View
Page 40
<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>
DEMO: ANGUALR 2 MIT TYPESCRIPT UND @CODE
Page 43
11
MIGRATION
Page 44
Migration
Page 46
Angular 1.x
Angular 2
12
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 47
[https://github.com/angular/ngUpgrade]
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 53
