Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und TypeScript

Einstieg in Node.js
Für .NET-Entwickler mit Visual Studio Code und
TypeScript
Gregor Biswanger | Freier Dozent, Berater, Trainer und Autor
about.me/gregor.biswanger

Über mich
 Freier Dozent, Berater und Trainer
 Schwerpunkte Softwarearchitektur, XAML, Web
und Cross-Plattform Entwicklung
 Technologieberater für die Intel Developer Zone
 Sprecher auf Konferenzen und User Groups
 Programmverantwortlicher bei der DWX 17 für
den Cross-Platform- und Web-Backend-Day
 Freier Autor für heise.de, dotnetpro,
WindowsDeveloper und viele weitere
Fachmagazine
 Video-Trainer bei video2brain und Microsoft
Gregor Biswanger
Microsoft MVP, Intel Black Belt &
Intel Software Innovator
cross-platform-blog.de
about.me/gregor.biswanger

Was ist Node.js? Wir lüften das Geheimnis

Was ist Node.js?
 Node.js ist eine serverseitige Plattform zum
Betrieb von Netzwerkanwendungen.
Insbesondere lassen sich Webserver damit
realisieren.
 JavaScript kann außerhalb vom Browser genutzt
werden
 Basiert auf der JavaScript-Laufzeitumgebung
„V8“ (Google Chrome).
 Läuft unter Windows, Linux und Mac OSX
 In C, C++ und JavaScript geschrieben.
 Flexibles Modulsystem (NPM).
 Ideal für viele gleichzeitige I/O Verbindungen.
Download
Nodejs.org

Der Papa von Node.js
 Ryan Dahl
 Gesponsert von der Firma Joyent
 Spezialisiert für Virtualisierung und
Cloud Computing

Das Geburtsjahr von Node.js: 2009
 Ryan Dahl startete am 16.02.2009 mit
dem Node-Projekt
 Ihm wurde dann 2011 auf der Oscon
Konferenz, der O’Reilly Open Source
Award verliehen
 InfoWorld hat Node.js im August 2011
mit dem Bossie Award für beste Open-
Source-Software in der Kategorie
„Entwicklertools“ ausgezeichnet

Top Rockstars auf GitHub
 Auf Platz 2 (Stand: 2012)
 831 Entwickler
 Über 300 Releases
 Über 1.500 Beobachter
 Über 19.000 Stars
 Über 2.400 Forks

Cross-Plattform Desktop Software mit Node.js
 Für den Desktop mit NW.JS oder Electron
 Node.js wird auf dem Client bereitgestellt
 https://github.com/nwjs/nw.js/wiki/List-of-
apps-and-companies-using-nw.js

JavaScript für Internet der Dinge (IoT)
 Das Linux Derivat Yocto bietet mit Node.js die
Möglichkeit auf Hardware zuzugreifen und
einen Web-Server zu Hosten
 Verwendet vor allem vom Intel Galileo Board
und Intel Edison
 Zur Entwicklung dient dann das Intel XDK IoT
Edition
 Das ebenfalls das Node-Webkit nutzt
 Kostenloses Video auf Channel 9 meinerseits:
 https://channel9.msdn.com/Blogs/TechTalk/Episode
-53-IoT-Development-mit-Intel-Galieo--Edison-
und-Nodejs

Node.js nur ein Hype?
 Der Technologieradar von ThoughtWorks bewertet Node.js
als eine ausgereifte und bewährte Technologie, die für den
Unternehmenseinsatz geeignet ist.
 Quelle (Januar 2014):
 http://www.thoughtworks.com/de/radar/

Bekannte Webseiten, die auf Node.js laufen
 Trello
 WordPress.com
 Walmart.com
 LinkedIn
 Yahoo
 (Für einige Services)
 Google
 (Für einige Services)
 Microsoft
 (Yammer)
 (Azure Mobile Services)
 Mozilla
 TheNewYorkTimes
 GitHub (Für Downloads)
 Uvm.
Quellen:
https://github.com/nodejs/node-v0.x-archive/wiki/Projects,-Applications,-and-Companies-Using-Node
https://www.quora.com/What-are-the-biggest-websites-built-with-Node-js-on-the-server-side
https://de.wikipedia.org/wiki/Node.js

Ein Erfahrungsbericht von PayPal
 5 Entwickler starteten im Januar mit Java eine Web-App zu
programmieren
 Verwendeten das Spring Framework
 In März starteten 2 Entwickler mit Node.js eine Web-App zu
