Contenu connexe Similaire à Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015 (20) Plus de Manfred Steyer (20) Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 20151. 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
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
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
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