Überblick zu MVC6 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015

1. 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. 2
Inhalt
Warum AngularJS ?
Angular 2
DEMO
Fazit
Page  5
WARUM ANGULARJS?
Page  6

3. 3
Plattformen und Usability
HTML + JavaScript
Single Page Application
High-Level Architektur
Page  8
Services
HTML/
JavaScript-Client
HTTP
Single Page Application (SPA)

4. 4
Page  13
HTML + JavaScript => Komplexität
Page  14
HTML + JavaScript + jQuery => Komplexität

5. 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. 6
Google Analytics (April 2015)
Page  21
Job Trends (Indeed.com, April 2015)
Page  22

7. 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. 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. 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. 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. 11
MIGRATION
Page  44
Migration
Page  46
Angular
1.x
Angular
2

12. 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

13. 13
[mail] manfred.steyer@SOFTWAREarchitekt.at
[web] SOFTWAREarchitekt.at
[twitter] ManfredSteyer
Kontakt