programmieren
 Kraken.js, express und dust.js
 Im Juni hatten beide Applikationen die gleiche Funktionalität
 Der Node.js Entwicklungserfolg in Zahlen:
 Mit weniger Entwicklern, fast doppelt so schnell programmiert
 Es wurde circa 33% weniger Code benötigt
 Mit circa 40% weniger Dateien aufgebaut
Quelle: https://www.paypal-engineering.com/2013/11/22/node-js-at-paypal/

Ein Erfahrungsbericht von WordPress
Quelle: https://developer.wordpress.com/2015/11/23/the-story-behind-the-new-wordpress-com

Der erste Web-Server Platz frei für „Hallo Welt“

Der Berühmte „Hallo Welt“ Node.js Web-Server
 Starten in der Konsole mit dem Befehl
node datei.js
 Das Tool Nodemon kann Änderungen
der Datei erkennen und Node
automatisch neustarten
 npm install nodemon –g
 nodemon datei.js
var http = require('http');
http.createServer((request, response) => {
response.writeHead(200, {
'Content-Type': 'text/html'
});
response.write('Hallo Welt');
response.end();
}).listen(3000);

Wie funktioniert
Node.js?
Ein Blick auf die Architektur

Basiert auf eine Ereignisgesteuerte Architektur
 Auch bekannt als Event-driven
Architecture
 Spart somit Ressourcen, was eine
besonders große Anzahl gleichzeitig
bestehender Netzwerkverbindungen
ermöglicht

Node.js Architektur
Node.js
Node.js Core Library (JavaScript)
Node.js Bindings (C++)
Google V8 (C++) Libuv (C)
(Früher Libev & Libeio)
var fs = require('fs');
fs.readFile('Hallo.txt', 'utf8', function(err, contents) {
console.log(contents);
});
console.log('after calling readFile');
after calling readFile
Ausgabe
myFile.js
Hallo Welt von Hallo.txt!
1 Thread
1 Neuer Thread zur System-APIAsynchrone Antwort von der System API

JavaScript Architektur – Call Stack
Call Stack function multiply(a, b) {
return a * b;
}
function square(n) {
return multiply(n, n);
}
function printSquare(n) {
var squared = square(n);
console.log(squared);
}
printSquare(4);
16
Ausgabe
main()
printSquare(4)
square(4)
multiply(4, 4)
console.log(..)

JavaScript Architektur – Call Stack
Call Stack function foo() {
return foo();
}
foo();
main()
foo()
foo()
foo()
foo()
foo()
foo()
foo()

JavaScript Architektur – Event Loop
Call StackJS Engine API
Task Queue
console.log("Hello");
setTimeout(function callback() {
console.log("World");
}, 0);
console.log("Ohh!");
Hello
AusgabeEvent Loop
main()
console.log("Hello")
Ohh!
World
setTimeout(callback)console.log("Ohh!")
callback
timer
callback
callback()
console.log("World")

Node.js Architektur – Event Loop
Node.js
Node.js Core Library (JavaScript)
Node.js Bindings (C++)
Google V8 (C++)
var fs = require('fs');
fs.readFile('Hallo.txt', 'utf8', function(err, contents) {
console.log(contents);
});
console.log('after calling readFile');
after calling readFile
Ausgabe
myFile.js
Hallo Welt von Hallo.txt!
1 Thread
1 Neuer Thread zur System-APIAsynchrone Antwort von der System API
Call StackTask Queue
callback
main()
require("fs")fs.readFile(..)console.log("after..")
callback(err, contents)
console.log("contents")
Event
Loop
Libuv (C)
Thread Pool

Klassische Web-Server (Apache, Tomcat, IIS…)
Clients Web-Server Backend
DB
Betriebssystem
Dateien
Dienste
Request
Request
Request
Request
Thread 1
Thread 2
Thread 3
Thread 4
Request
Request
Request
Response
ResponseResponse
ThreadPool
Response
Response
Response
Response

Klassische Web-Server - Request/Response Model
 Clients senden eine Anfrage zum Web-Server.
 Web-Server stellt intern eine begrenzte Anzahl
von Thread-Pools zum Verarbeiten der Client-
Anfragen.
 Der Web-Server läuft in einer Endlos-Schleife
und wartet auf Client-Anfragen.
 Wenn der Web-Server eine Anfrage entgegen
nimmt:
 Wird für die Anfrage ein Thread erzeugt
 Die Anfrage wird dem Thread zugeordnet
 Der Thread kümmert sich um die Verarbeitung
der Anfrage
 Der Thread sendet die verarbeitete Antwort
zurück an den Web-Server
 Der Web-Server sendet diese Antwort an den
jeweiligen Client

