Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

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

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 13 Anzeige

Weitere Verwandte Inhalte

Ähnlich wie Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015 (20)

Anzeige

Weitere von Manfred Steyer (20)

Aktuellste (20)

Anzeige

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

  1. 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. 2 Inhalt Warum AngularJS ? Angular 2 DEMO Fazit Page  5 WARUM ANGULARJS? Page  6
  3. 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. 4 Page  13 HTML + JavaScript => Komplexität Page  14 HTML + JavaScript + jQuery => Komplexität
  5. 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. 6 Google Analytics (April 2015) Page  21 Job Trends (Indeed.com, April 2015) Page  22
  7. 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. 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. 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. 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. 11 MIGRATION Page  44 Migration Page  46 Angular 1.x Angular 2
  12. 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. 13 [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer Kontakt

×