1
Angular 2.0:
Ausblick und Migrationspfade
Manfred Steyer
ManfredSteyer
Aktuelles Buch
Folie 2
O'Reilly:
AngularJS: Mode...
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 D...
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 Nachvollziehbarkei...
6
ANGULAR 2
Page  35
Was ist Angular 2
 Neuimplementierung
 Performance
 Komponenten (Web Components)
 TypeScript/ ES...
7
Component Controller
Page  37
@Component({
selector: 'flug-suchen'
})
@View({
templateUrl: 'flug-suchen.html',
directiv...
8
View
Page  39
<input bindon-ng-model="von">
[…]
<table bind-hidden="fluege.length == 0">
<tr template="ng-for: var flug...
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 ...
11
Fazit
 Angular: SPA-Framework mit großer Verbreitung
 Angular 2 ist Neuimplementierung mit Fokus auf
Performance, Kom...
Nächste SlideShare
Wird geladen in …5
×

Angular 2 Überblick Oktober 2015

772 Aufrufe

Veröffentlicht am

Unterlagen meines Angular-2-Überblicks (Alpha 44) aus dem Oktober 2015

Veröffentlicht in: Internet
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
772
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
90
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Angular 2 Überblick Oktober 2015

  1. 1. 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. 2. 2 Inhalt Warum AngularJS ? Angular 2 DEMO Migration Fazit Page  4 WARUM ANGULARJS? Page  5
  3. 3. 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. 4. 4 Google Analytics (April 2015) Page  20 Job Trends (Indeed.com, April 2015) Page  21
  5. 5. 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. 6. 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. 7. 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. 8. 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. 9. 9 DEMO: ANGUALR 2 MIT TYPESCRIPT UND @CODE Page  42 MIGRATION Page  43
  10. 10. 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. 11. 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] manfred.steyer@softwarearchitekt.at [blog] www.softwarearchitekt.at [twitter] ManfredSteyer Kontakt www.software-engineering-leadership.de

×