Node.js Web-Server
Clients Web-Server Backend
DB
Betriebssystem
Dateien
Dienste
Request
Request
Request
Request
Response
Response
Response
Response
Request
Event Loop
Single Threaded
Event Queue
Non-Blocking
IO Tasks
Node.js internal
Thread Pool
Thread 1
Thread 2
Request Request
Request Request
Request
Response
Request
Thread 3
Response
RequestResponeResponse

Node.js Web-Server - Single-Threaded Event Loop Model
 Clients senden eine Anfrage zum Web-Server.
 Node.js Web-Server stellt intern eine begrenzte Anzahl von Thread-Pools zum Verarbeiten der Client-
Anfragen.
 Node.js Web-Server empfängt die Anfragen und stellt sie in eine Warteschlange (Event Queue).
 Node.js Web-Server hat intern eine Komponente, die als „Event-Loop“ bekannt ist. Diese läuft in einer
Schleife um Anfragen zu empfangen und zu verarbeiten.
 Der Event-Loop läuft unter einem Thread und ist das Herz von Node.js.
 Bei jedem Durchlauf der Schleife, wird der Event Queue auf Anfragen überprüft.
 Wenn eine Anfrage im Event Queue liegt, wird diese genommen:
 Der Code der Anfrage wird sofort verarbeitet
 Wenn der Code keine blockierenden I/O-Operationen erfordert, wird er bis zum Ende
ausgeführt und die Antwort sofort an den Client zurückgesendet
 Wenn blockierende I/O-Operationen vorhanden sind, wie zum Beispiel eine Interaktion mit der
Datenbank, Dateisystem oder Diensten, dann folgt ein anderer Ansatz:
 Überprüfung ob interne Threads verfügbar sind.
 Anfrage wird einem Thread zugewiesen
 Der Thread verarbeitet die gewünschte Anfrage
 Der Thread sendet die Antwort zurück zur Event-Loop
 Falls die Event-Loop frei ist, wird die Antwort durch sie sofort an den Client gesendet
 Andernfalls wird die Antwort zum Event Queue auf die Warteschlange gelegt und zum nächst
möglichen Zeitpunkt von der Event-Loop an den Client gesendet

Was hat diese Arbeitsweise für Vorteile in Node.js?
 Ryan Dahl (der Entwickler von Node.js) hat dafür einmal
folgendes Beispiel genutzt:
„Man stelle sich vor, ein ausgeführtes Programm, ist eine Person, die bei sich im Büro am Schreibtisch
arbeitet. Benötigt das Programm Informationen aus dem Level2-Cache, entspricht das in etwa dem
Öffnen der Schreibtischschublade in dem die Informationen liegen. Für Daten aus dem RAM muss man
schon von seinem Platz aufstehen, zur gegenüberliegenden Seite des Büros laufen und die Informationen
dort aus einem großen Aktenschrank rausholen und sich wieder an seinen Platz begeben.
Greift man hingegen auf Daten von der Festplatte zu, steht man auf, verlässt das Büro und das Gebäude,
setzt sich in ein Taxi, fährt zum Flughafen, nimmt die nächste Maschine nach Tokio, holt dort die
Informationen ab und fliegt wieder zurück.“

Die Kosten von I/O Operationen
I/O Quelle CPU Cycles
L1-Cache* 3
L2-Cache* 14
RAM 250
Festplatte 41.000.000
Netzwerk 240.000.000
* Im Hardwarebereich weisen vor allem moderne CPUs zwei oder drei Cacheebenen auf; sonstige Geräte besitzen meist nur
eine Cacheebene.
Im Softwarebereich wird meist nur eine Cacheebene benutzt, eine prominente Ausnahme bilden Webbrowser, die zwei Ebenen
nutzen (Arbeitsspeicher und Festplattenlaufwerk).
Quelle: Wikipedia

Node.js bei PayPal
Quelle: https://www.paypal-engineering.com/2013/11/22/node-js-at-paypal/

Performance Unterschiede
Quelle: http://www.hostingadvice.com/blog/comparing-node-js-vs-php-performance

Performance Unterschiede
Quelle: http://mikaelkoskinen.net/post/asp-net-web-api-vs-node-js-benchmark-take-2

Vor- und Nachteile vom Node.js Web-Server
Gut
 Hohe Performance
 Skalierbar
 JSON-API per Default und leichtgewichtig
 Streaming - Videofilme können schon beim Hochladen
beim Server in ein anderes Format transkodiert werden
 Web-Echtzeit durch Web-Sockets Unterstützung
Schlecht
 Rechenintensive Anwendungen die eine hohe CPU
Auslastung beanspruchen

Zusammenfassung
 Node.js verwendet die Single-Threaded Event Loop Model Architektur
 Node.js-Anforderungen waren von beginn an auf Performance und
