SlideShare ist ein Scribd-Unternehmen logo
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
Inhalt
Warum AngularJS ?
Angular 2
DEMO
Fazit
Page  5
WARUM ANGULARJS?
Page  6
3
Plattformen und Usability
HTML + JavaScript
Single Page Application
High-Level Architektur
Page  8
Services
HTML/
JavaScript-Client
HTTP
Single Page Application (SPA)
4
Page  13
HTML + JavaScript => Komplexität
Page  14
HTML + JavaScript + jQuery => Komplexität
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
Google Analytics (April 2015)
Page  21
Job Trends (Indeed.com, April 2015)
Page  22
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
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
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
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
MIGRATION
Page  44
Migration
Page  46
Angular
1.x
Angular
2
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
[mail] manfred.steyer@SOFTWAREarchitekt.at
[web] SOFTWAREarchitekt.at
[twitter] ManfredSteyer
Kontakt

Weitere ähnliche Inhalte

Andere mochten auch

Class1
Class1Class1
Cebu CIA パンフレッド。フィリピン留学ナビ・セブ留学ナビ
Cebu CIA パンフレッド。フィリピン留学ナビ・セブ留学ナビCebu CIA パンフレッド。フィリピン留学ナビ・セブ留学ナビ
Cebu CIA パンフレッド。フィリピン留学ナビ・セブ留学ナビ
WEB制作仲間
 
Darren Smart Resume
Darren Smart ResumeDarren Smart Resume
Darren Smart Resume
Darren Smart
 
The river vasind
The river vasindThe river vasind
The river vasind
9004444700
 
El aprendizaje para era digital
El aprendizaje para era digitalEl aprendizaje para era digital
El aprendizaje para era digital
Jaime HUisa
 
Opplæringsslide navigering
Opplæringsslide   navigeringOpplæringsslide   navigering
Opplæringsslide navigering
BABED07
 
Kurs i facebook og instagram
Kurs i facebook og instagramKurs i facebook og instagram
Kurs i facebook og instagram
Tormod Sperstad
 
MSW Interactive Designs Culture Book
MSW Interactive Designs Culture BookMSW Interactive Designs Culture Book
MSW Interactive Designs Culture Book
MSW Interactive Designs LLC
 
P2 c share
P2 c shareP2 c share
방송기자협회 - 마법을 공부하기 시작했습니다
방송기자협회 - 마법을 공부하기 시작했습니다방송기자협회 - 마법을 공부하기 시작했습니다
방송기자협회 - 마법을 공부하기 시작했습니다
Han Woo PARK
 
창조경제 정부 3.0 플랫폼
창조경제 정부 3.0 플랫폼창조경제 정부 3.0 플랫폼
창조경제 정부 3.0 플랫폼
Han Woo PARK
 
Blitzkrieg Quiz - FMS Delhi
Blitzkrieg Quiz - FMS DelhiBlitzkrieg Quiz - FMS Delhi
Blitzkrieg Quiz - FMS Delhi
Gursheel Sahni
 
FreeSWITCH Monitoring
FreeSWITCH MonitoringFreeSWITCH Monitoring
FreeSWITCH Monitoring
Moises Silva
 

Andere mochten auch (13)

Class1
Class1Class1
Class1
 
Cebu CIA パンフレッド。フィリピン留学ナビ・セブ留学ナビ
Cebu CIA パンフレッド。フィリピン留学ナビ・セブ留学ナビCebu CIA パンフレッド。フィリピン留学ナビ・セブ留学ナビ
Cebu CIA パンフレッド。フィリピン留学ナビ・セブ留学ナビ
 
Darren Smart Resume
Darren Smart ResumeDarren Smart Resume
Darren Smart Resume
 
The river vasind
The river vasindThe river vasind
The river vasind
 
El aprendizaje para era digital
El aprendizaje para era digitalEl aprendizaje para era digital
El aprendizaje para era digital
 
Opplæringsslide navigering
Opplæringsslide   navigeringOpplæringsslide   navigering
Opplæringsslide navigering
 
Kurs i facebook og instagram
Kurs i facebook og instagramKurs i facebook og instagram
Kurs i facebook og instagram
 
MSW Interactive Designs Culture Book
MSW Interactive Designs Culture BookMSW Interactive Designs Culture Book
MSW Interactive Designs Culture Book
 
P2 c share
P2 c shareP2 c share
P2 c share
 
방송기자협회 - 마법을 공부하기 시작했습니다
방송기자협회 - 마법을 공부하기 시작했습니다방송기자협회 - 마법을 공부하기 시작했습니다
방송기자협회 - 마법을 공부하기 시작했습니다
 
