net summit 2016 münchen: angular 2 mit typescript
TRANSCRIPT
1
Angular 2 mit TypeScript:Überblick
Manfred Steyer
Über mich …
Manfred Steyer
SOFTWAREarchitekt.at
Trainer & Berater
Angular am Client
.NET am Server
Page 3
2
Inhalt
Warum Angular ?
Überblick zu Angular 2
DEMO
Fazit
Page 6
WARUM ANGULAR?
Page 7
3
Plattformen und Usability
HTML + JavaScript
High-Level Architektur
Page 9
Services
HTML/
JavaScript-Client
HTTP
Single Page Application (SPA)
4
AngularJS
Page 13
Community Verbreitung
Eco-System
ANGULAR 2
Page 24
5
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 25
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 26
6
Component Controller
Page 27
@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) { [...] }
}
View
Page 28
<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>
7
View
Page 29
<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>
DEMO
Page 30
8
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
SOFTWAREarchitekt.at
ManfredSteyer
Contact