SlideShare ist ein Scribd-Unternehmen logo
1
Das „neue“ JavaScript:
EcmaScript 2015+ heute schon mit
TypeScript nutzen
Manfred Steyer
ManfredSteyer
Über mich …
 Manfred Steyer
 SOFTWAREarchitekt.at
 Trainer & Berater
 Angular am Client
 .NET am Server
Page  2
2
Ziel
Überblick zur Nutzung von EcmaScript 6+
mit TypeScript anhand eines Beispiels
Überblick zu Angular 2
Page  3
Inhalt
 Rückblick zu EcmaScript 5
 EcmaScript 6
 TypeScript
 Ambiente Deklarationen
 Dekoratoren
 Angular 2
 Fallbeispiel mit TypeScript und Angular 2
Page  4
3
Didaktik
Folien
Live-Coding
Übungsblatt im Nachgang
Page  5
ECMASCRIPT 5
Page  6
4
EcmaScript 5 == Basis für X-Plattform
Funktionen
Page  8
function calcPrice(flug) {
if (flug.freiePlaetze > 100) return 200;
return 300;
}
var flug = […];
var preis = calcPrice(flug);
5
Konstruktor-Funktionen
Page  9
function FlugSuchenVM() {
var that = this;
that.vonFilter = "Graz";
that.nachFilter = "Hamburg";
that.selectedFlug = null;
that.fluege = [];
that.message = "";
that.suchen = function() { … }
that.select = function() { … }
}
var vm = new FlugSuchenVM();
Namensräume
Page  10
function FlugSuchenVM() {
[…]
}
„Verschmutzt“ den globalen Namensraum.
6
Immediately-Invoked Function
Expression (IIFE)
Page  11
(function () {
function FlugSuchenVM() { […] }
})();
Revealing Module Pattern
Page  12
var myNamespace = {};
(function (myNamespace) {
function FlugSuchenVM() { […] }
var modulInternalStuff = […];
myNamespace.FlugSuchenVM = FlugSuchenVM;
})(myNamespace);
[…]
var vm = new myNamespace.FlugSuchenVM();
7
ECMASCRIPT 2015 ("ES6")
Page  13
ES 6
EcmaScript 2016 (ES 6)
Page  14
ES 5
8
Klassen
Page  15
// flug-suchen-vm.js
export class FlugSuchenVM {
constructor() {
this.vonFilter = "Graz";
this.nachFilter = "Hamburg";
}
suchen() { […] }
select() { […] }
}
var vm = new FlugSuchenVM();
Exportierte Elemente importieren
Page  16
// main.js
import { FlugSuchenVM } from 'flug-suchen-vm';
var vm = new FlugSuchenVM();
vm.suchen();
Relative Pfadangaben oder über Mapping definiert
9
Lambdas (Arrow-Functions)
Page  17
export class FlugSuchenVM {
fluege: Flug[];
search() {
var that = this;
fetch("http://www.angular.at/api/flug")
.then(function(response) {
return response.json();
})
.then(function(fluege) {
that.fluege = fluege;
});
}
}
Lambdas (Arrow-Functions)
Page  18
export class FlugSuchenVM {
fluege: Flug[];
search() {
var that = this;
fetch("http://www.angular.at/api/flug")
.then(function(response) {
return response.json();
})
.then(function(fluege) {
that.fluege = fluege;
});
}
}
10
Lambdas (Arrow-Functions)
Page  19
export class FlugSuchenVM {
fluege: Flug[];
search() {
fetch("http://www.angular.at/api/flug")
.then((response) => {
return response.json();
})
.then((fluege) => {
this.fluege = fluege;
});
}
}
EcmaScript 6 heute schon nutzen
Cross-Kompilieren zu ES5 („Transpilation“)
Populärer Transpiler: Babel
Page  23
11
Module laden via SystemJS
Page  25
<script src="path/system-polyfills.js"></script>
<script src="path/system.src.js"></script>
<script>
System.config({
packages: {
app: {
defaultExtension: 'js'
}
}
});
System.import('app/main').catch(function(err) {
console.error(err);
});
</script>
SystemJS beziehen
 NuGet
 npm:
 npm init -y
 npm install systemjs --save