Skalierbarkeit ausgelegt
 JavaScript für Server und Client
 Nur eine Sprache muss beherrscht werden können
 Namenhafte Unternehmen setzen bereits erfolgreich auf Node.js

Das Modulsystem Dependency Management

CommonJS Module Spezifikation
 CommonJS, kurz CJS, ist eine Initiative, die es sich zum
Ziel gesetzt hat Spezifikationen/API’s für JavaScript zu
definieren
 http://wiki.commonjs.org/wiki/CommonJS
 Damit existierender Code wiederverwendet werden
kann, wurde das Module-System entwickelt
 Vergleichbar mit Assemblies/Namespaces unter .NET
 Einfache Syntax
 Entworfen für synchrones Laden von JavaScript-Dateien
ohne Script-Tag (asynchron geht auch)
 Kann zum Beispiel auch komplilieren (CoffeeScript)
 Wird unter Node.js, CouchDB und Titanium Mobile
verwendet
 Für JavaScript im Browser gibt es ab ECMAscript 6 die
Asynchronous Module Definition (AMD)
JS-Datei JS-Datei
CommonJS
(Mediator)
Modul A Modul B
Code Code

Ein Modul hat seinen eigenen Kontext (Scope)
 Auf Objekte, Funktionen oder Variablen von anderen
Modulen kann dabei nicht zugegriffen werden
 Es sei denn, ein anderes Modul wird mittels "require()"
geladen
 Vergleichbar mit using aus .NET
 Erstellt man innerhalb von einem Modul eine Variable, so
ist diese innerhalb von diesem Modul privat und nicht im
globalen Kontext verfügbar
 Ein Modul muss dabei nicht zwingend eine Datei sein.
Theoretisch könnte das Modul zum Beispiel auch aus
einer Datenbank stammen. In der Praxis ist dies jedoch
eine Datei.
 Der String, der das Modul identifiziert, entspricht dem
Pfad zur jeweiligen Datei, wobei auf die Dateiendung ".js"
verzichtet wird.
var foo = require('./foo');
foo.bar()

Inhalte vom Modul öffentlich stellen
 Innerhalb eines Moduls existiert eine
spezielle Variable "module.exports",
um innerhalb von einen Modul Variablen,
Objekte oder Funktionen nach außen
verfügbar zu machen
 Alles was dieser Variable zugewiesen
wird, ist später über das Modul
erreichbar
module.exports.sayHello =
() => console.log(„Hello“);

Module sind statisch
 Immer wenn ein Modul eingebunden wird, wird dieses
nicht neu geladen oder neu ausgeführt
 Es behält daher immer seinen Status

Node.js Core Module
 Node.js besitzt bereits Basis-Module die fest
in die Umgebung integriert sind
 Es können auch weitere Module
nachinstalliert, oder gar selbst geschrieben
werden
 Alle Core Module sind Funktions-
Biblioteken, die grundlegende Aufgaben wie
z.B. den Umgang mit dem Betriebssystem,
Netzwerk-Technologien oder
Verschlüsselungen abdecken
 Core Module Dokumentation
 https://nodejs.org/api/
var os = require('os');
var platform = os.platform();
console.log(platform);

Module mit
TypeScript
Support für CommonJS

Konfiguration für CommonJS-Support
 TypeScript unterstützt CommonJS
 In der tsconfig.json-Datei muss
diese Unterstützung explizit aktiviert
werden
 Wichtig! Das Verzeichnis
