Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
2 gefällt mir•545 aufrufe
Das Dokument behandelt die Entwicklung von Single Page Applications (SPAs) mit Angular 2, TypeScript und Visual Studio Code. Es stellt die Vorteile von Angular gegenüber anderen Frameworks, die Herausforderungen in Angular 1.x sowie die neue Implementierung von Angular 2 mit einem Fokus auf Performance, modularer Architektur und Komponenten dar. Abschließend wird auf die Migration von Angular 1.x zu Angular 2 eingegangen und die Notwendigkeit einer Vorbereitung durch modernen Code betont.
![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>](https://image.slidesharecdn.com/steyerangular2-151112090413-lva1-app6891/85/Uberblick-zu-Angular2-auf-DevCon-der-Fox-Pro-Usergroup-in-Frankfurt-Nov-2015-9-320.jpg)
![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](https://image.slidesharecdn.com/steyerangular2-151112090413-lva1-app6891/85/Uberblick-zu-Angular2-auf-DevCon-der-Fox-Pro-Usergroup-in-Frankfurt-Nov-2015-10-320.jpg)
![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](https://image.slidesharecdn.com/steyerangular2-151112090413-lva1-app6891/85/Uberblick-zu-Angular2-auf-DevCon-der-Fox-Pro-Usergroup-in-Frankfurt-Nov-2015-12-320.jpg)
![13
[mail] manfred.steyer@SOFTWAREarchitekt.at
[web] SOFTWAREarchitekt.at
[twitter] ManfredSteyer
Kontakt](https://image.slidesharecdn.com/steyerangular2-151112090413-lva1-app6891/85/Uberblick-zu-Angular2-auf-DevCon-der-Fox-Pro-Usergroup-in-Frankfurt-Nov-2015-13-320.jpg)
Überblick zu Angular2 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] [email protected] [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer Kontakt