창조경제 정부 3.0 플랫폼
창조경제 정부 3.0 플랫폼창조경제 정부 3.0 플랫폼
창조경제 정부 3.0 플랫폼
 
Blitzkrieg Quiz - FMS Delhi
Blitzkrieg Quiz - FMS DelhiBlitzkrieg Quiz - FMS Delhi
Blitzkrieg Quiz - FMS Delhi
 
FreeSWITCH Monitoring
FreeSWITCH MonitoringFreeSWITCH Monitoring
FreeSWITCH Monitoring
 

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

Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2
Manfred Steyer
 
Angular 2 Slides
Angular 2 SlidesAngular 2 Slides
Angular 2 Slides
Manfred Steyer
 
Angular 2: Neuerungen und Migration
Angular 2: Neuerungen und MigrationAngular 2: Neuerungen und Migration
Angular 2: Neuerungen und Migration
Manfred Steyer
 
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1
Manfred Steyer
 
Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015
Manfred Steyer
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
Manfred Steyer
 
Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100
Yvette Teiken
 
Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1
Manfred Steyer
 
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtetAngular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Manfred Steyer
 
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2
Manfred Steyer
 
Der neue Component Router für Angular 2
Der neue Component Router für Angular 2Der neue Component Router für Angular 2
Der neue Component Router für Angular 2
Manfred Steyer
 
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
Marc Müller
 
Angular2
Angular2Angular2
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungAndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
Eduard Hildebrandt
 
Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1
Manfred Steyer
 
Web APIs mit ASP.NET Core MVC 1
Web APIs mit ASP.NET Core MVC 1Web APIs mit ASP.NET Core MVC 1
Web APIs mit ASP.NET Core MVC 1
Manfred Steyer
 
Präsentation webservices
Präsentation webservicesPräsentation webservices
Präsentation webservices
xxtesaxx
 
DWX 2016 - Monitoring 2.0 - Monitoring 2.0: Alles im Lot?
DWX 2016 - Monitoring 2.0 - Monitoring 2.0: Alles im Lot?DWX 2016 - Monitoring 2.0 - Monitoring 2.0: Alles im Lot?
DWX 2016 - Monitoring 2.0 - Monitoring 2.0: Alles im Lot?
Marc Müller
 
Connecting Android - Externe Hardware mit dem grünen Roboter verbinden
Connecting Android - Externe Hardware mit dem grünen Roboter verbindenConnecting Android - Externe Hardware mit dem grünen Roboter verbinden
Connecting Android - Externe Hardware mit dem grünen Roboter verbinden
inovex GmbH
 
Connecting Android - Externe Hardware mit dem grünen Roboter verbinden
Connecting Android - Externe Hardware mit dem grünen Roboter verbindenConnecting Android - Externe Hardware mit dem grünen Roboter verbinden
Connecting Android - Externe Hardware mit dem grünen Roboter verbinden
inovex GmbH
 

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

Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2
 
Angular 2 Slides
Angular 2 SlidesAngular 2 Slides
Angular 2 Slides
 
Angular 2: Neuerungen und Migration
Angular 2: Neuerungen und MigrationAngular 2: Neuerungen und Migration
Angular 2: Neuerungen und Migration
 
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1
 
Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
 
Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100
 
Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1
 
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtetAngular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
 
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2
 
Der neue Component Router für Angular 2
Der neue Component Router für Angular 2Der neue Component Router für Angular 2
Der neue Component Router für Angular 2
 
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
 
Angular2
Angular2Angular2
Angular2
 
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungAndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
 
Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1
 
Web APIs mit ASP.NET Core MVC 1
Web APIs mit ASP.NET Core MVC 1Web APIs mit ASP.NET Core MVC 1
Web APIs mit ASP.NET Core MVC 1
 
Präsentation webservices
Präsentation webservicesPräsentation webservices
Präsentation webservices
 
DWX 2016 - Monitoring 2.0 - Monitoring 2.0: Alles im Lot?
DWX 2016 - Monitoring 2.0 - Monitoring 2.0: Alles im Lot?DWX 2016 - Monitoring 2.0 - Monitoring 2.0: Alles im Lot?
DWX 2016 - Monitoring 2.0 - Monitoring 2.0: Alles im Lot?
 
Connecting Android - Externe Hardware mit dem grünen Roboter verbinden
Connecting Android - Externe Hardware mit dem grünen Roboter verbindenConnecting Android - Externe Hardware mit dem grünen Roboter verbinden
Connecting Android - Externe Hardware mit dem grünen Roboter verbinden
 