Page  26
12
ÜBERBLICK ZU
TYPESCRIPT
Page  27
TypeScriptES 6
TypeScript
Page  28
ES 5
13
TypeScript
Page  30
export class FlugSuchenVM {
public vonFilter: string;
public nachFilter: string;
constructor() {
this.vonFilter = "Graz";
this.nachFilter = "Hamburg";
}
public suchen() { […] }
public select() { […] }
}
Datentypen
Page  31
number string boolean
Function Object any
Eigene
Kassen
Eigene
Interfaces
14
TypeScript heute nutzen
TypeScript-Compiler kompiliert TypeScript
wahlweise nach ES6, ES5 oder ES3
Page  32
Werkzeuge
tsc: TypeScript-Compiler
typings: Packet-Manager für Typ-
Deklarationen
SystemJS o. ä. zum Laden der Dateien
Page  33
15
Konfiguration via tsconfig.json
Page  34
{
"compilerOptions": {
"module": "system",
"target": "es5",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
DEMO:
TYPESCRIPT
Page  35
16
AMBIENTE
DEKLARATIONEN
Page  41
Ambiente Deklarationen
 Typangaben für bereits bestehende JavaScript-
Variablen
 Notwendig, um Typen für bestehende JavaScript-
Frameworks zu definieren
 Beispiele
Globale Variable angular bei AngularJS
Globale Variable $ bei jQuery
Page  42
17
Ambiente Deklarationen
Page  43
interface JQueryStatic {
get(url: string, callback: (data: string) => any);
}
declare var $: JQueryStatic;
$.get("http://mysite.org/divContent", function (data: string) {
…
} );
Ambiente Deklarationen
Zahlreiche Typings-Dateien (mit ambienten
Deklarationen) online
Page  44
18
Package-Manager 'typings'
npm init
npm install jquery
[npm install typings --global]
[typings init]
typings install jquery --ambient --save
Page  45
tsconfig.json
Page  46
{
"compilerOptions": {
"module": "system",
"target": "es5",
"sourceMap": true
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
19
DEMO
Page  47
DEKORATOREN
Page  48
20
Was sind Dekoratoren?
 Möglichkeit zum Annotieren von Quellcode-Elementen
 Können Metadaten festlegen
 Können dekorierte Elemente auch verändern/
austauschen
 Vorschlag für EcmaScript
 Werden bereits von Frameworks genutzt und von
Transpilern implementiert (de facto "Standard")
Page  49
Beispiel
Page  50
@DocuWithLabel("Repräsentiert einen Flug")
class Flug {
constructor(@Docu abflugort: string) {
this.abflugort = abflugort;
}
@Docu
abflugort: string;
@Docu
info(): string {
return this.abflugort + " - " + this.zielort;
}
}
21
In tsconfig.json aktivieren
Page  51
{
"compilerOptions": {
"module": "system",
"target": "es5",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},
"exclude": [
"node_modules"
]
}
Was kann dekoriert werden?
Klassen
Member
Argumente (vorerst nur TypeScript)
Page  52
22
Dekoratoren sind Funktionen
Page  53
@Docu
class Flug { […] }
class Flug { […] }
Flug= Docu(Flug) || Flug;
Dekoratoren sind Funktionen
Page  54
@DocuWithLabel("Repräsentiert einen Flug")
class Flug { […] }
class Flug { […] }
Flug = DocuWithLabel("Repräsentiert einen Flug")(Flug) || Flug;
23
Dekorator für Klassen
Page  55
function Docu(target) {
console.debug(target);
}
Dekorator für Member
Page  56
function Docu(target, key, descriptor) {
console.debug(target);
console.debug(key);
console.debug(descriptor);
console.debug("---");
}
24
Dekorator für Argumente (TypeScript)
Page  57
function Docu(target, key, descriptor) {
console.debug(target);
console.debug(key);
console.debug(descriptor);
console.debug("---");
}
Argumentposition (0, 1, … n)
Factory für Dekorator
Page  58
function DocuWithLabel(label) {
return function(target, key?, descriptor?) {
console.debug(label);
console.debug(target);
console.debug(key);
console.debug(descriptor);
console.debug("---");
}
}
25
DEMO
Page  59
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Contact

Weitere ähnliche Inhalte

Was ist angesagt?

Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Christian Janz
 
Konfigurationsmanagement in Drupal 8 & 9
Konfigurationsmanagement in Drupal 8 & 9Konfigurationsmanagement in Drupal 8 & 9
Konfigurationsmanagement in Drupal 8 & 9
TobiasZimmermann8
 
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 Slides
Angular 2 SlidesAngular 2 Slides
Angular 2 Slides
Manfred Steyer
 
Open icf (open identity connector framework) @ forgerock deutsch
Open icf (open identity connector framework) @ forgerock   deutschOpen icf (open identity connector framework) @ forgerock   deutsch
Open icf (open identity connector framework) @ forgerock deutsch
Hanns Nolan
 
Angular 2.0: Architektur und Konzepte für moderne JavaScript-Anwendungen
Angular 2.0: Architektur und Konzepte für moderne JavaScript-AnwendungenAngular 2.0: Architektur und Konzepte für moderne JavaScript-Anwendungen
Angular 2.0: Architektur und Konzepte für moderne JavaScript-Anwendungen
Manfred Steyer
 
OSMC 2012 | Automatische Konfiguration von Nagios/Icinga mit Agordamon by Chr...
OSMC 2012 | Automatische Konfiguration von Nagios/Icinga mit Agordamon by Chr...OSMC 2012 | Automatische Konfiguration von Nagios/Icinga mit Agordamon by Chr...
OSMC 2012 | Automatische Konfiguration von Nagios/Icinga mit Agordamon by Chr...
NETWAYS
 
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
Torben Knerr
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
Christian Keuerleber
 
Zuehlke Camp 2017: Chef vs Ansible session
Zuehlke Camp 2017: Chef vs Ansible sessionZuehlke Camp 2017: Chef vs Ansible session
Zuehlke Camp 2017: Chef vs Ansible session
Torben Knerr
 
Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100
Yvette Teiken
 
Angular 2 Überblick Oktober 2015
Angular 2 Überblick Oktober 2015Angular 2 Überblick Oktober 2015
Angular 2 Überblick Oktober 2015
Manfred Steyer
 

Was ist angesagt? (12)

Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
 
Konfigurationsmanagement in Drupal 8 & 9
Konfigurationsmanagement in Drupal 8 & 9Konfigurationsmanagement in Drupal 8 & 9
Konfigurationsmanagement in Drupal 8 & 9
 
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 Slides
Angular 2 SlidesAngular 2 Slides
Angular 2 Slides
 
Open icf (open identity connector framework) @ forgerock deutsch
Open icf (open identity connector framework) @ forgerock   deutschOpen icf (open identity connector framework) @ forgerock   deutsch
Open icf (open identity connector framework) @ forgerock deutsch
 
Angular 2.0: Architektur und Konzepte für moderne JavaScript-Anwendungen
Angular 2.0: Architektur und Konzepte für moderne JavaScript-AnwendungenAngular 2.0: Architektur und Konzepte für moderne JavaScript-Anwendungen
Angular 2.0: Architektur und Konzepte für moderne JavaScript-Anwendungen
 
OSMC 2012 | Automatische Konfiguration von Nagios/Icinga mit Agordamon by Chr...
OSMC 2012 | Automatische Konfiguration von Nagios/Icinga mit Agordamon by Chr...OSMC 2012 | Automatische Konfiguration von Nagios/Icinga mit Agordamon by Chr...
OSMC 2012 | Automatische Konfiguration von Nagios/Icinga mit Agordamon by Chr...
 
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
Automatisierte Entwickler VMs -- "works on my machine" zählt nicht mehr ;-)
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
 
Zuehlke Camp 2017: Chef vs Ansible session
Zuehlke Camp 2017: Chef vs Ansible sessionZuehlke Camp 2017: Chef vs Ansible session
Zuehlke Camp 2017: Chef vs Ansible session
 
Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100
 
Angular 2 Überblick Oktober 2015
Angular 2 Überblick Oktober 2015Angular 2 Überblick Oktober 2015
Angular 2 Überblick Oktober 2015
 

Andere mochten auch

Neslihan M 2Frans
 Neslihan M 2Frans Neslihan M 2Frans
Neslihan M 2Frans
edmondvincent
 
Idea mapping
Idea mappingIdea mapping
Idea mapping
Tubamubashira
 
SNORT
SNORTSNORT
Metal gear solid sound analysis
Metal gear solid sound analysisMetal gear solid sound analysis
Metal gear solid sound analysis
Lewis Brierley
 
5 year plan
5 year plan5 year plan
5 year plan
vanmeurs
 
ESTUDIO DEL CASO
ESTUDIO DEL CASOESTUDIO DEL CASO
ESTUDIO DEL CASO
andres-felipec
 
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
 
Fortuna Marina Enclave | Malad West | 9004603086
Fortuna Marina Enclave | Malad West | 9004603086Fortuna Marina Enclave | Malad West | 9004603086
Fortuna Marina Enclave | Malad West | 9004603086
Sarestates Realty Advisors Pvt Ltd
 
CV Competences and knowledge
CV  Competences and knowledgeCV  Competences and knowledge
CV Competences and knowledge
Linda Søndergaard
 
презентация Microsoft power point
презентация Microsoft power pointпрезентация Microsoft power point
презентация Microsoft power point
nadiyapavlivna
 
Taller y feria de ciencias
Taller y feria de ciencias Taller y feria de ciencias
Taller y feria de ciencias
jacquiyeuge5
 
Herramientas CAD - Sistemas Operativos en la nube
Herramientas CAD - Sistemas Operativos en la nubeHerramientas CAD - Sistemas Operativos en la nube
Herramientas CAD - Sistemas Operativos en la nube
Ricardo Chero Nieto
 
Sport Facilities
Sport FacilitiesSport Facilities
Sport Facilities
guestd9071f
 
"Tell me something which is not there in your Resume"
"Tell me something which is not there in your Resume" "Tell me something which is not there in your Resume"
"Tell me something which is not there in your Resume"
Siniša Prvanov
 

Andere mochten auch (14)

Neslihan M 2Frans
 Neslihan M 2Frans Neslihan M 2Frans
Neslihan M 2Frans
 
Idea mapping
Idea mappingIdea mapping
Idea mapping
 
SNORT
SNORTSNORT
SNORT
 
Metal gear solid sound analysis
Metal gear solid sound analysisMetal gear solid sound analysis
Metal gear solid sound analysis
 
5 year plan
5 year plan5 year plan
5 year plan
 
ESTUDIO DEL CASO
ESTUDIO DEL CASOESTUDIO DEL CASO
ESTUDIO DEL CASO
 
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")
 
Fortuna Marina Enclave | Malad West | 9004603086
Fortuna Marina Enclave | Malad West | 9004603086Fortuna Marina Enclave | Malad West | 9004603086
Fortuna Marina Enclave | Malad West | 9004603086
 
CV Competences and knowledge
CV  Competences and knowledgeCV  Competences and knowledge
CV Competences and knowledge
 
презентация Microsoft power point
презентация Microsoft power pointпрезентация Microsoft power point
презентация Microsoft power point
 
Taller y feria de ciencias
Taller y feria de ciencias Taller y feria de ciencias
Taller y feria de ciencias
 
Herramientas CAD - Sistemas Operativos en la nube
Herramientas CAD - Sistemas Operativos en la nubeHerramientas CAD - Sistemas Operativos en la nube
Herramientas CAD - Sistemas Operativos en la nube
 
Sport Facilities
Sport FacilitiesSport Facilities
Sport Facilities
 
"Tell me something which is not there in your Resume"
"Tell me something which is not there in your Resume" "Tell me something which is not there in your Resume"
"Tell me something which is not there in your Resume"
 

Ähnlich wie .NET Summit 2016 München: EcmaScript 2015+ with TypeScript

TypeScript
TypeScriptTypeScript
TypeScript
Jens Siebert
 
.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
 
Go - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare SystemeGo - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare Systeme
Frank Müller
 
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
 
Testing tools
Testing toolsTesting tools
Testing tools
Sebastian Springer
 
Service Mesh mit Istio und MicroProfile - eine harmonische Kombination?
Service Mesh mit Istio und MicroProfile - eine harmonische Kombination?Service Mesh mit Istio und MicroProfile - eine harmonische Kombination?
Service Mesh mit Istio und MicroProfile - eine harmonische Kombination?
Michael Hofmann
 
TypeScript
TypeScriptTypeScript
TypeScript
Jens Siebert
 
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
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit Rust
Jens Siebert
 
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
 
JAX 2024: Go in der Praxis einsetzen
JAX 2024: Go in der Praxis einsetzenJAX 2024: Go in der Praxis einsetzen
JAX 2024: Go in der Praxis einsetzen
Jan Stamer
 
Einführung in die funktionale Programmierung
Einführung in die funktionale ProgrammierungEinführung in die funktionale Programmierung
Einführung in die funktionale Programmierung
Digicomp Academy AG
 
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser machtWarum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Sebastian Springer
 
Prototype 1.7
Prototype 1.7Prototype 1.7
Prototype 1.7
msebel
 
Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht Skriptsprachen
A. LE
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
Sebastian Springer
 
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan EngelApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
OPITZ CONSULTING Deutschland
 
Was bringt Angular 2?
Was bringt Angular 2?Was bringt Angular 2?
Was bringt Angular 2?
Manfred Steyer
 
Informatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und GrailsInformatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und Grails
schmichri
 
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
 

Ähnlich wie .NET Summit 2016 München: EcmaScript 2015+ with TypeScript (20)

TypeScript
TypeScriptTypeScript
TypeScript
 
.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
 
Go - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare SystemeGo - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare Systeme
 
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?
 
Testing tools
Testing toolsTesting tools
Testing tools
 
Service Mesh mit Istio und MicroProfile - eine harmonische Kombination?
Service Mesh mit Istio und MicroProfile - eine harmonische Kombination?Service Mesh mit Istio und MicroProfile - eine harmonische Kombination?
Service Mesh mit Istio und MicroProfile - eine harmonische Kombination?
 
TypeScript
TypeScriptTypeScript
TypeScript
 
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
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit Rust
 
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?
 
JAX 2024: Go in der Praxis einsetzen
JAX 2024: Go in der Praxis einsetzenJAX 2024: Go in der Praxis einsetzen
JAX 2024: Go in der Praxis einsetzen
 
Einführung in die funktionale Programmierung
Einführung in die funktionale ProgrammierungEinführung in die funktionale Programmierung
Einführung in die funktionale Programmierung
 
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser machtWarum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser macht
 
Prototype 1.7
Prototype 1.7Prototype 1.7
Prototype 1.7
 
Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht Skriptsprachen
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
 
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan EngelApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
 
Was bringt Angular 2?
Was bringt Angular 2?Was bringt Angular 2?
Was bringt Angular 2?
 
Informatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und GrailsInformatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und Grails
 
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
 

Mehr von 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
 
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
 
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
 
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
 
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
 

Mehr von Manfred Steyer (20)

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
 
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
 
Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2
 
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
 
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
 

.NET Summit 2016 München: EcmaScript 2015+ with TypeScript

  • 1. 1 Das „neue“ JavaScript: EcmaScript 2015+ heute schon mit TypeScript nutzen Manfred Steyer ManfredSteyer Über mich …  Manfred Steyer  SOFTWAREarchitekt.at  Trainer & Berater  Angular am Client  .NET am Server Page  2
  • 2. 2 Ziel Überblick zur Nutzung von EcmaScript 6+ mit TypeScript anhand eines Beispiels Überblick zu Angular 2 Page  3 Inhalt  Rückblick zu EcmaScript 5  EcmaScript 6  TypeScript  Ambiente Deklarationen  Dekoratoren  Angular 2  Fallbeispiel mit TypeScript und Angular 2 Page  4
  • 4. 4 EcmaScript 5 == Basis für X-Plattform Funktionen Page  8 function calcPrice(flug) { if (flug.freiePlaetze > 100) return 200; return 300; } var flug = […]; var preis = calcPrice(flug);
  • 5. 5 Konstruktor-Funktionen Page  9 function FlugSuchenVM() { var that = this; that.vonFilter = "Graz"; that.nachFilter = "Hamburg"; that.selectedFlug = null; that.fluege = []; that.message = ""; that.suchen = function() { … } that.select = function() { … } } var vm = new FlugSuchenVM(); Namensräume Page  10 function FlugSuchenVM() { […] } „Verschmutzt“ den globalen Namensraum.
  • 6. 6 Immediately-Invoked Function Expression (IIFE) Page  11 (function () { function FlugSuchenVM() { […] } })(); Revealing Module Pattern Page  12 var myNamespace = {}; (function (myNamespace) { function FlugSuchenVM() { […] } var modulInternalStuff = […]; myNamespace.FlugSuchenVM = FlugSuchenVM; })(myNamespace); […] var vm = new myNamespace.FlugSuchenVM();
  • 7. 7 ECMASCRIPT 2015 ("ES6") Page  13 ES 6 EcmaScript 2016 (ES 6) Page  14 ES 5
  • 8. 8 Klassen Page  15 // flug-suchen-vm.js export class FlugSuchenVM { constructor() { this.vonFilter = "Graz"; this.nachFilter = "Hamburg"; } suchen() { […] } select() { […] } } var vm = new FlugSuchenVM(); Exportierte Elemente importieren Page  16 // main.js import { FlugSuchenVM } from 'flug-suchen-vm'; var vm = new FlugSuchenVM(); vm.suchen(); Relative Pfadangaben oder über Mapping definiert
  • 9. 9 Lambdas (Arrow-Functions) Page  17 export class FlugSuchenVM { fluege: Flug[]; search() { var that = this; fetch("http://www.angular.at/api/flug") .then(function(response) { return response.json(); }) .then(function(fluege) { that.fluege = fluege; }); } } Lambdas (Arrow-Functions) Page  18 export class FlugSuchenVM { fluege: Flug[]; search() { var that = this; fetch("http://www.angular.at/api/flug") .then(function(response) { return response.json(); }) .then(function(fluege) { that.fluege = fluege; }); } }
  • 10. 10 Lambdas (Arrow-Functions) Page  19 export class FlugSuchenVM { fluege: Flug[]; search() { fetch("http://www.angular.at/api/flug") .then((response) => { return response.json(); }) .then((fluege) => { this.fluege = fluege; }); } } EcmaScript 6 heute schon nutzen Cross-Kompilieren zu ES5 („Transpilation“) Populärer Transpiler: Babel Page  23
  • 11. 11 Module laden via SystemJS Page  25 <script src="path/system-polyfills.js"></script> <script src="path/system.src.js"></script> <script> System.config({ packages: { app: { defaultExtension: 'js' } } }); System.import('app/main').catch(function(err) { console.error(err); }); </script> SystemJS beziehen  NuGet  npm:  npm init -y  npm install systemjs --save Page  26
  • 12. 12 ÜBERBLICK ZU TYPESCRIPT Page  27 TypeScriptES 6 TypeScript Page  28 ES 5
  • 13. 13 TypeScript Page  30 export class FlugSuchenVM { public vonFilter: string; public nachFilter: string; constructor() { this.vonFilter = "Graz"; this.nachFilter = "Hamburg"; } public suchen() { […] } public select() { […] } } Datentypen Page  31 number string boolean Function Object any Eigene Kassen Eigene Interfaces
  • 14. 14 TypeScript heute nutzen TypeScript-Compiler kompiliert TypeScript wahlweise nach ES6, ES5 oder ES3 Page  32 Werkzeuge tsc: TypeScript-Compiler typings: Packet-Manager für Typ- Deklarationen SystemJS o. ä. zum Laden der Dateien Page  33
  • 15. 15 Konfiguration via tsconfig.json Page  34 { "compilerOptions": { "module": "system", "target": "es5", "sourceMap": true }, "exclude": [ "node_modules" ] } DEMO: TYPESCRIPT Page  35
  • 16. 16 AMBIENTE DEKLARATIONEN Page  41 Ambiente Deklarationen  Typangaben für bereits bestehende JavaScript- Variablen  Notwendig, um Typen für bestehende JavaScript- Frameworks zu definieren  Beispiele Globale Variable angular bei AngularJS Globale Variable $ bei jQuery Page  42
  • 17. 17 Ambiente Deklarationen Page  43 interface JQueryStatic { get(url: string, callback: (data: string) => any); } declare var $: JQueryStatic; $.get("http://mysite.org/divContent", function (data: string) { … } ); Ambiente Deklarationen Zahlreiche Typings-Dateien (mit ambienten Deklarationen) online Page  44
  • 18. 18 Package-Manager 'typings' npm init npm install jquery [npm install typings --global] [typings init] typings install jquery --ambient --save Page  45 tsconfig.json Page  46 { "compilerOptions": { "module": "system", "target": "es5", "sourceMap": true }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] }
  • 20. 20 Was sind Dekoratoren?  Möglichkeit zum Annotieren von Quellcode-Elementen  Können Metadaten festlegen  Können dekorierte Elemente auch verändern/ austauschen  Vorschlag für EcmaScript  Werden bereits von Frameworks genutzt und von Transpilern implementiert (de facto "Standard") Page  49 Beispiel Page  50 @DocuWithLabel("Repräsentiert einen Flug") class Flug { constructor(@Docu abflugort: string) { this.abflugort = abflugort; } @Docu abflugort: string; @Docu info(): string { return this.abflugort + " - " + this.zielort; } }
  • 21. 21 In tsconfig.json aktivieren Page  51 { "compilerOptions": { "module": "system", "target": "es5", "sourceMap": true, "experimentalDecorators": true, "emitDecoratorMetadata": true }, "exclude": [ "node_modules" ] } Was kann dekoriert werden? Klassen Member Argumente (vorerst nur TypeScript) Page  52
  • 22. 22 Dekoratoren sind Funktionen Page  53 @Docu class Flug { […] } class Flug { […] } Flug= Docu(Flug) || Flug; Dekoratoren sind Funktionen Page  54 @DocuWithLabel("Repräsentiert einen Flug") class Flug { […] } class Flug { […] } Flug = DocuWithLabel("Repräsentiert einen Flug")(Flug) || Flug;
  • 23. 23 Dekorator für Klassen Page  55 function Docu(target) { console.debug(target); } Dekorator für Member Page  56 function Docu(target, key, descriptor) { console.debug(target); console.debug(key); console.debug(descriptor); console.debug("---"); }
  • 24. 24 Dekorator für Argumente (TypeScript) Page  57 function Docu(target, key, descriptor) { console.debug(target); console.debug(key); console.debug(descriptor); console.debug("---"); } Argumentposition (0, 1, … n) Factory für Dekorator Page  58 function DocuWithLabel(label) { return function(target, key?, descriptor?) { console.debug(label); console.debug(target); console.debug(key); console.debug(descriptor); console.debug("---"); } }