node_modules sollte ignoriert werden
{
"compilerOptions": {
"module": "commonjs",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
tsconfig.json

Das Require mit TypeScript
 Soll eine externe TS-Datei mittels
require geladen werden, oder
existiert für das zu ladende Modul eine
Type Definitions-Datei, wird die
Instanz mittels import anstatt
var/let vorgenommen
 Falls nichts von beiden vorhanden sein
sollte, verwendet man weiterhin
var/let
import http = require('http');

Einfacher Export mit TypeScript
 Einfach die freigebende Klasse mit
export deklarieren
 Es wird keine zusätzliche module
Deklaration benötigt
export class Foo() {
...

Node Package
Manager
Libraries auf Bestellung und noch
mehr!

Node Package Manager
 Der Node Package Manager (npm) ist ein
Paketmanager für die JavaScript-
Laufzeitumgebung node.js
 Wird bei der node.js Installation
bereitgestellt
 Unter .NET ist es vergleichbar mit NuGet
 Ende Januar 2016 enthielt das Repositorium
knapp 236.209 Pakete
 Ende Januar 2016 enthielt NuGet zum
Vergleich 49.781 Pakete
 https://www.npmjs.com
Konsolen-Anwendung
npm

Die Package.json
 Diese enthält wichtige Metadaten zum
eigenen Projekt/Modul
 Vereinfacht die Arbeit im Team und beim
Deployen
 Skripte können hinterlegt werden
 Für Tests und Tasks
 Installierte Module können registriert
werden
Package.json Erstellen
npm init
{
"name": "helloworld",
"version": "1.0.0",
"description": "my first package.json file",
"main": "index.js",
"scripts": {
"test": ""
},
"author": "Gregor Biswanger",
"license": "ISC"
}
Package.json

Ein Paket installieren
 Ein Paket wird über die Konsole installiert
 Beim Installieren werden deren Paket-
Abhängigkeiten ebenfalls installiert
 Die Pakete werden immer in ein
Standardverzeichnis installiert
 node_modul
 Wenn bei require kein Pfad im String
eingegeben wird, sucht CommonJS
automatisch im node_modul nach dem
gewünschten Modul
Paket installieren
npm install Paketname
npm install [Verzeichnis mit Paket]

Ein Paket installieren und registrieren
 Die Package.json kann sich installierte
Pakete merken
 Es wird zwischen „Benötigt zur Produktion“
und „Benötigt zur Entwicklungszeit“
unterschieden
 Das hilft beim Deployement, nur die wirklich
relevanten Module zu installieren
 Versionsverwaltungen können so schlanker
gehalten werden und es werden Konflikte
bei Updates verhindert
 Die .ignoregit-Datei sollte dann folgende
Zeile beinhalten: node_modules/ Paket installieren und Registrieren
npm install Paketname --save
npm install Paketname --save-dev
{
"version": "1.0.0",
"description": "my first package.json file",
"main": "index.js",
"scripts": {
"test": ""
},
"author": "Gregor Biswanger",
"license": "ISC",
"dependencies": {
"underscore": "^1.8.3"
},
"devDependencies": {
"gulp": "^3.9.0"
}
}
Package.json

Regeln zur Paketversionierung
 ^1.8.3 (1.x.x)
 Hauptversion bleibt konstant, weitere Hauptrevision
werden installiert, wenn verfügbar
 ~1.8.3 (1.8.x)
 Updatet nur eine Minor Version höher, wenn
verfügbar
 1.8.3
 Bleibt konstant die gleiche Version
 <1.8.3 oder <=1.8.3
 Kleiner als die definierte Version oder kleiner bzw.
gleich der definierten Version
 >1.8.3 oder >=1.8.3
 Größer als die definierte Version oder größer bzw.
gleich der definierten Version
{
...
"dependencies": {
"underscore": "^1.8.3"
},
"devDependencies": {
"gulp": "^3.9.0"
}
}
Package.json

Registriere Pakete installieren
 Wenn innerhalb im Projekt npm
install aufgerufen wird, werden alle
registrieren Pakete unter dependencies
der Package.json installiert
 Mit einem zusätzlichen
production-Attribut werden alle
devDependencies installiert
Paket installieren im Projektverzeichnis
npm install
npm install -production

Ein Paket Global installieren
 Pakete stehen für alle Projekte zur
Verfügung
 Hauptsächlich sind das Pakete, die zur
Entwicklungszeit benötigt werden
 Zum Beispiel TypeScript, Grunt oder Gulp
 Pfad der globalen Pakete unter Windows:
 C:UsersGregorAppDataRoamingnpmnode_modules
Paket Global installieren
npm install Paketname -g

Scripte hinter Standard-Scripte festlegen
NPM Unterstützt ein Script-Property innerhalb der package.json, für folgende Scripts:
 prepublish Wird ausgeführt BEVOR ein Paket veröffentlicht wird
 publish, postpublish Wird ausgeführt NACH dem veröffentlichen eines Pakets
 preinstall Wird ausgeführt BEVOR ein Paket installiert wird
 install, postinstall Wird ausgeführt NACH dem ein Paket installiert wurde
 preuninstall, uninstall Wird ausgeführt BEVOR ein Paket uninstalliert wird
 postuninstall Wird ausgeführt NACH dem ein Paket uninstalliert wurde
 preversion, version Wird ausgeführt BEVOR ein Paket höher versioniert wird
 postversion Wird ausgeführt NACH dem ein Paket höher versioniert wurde
 pretest, test, posttest Wird ausgeführt bei npm test
 prestop, stop, poststop Wird ausgeführt bei npm stop
 prestart, start, poststart Wird ausgeführt bei npm start
 prerestart, restart, postrestart Wird ausgeführt bei npm restart. Hinweis: Laufende Scripts werden dabei nicht beendet.
Script starten
npm Scriptname
{
"version": "1.0.0",
"description": "my fir..",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
...
Package.json

Eigene Scripte festlegen
Script starten
npm run Scriptname
{
"version": "1.0.0",
"description": "my fir..",
"main": "index.js",
"scripts": {
"tsc": "tsc"
},
...
Package.json
 Es können auch eigene Scripte hinterlegt werden
 Diese werden durch den zusätzlichen run Befehl
ausgeführt
 Kombinationen von unterschiedlichen Tasks mit
nur einem Befehl, sind mit der Erweiterung
concurrently möglich
1. npm install concurrently --save-dev
2. "start": "concurrent "npm run tsc" "npm test"

Express.js
 Ein Web Application Framework für node.js
 Inspiriert vom Sinatra-Framework (Ruby)
 Es erweitert Node.js um Werkzeuge, mit denen das
Entwickeln moderner Webanwendungen einfacher
gestaltet wird
 Vergleichbar mit der Microsoft Web-API
(Nur besser )
 Kommunikation mit REST (HTTP) per Standard
 Request/Response-Handling
 Routing
 View Templating
 Session Support
 Static Files Support
 Middleware
 Zum Beispiel Funktionen die sich zwischen Request und Response
hängen können (Logger etc.)
 Und vieles mehr…
Installation
npm install express --save
var express = require("express");
var app = express();
app.get("/", function (request, response) {
response.send("Hello World");
});
app.listen(3000);

GET-Aktion
 GET-Aktion mittels get-Funktion
hinterlegen
 Routing per String beschreiben
 Parameter werden zusätzlich mit
Doppelpunkt und Variablenamen
beschrieben
 state für Statuscode
 Rückgabe-Funktion
 render für HTML-Inhalt mit View Engine
 send für Text-Inhalt
 json für JSON-Inhalt
 redirect zur Weiterleitung
app.get("/api/sayHello/:name", (request, response) => {
var name = request.params.name;
if (!isNaN(name)) {
response
.status(400)
.send("No string as name");
} else {
response.json({
"message": name
});
}
});
app.listen(3000);

Queries
 Gewöhnliche Query-Parameter können
ebenfalls abgefragt werden
 Diese befinden sich unter
request.query.PARAMETERNAME
 Diese müssen nicht zusätzlich im
Routing beschrieben werden
// http:localhost:3000/api/sayHello?name=NodeJS
app.get("/api/sayHello/", (request, response) => {
var name = request.query.name;
var result = {
message: name
};
if (!isNaN(name)) {
response
.status(400)
.send("No string as name");
} else {
response.json(result);
}
});
app.listen(3000);

Express Pipeline
 Node.js und Express.js unterstützen
Middleware
 Vergleichbar mit ASP.NET Pipeline oder
ASP.NET MVC/Web-API Filters
 Middleware wird über die use-Funktion
Global für jede Anfrage bereitgestellt
 Middleware kann ebenfalls als Single-
Middleware einer einzelnen Anfrage
mitgegeben werden (z.B. upload.array())
app.use("/", express.static("public"));
app.use(bodyParser.urlencoded({
extended: true
}));
app.post("/api/sayHello", upload.array(),
(request, response) => {
...
});

Express Pipeline Architektur
app.use(bodyParser.urlencoded({
extended: true
}));
app.post("/api/sayHello", upload.array(),
(request, response) => {
...
});
query
Request http://localhost:3000/api/sayHello
expressInit
Static Handler
Url Encoded
Upload Array
Anonym Function

Eigene Middleware
 Das Schreiben einer eigenen
Middleware ist sehr einfach
 Die Signatur der Funktion entspricht:
 Request
 Response
 Next
 Nach der Verarbeitung der eigenen
Logik, muss nur die Next-Funktion
aufgerufen werden, ansonsten wird
die Pipeline nicht fortgesetzt
function consoleWriter(request, response, next) {
console.log("Request Path: " + request.path);
next();
}
app.use(consoleWriter);
response.send("Hello World");
});
app.listen(3000);

Statische Dateien in Express bereitstellen
 Wenn Sie statische Dateien wie Bilder,
CSS-Dateien und JavaScript-Dateien
bereitstellen wollen, verwenden Sie die
in Express integrierte
Middlewarefunktion express.static
 Der Name dieses Verzeichnisses ist nicht
Teil der URL
 Alle weiteren Unterverzeichnisse werden
ebenfalls automatisch bereitgestellt
 Falls eine Index.html-Datei im
Verzeichnis liegt, wird diese
standardmäßig geladen
app.listen(3000);

Der Vergleich
ASP.NET ASMX
 Wird bei ASP.NET Web-Forms als Standard verwendet
 Kommunikation mittels SOAP
 Verbirgt die Details wie der Service funktioniert
Node.js/Express.js
 Unterstützt kein SOAP
 Ersichtlich wie der Service funktioniert
 JSON Conversion per Standard verfügbar
 Man muss verstehen, was man sendet (Statuscodes,
Header etc.)

Der Vergleich
WCF
 Konfiguration über Konventionen
 Trennt die Transport Logik über Interfaces
 Abhängig von der Konfiguration
 Unterstützt ebenfalls REST durch zusätzliche Attribute
Node.js/Express.js
 Spezialisiert auf die HTTP-Kommunikation
 Über die Middleware werden einfach weitere
Kommunikationen ermöglicht (z.B. Web-Sockets mit
Socket.io)
 TCP ebenfalls möglich, benötigt dazu allerdings
separate Implementationen
 Kleine bis gar keine Konfiguration nötig

Der Vergleich
ASP.NET MVC / Web-API
 Erstellt API je nach Rückgabetyp
 Verwendet Attribute für keine-GET Funktionen
 Integrierte View Engine per Standard
 Route-Funktionen verstreut auf unterschiedliche
Dateien, obwohl sie im gleichen Kontext liegen würden
 Pushen von Daten nur mit SignalR möglich
 Eigene Services dafür nötig
 Web-API ist sehr ähnlich zu Express.js
 Routing Regeln müssen zusätzlich über Route Location
festgelegt werden
 Mehr zusätzliche Konfigurationen nötig
Node.js/Express.js
 Verwendet für jede Funktion ein eigenes Verb
 Pushen von Daten über Middleware einfach möglich
(Socket.io)
 Unterschiedliche View-Engines können verwendet
werden
 Unterschiedliche Route-Funktionen können in der
gleichen Datei implementiert werden
 Routing Regeln per Standard einfach vorhanden

View Engines Serverseitiges Rendern

Jade
 Ist eine View Engine und ähnlich zu
ASP.NET MVC
 Rendert Jade-Dateien zu HTML
serverseitig
 Master Templates können genutzt
werden
 Verfügt über Razor ähnliche Features
 Aus eigener Erfahrung: Ist leider stark
Fehleranfällig und Fehlermeldungen sind
nicht aussagekräftig
 http://jade-lang.com
Installation
npm install jade --save

Jade mit Express.js
 Es wird kein require für Jade benötigt
 Einfach nur die View Engine
registrieren
 Express.js erstellt intern ein eigenes
require
 Jade-Datei mit Jade-Format erzeugen
und referenzieren
 Jade verwendet als
Standardverzeichnis views
app.set("view engine", "jade");
response.render("jade/index“);
});
app.listen(3000);

Jade - View Template Format
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) {
bar(1 + 5)
}
body
h1 Jade - node template engine
#container.col
if youAreUsingJade
p You are amazing
else
p Get on it!
p.
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jade</title>
<script type="text/javascript">
if (foo) {
bar(1 + 5)
}
</script>
</head>
<body>
<h1>Jade - node template engine</h1>
<div id="container" class="col">
<p>You are amazing</p>
<p>
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
</p>
</div>
</body>
</html>
Jade-Format HTML-Format

Jades Razor
 Ein JSON-Objekt wird beim Rendern
mitgegeben
 Innerhalb einer Jades-Datei wird dann
mittels „= JSON-Propertyname“ ein
Binding erzeugt
app.set("view engine", "jade");
response.render("jade/index", {
title: "Hello from Jade!"
});
});
app.listen(3000);
doctype html
html(lang="en")
head
title= title
body
h1= title
p This is an express app!