Connecting Android - Externe Hardware mit dem grünen Roboter verbinden
Connecting Android - Externe Hardware mit dem grünen Roboter verbindenConnecting Android - Externe Hardware mit dem grünen Roboter verbinden
Connecting Android - Externe Hardware mit dem grünen Roboter verbinden
 

Mehr von Manfred Steyer

Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/storeSingle Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Manfred Steyer
 
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Manfred Steyer
 
Datengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity FrameworkDatengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity Framework
Manfred Steyer
 
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Manfred Steyer
 
The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")
Manfred Steyer
 
Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2
Manfred Steyer
 
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId ConnectModern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Manfred Steyer
 
Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2
Manfred Steyer
 
Der neueste neue Router (Version 3) für Angular 2
Der neueste neue Router (Version 3) für Angular 2Der neueste neue Router (Version 3) für Angular 2
Der neueste neue Router (Version 3) für Angular 2
Manfred Steyer
 
Webpack
WebpackWebpack
ASP.NET Core 1 for MVC- and WebAPI-Devs
ASP.NET Core 1 for MVC- and WebAPI-DevsASP.NET Core 1 for MVC- and WebAPI-Devs
ASP.NET Core 1 for MVC- and WebAPI-Devs
Manfred Steyer
 
EF Core 1: News features and changes
EF Core 1: News features and changesEF Core 1: News features and changes
EF Core 1: News features and changes
Manfred Steyer
 
Angular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 LondonAngular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 London
Manfred Steyer
 
Angular 2 - SSD 2016 London
Angular 2 - SSD 2016 LondonAngular 2 - SSD 2016 London
Angular 2 - SSD 2016 London
Manfred Steyer
 
ASP.NET Web API Deep Dive - SSD 2016 London
ASP.NET Web API Deep Dive - SSD 2016 LondonASP.NET Web API Deep Dive - SSD 2016 London
ASP.NET Web API Deep Dive - SSD 2016 London
Manfred Steyer
 
Wiederverwendbare Komponenten mit Angular 2.0 – Deep Dive
Wiederverwendbare Komponenten mit Angular 2.0 – Deep DiveWiederverwendbare Komponenten mit Angular 2.0 – Deep Dive
Wiederverwendbare Komponenten mit Angular 2.0 – Deep Dive
Manfred Steyer
 
Angular 2: Routing
Angular 2: RoutingAngular 2: Routing
Angular 2: Routing
Manfred Steyer
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.
Manfred Steyer
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.
Manfred Steyer
 
Komponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep DiveKomponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep Dive
Manfred Steyer
 

Mehr von Manfred Steyer (20)

Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/storeSingle Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
 
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
 
Datengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity FrameworkDatengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity Framework
 
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
 
The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")
 
Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2
 
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId ConnectModern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
 
Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2
 
Der neueste neue Router (Version 3) für Angular 2
Der neueste neue Router (Version 3) für Angular 2Der neueste neue Router (Version 3) für Angular 2
Der neueste neue Router (Version 3) für Angular 2
 
Webpack
WebpackWebpack
Webpack
 
ASP.NET Core 1 for MVC- and WebAPI-Devs
ASP.NET Core 1 for MVC- and WebAPI-DevsASP.NET Core 1 for MVC- and WebAPI-Devs
ASP.NET Core 1 for MVC- and WebAPI-Devs
 
EF Core 1: News features and changes
EF Core 1: News features and changesEF Core 1: News features and changes
EF Core 1: News features and changes
 
Angular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 LondonAngular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 London
 
Angular 2 - SSD 2016 London
Angular 2 - SSD 2016 LondonAngular 2 - SSD 2016 London
Angular 2 - SSD 2016 London
 
ASP.NET Web API Deep Dive - SSD 2016 London
ASP.NET Web API Deep Dive - SSD 2016 LondonASP.NET Web API Deep Dive - SSD 2016 London
ASP.NET Web API Deep Dive - SSD 2016 London
 
Wiederverwendbare Komponenten mit Angular 2.0 – Deep Dive
Wiederverwendbare Komponenten mit Angular 2.0 – Deep DiveWiederverwendbare Komponenten mit Angular 2.0 – Deep Dive
Wiederverwendbare Komponenten mit Angular 2.0 – Deep Dive
 
Angular 2: Routing
Angular 2: RoutingAngular 2: Routing
Angular 2: Routing
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.
 
Komponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep DiveKomponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep Dive
 

Ü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