Jades Layout File
 Ein fixes Layout für alle Unterseiten
kann festgelegt werden
 Ähnlich zu ASP.NET Masterpages
 In der layout.jade-Datei wird ein
eigener Blockname definiert
 In der Unterseite wird auf die Layout-
Datei verwiesen und wie der eigene
Blockname heißt
doctype html
html(lang="en")
head
title= title
body
block content
footer This is the footer
extends layout
block content
h1= title
p This is an express app!
index.jade
layout.jade

EJS
ASP.NET Web-Forms
 Steht für Embedded JavaScript
 Verfügt über Razor ähnliche Features
 Kann auch Masterpages nutzen
 Benötigt dazu extra das Modul ejs-locals
und muss bei Express.js registriert
werden
 http://www.embeddedjs.com
Installation
npm install ejs --save
npm install ejs-locals --save

EJS mit Express.js
 Es wird kein require für EJS benötigt, nur
für den Layout-Support (ejs-locals)
 Einfach nur die View Engine registrieren
require
 EJS-Datei im HTML-Format erzeugen
und referenzieren
 EJS verwendet als Standardverzeichnis
views
 Innerhalb von der Syntax <%- und %>
wird JavaScript ausgeführt
var ejsEngine = require("ejs-locals");
app.engine("ejs", ejsEngine);
app.set("view engine", "ejs");
response.render("ejs/index", {
title: "Hello from EJS!"
});
});
app.listen(3000);
<!DOCTYPE html>
<html>
<head>
<title>
<%- title %>
</title>
</head>
<body>
<div>
<%- title %>
</div>
</body>
</html>

EJS Layout File
 In der layout.ejs-Datei wird ein
eigener Blockname mit body definiert
Datei verwiesen
...
<body>
<div>
<%- body %>
</div>
</body>
</html>
<% layout("layout.ejs") -%>
<h1><%- title %></h1>
<p>This is from
<%- title %>
</p>
index.ejs
layout.ejs

Vash
 Laut Webseite: „Vash, the 60 billion
double-dollar template-maker.“
ASP.NET MVC
 Verwendet Razor-Syntax
 Mehr als ähnlich ;)
 Kann auch Masterpages nutzen
 https://github.com/kirbysayshi/vash
Installation
npm install vash --save

Vash mit Express.js
 Es wird kein require für Vash benötigt
 Einfach nur bei der View Engine
registrieren
require
 Vash-Datei im HTML-Format erzeugen
und referenzieren
 Vash verwendet als Standardverzeichnis
views
 Innerhalb von der @-Syntax wird
JavaScript ausgeführt
app.set("view engine", "vash");
response.render("vash/index", {
title: "Hello from Vash!"
});
});
app.listen(3000);
<!DOCTYPE html>
<html>
<head>
<title>
@model.title
</title>
</head>
<body>
<div>
@model.title
</div>
</body>
</html>

Vash Layout File
 In der layout.vash-Datei wird ein
eigener Blockname definiert
Datei verwiesen und ein Block-
Bereich festgelegt
...
<body>
<div>
@html.block("body")
</div>
</body>
</html>
@html.extend("vash/layout", function(model){
@html.block("body", function(model){
<h1>@model.title</h1>
<p>This is from the server!</p>
})
})
index.vash
layout.vash

Node.js vs.
ASP.NET
Kampf der Giganten

Der Vergleich
ASP.NET
 Internet Information Services (IIS)
 Eigenständiger Dienst der Installiert und Konfiguriert
werden muss
 C#/VB.NET
 EF/SQL Server
 ASP.NET Web Forms
 ASP.NET MVC/Razor
 ASP.NET Web-API
 SignalR
 AngularJS/Ember/Backbone/KnockoutJS uvm.
Node.js
 Node.exe
 Die Anwendung selbst stellt den Web-Server zur Verfügung.
Konfiguration findet direkt im Code statt. (Leichtgewichtiger
als IIS)
 JavaScript
 (Die gleiche Sprache wie auf dem Client)
 Kann auch .NET-Code ausführen mit Edge.js
 MongoDB oder andere Datenbanken
 (SQL Server geht auch, nur kein EF Komfort)
 Mehrere View Engines
 EJS (Ählich zu Web Forms)
 Jade/Razor (Ähnlich zu MVC/Razor)
 Vash
 Express
 Socket.io
 AngularJS/Ember/Backbone/KnockoutJS uvm.

Microsofts Geheimplan: Node.js mit dem ChakraCore
 Microsofts JavaScript Engine ChakraCore
für Node.js
 Microsoft setzt verstärkt auf Cloud-First
 ASP.NET vNext setzt komplett auf
Node.js-Konzepte
 Cross-Plattform Support für .NET
 Modular durch Paketmanager
 Und vieles weitere…
 Tools für die Node.js-Entwicklung
 Visual Studio, VS Code

Ein Experiment von Microsoft zeigt…
Quelle: http://news.softpedia.com/news/and-so-it-begins-microsoft-asks-node-js-to-allow-chakracore-edge-alongside-google-s-v8-engine-499183.shtml

Kann bereits selbst getestet werden
 Läuft neben einer bereits installierten
Node.js-Version
 https://github.com/Microsoft/node/releas
es/tag/node-chakracore-6.0.0-pre2

FRAGEN?
Kostenlose Artikel zum Thema Node.js auf
http://www.cross-platform-blog.de

http://about.me/Gregor.Biswanger
Ich freue mich auf Feedback!
Vielen Dank!

Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und TypeScript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und TypeScript

Similar to Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und TypeScript (20)

More from Gregor Biswanger

More from Gregor Biswanger (7)

Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und TypeScript