public/web-development/presentation.git

			@@ -36,9 +36,16 @@
			<ul>
			<li>JavaScript</li>
			<li>Responsive Design</li>
			<li>NodeJS</li>
			<li>WebComponents / lit</li>
			<li>NodeJS</li>
			<li>Datenbank</li>
			</ul>
			</section>
			<section>
			<h3>Betrieb</h3>
			<ul>
			<li>Server einrichten</li>
			<li>SSL- / TLS-Zertifikate</li>
			</ul>
			</section>
			<section>
			@@ -66,13 +73,6 @@
			<li>Progressive Web Application</li>
			<li>CEF / Electron</li>
			<li>WebAssembly</li>
			</ul>
			</section>
			<section>
			<h3>Betrieb</h3>
			<ul>
			<li>Server einrichten</li>
			<li>SSL- / TLS-Zertifikate</li>
			</ul>
			</section>
			<section>
			@@ -3608,6 +3608,13 @@
			<section>
			<h3>Auf Attribute reagieren</h3>
			<pre>
			<code class="html" data-trim data-line-numbers>
			<script type="text/template">
			<hello-world my-attribute="a"></hello-world>
			</script>
			</code>
			</pre>
			<pre>
			<code class="js" data-trim data-line-numbers="2\|8-10">
			<script type="text/template">
			class HelloWorldComponent extends HTMLElement {
			@@ -3672,6 +3679,1062 @@
			<section>
			<iframe data-src="/assets/html/hello-sayer.html"></iframe>
			</section>
			<section>
			<h3>Elemente aus dem LightDOM platzieren mit <code><slot></code></h3>
			<pre>
			<code class="js" data-trim data-line-numbers>
			<script type="text/template">
			this.root.innerHTML = `
			<span>Hello <slot></slot>!</span>
			`;
			</script>
			</code>
			</pre>
			</section>
			<section>
			<h4>Beispiel</h4>
			<pre>
			<code class="html" data-trim data-line-numbers>
			<script type="text/template">
			<hello-sayer>Joe</hello-sayer>
			<hello-sayer>Allie</hello-sayer>
			</script>
			</code>
			</pre>
			<iframe data-src="/assets/html/hello-sayer-2.html"></iframe>
			</section>
			<section>
			<h3>Mehrfache benannte <code><slot></code>s</h3>
			<pre>
			<code class=js data-trim data-line-numbers>
			<script type="text/template">
			this.root.innerHTML = `
			<span>
			first name: <slot name="first"></slot> \|
			last name: <slot name="last"></slot>
			</span>
			`;
			</script>
			</code>
			</pre>
			</section>
			<section>
			<h4>Beispiel</h4>
			<pre>
			<code class="html" data-trim data-line-numbers>
			<script type="text/template">
			<name-field>
			<span slot="first">Leia</span>
			<span slot="last">Organa</span>
			</name-field>
			</script>
			</code>
			</pre>
			<iframe data-src="/assets/html/name-field.html"></iframe>
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Entwerfe eine <code>CardComponent</code> (Vorlage "card-component.html") in folgendem Stil und nutze dabei sinnvolle <code><slot></code>s:</p>
			<pre>
			<code class="html" data-trim data-line-numbers>
			<script type="text/template">
			<card-component>
			<span slot="title">This is a title</span>
			<span slot="content">...Lorem ipsum dolor sit amet, consetetur sadipscing elitr...</span>
			</card-component>
			</script>
			</code>
			</pre>
			<iframe data-src="/assets/html/exercise-card-component.html"></iframe>
			</section>
			<section>
			<h3>Styling einer Web Component</h3>
			<p>Ein <code>:host</code>-Block mit einem <code>display</code> gehört zum guten Ton!</p>
			<pre>
			<code class="css" data-trim data-line-numbers>
			<script type="text/template">
			:host {
			display: block; /* inline, inline-block, flex, grid etc... */

			color: red;

			font-family: Arial, Helvetica, sans-serif;
			}
			</script>
			</code>
			</pre>
			</section>
			<section>
			<p>Innerhalb einer Komponente können beliebige Styles für verschiedene Selektoren verwendet werden</p>
			<pre>
			<code class="css" data-trim data-line-numbers>
			<script type="text/template">
			:host {
			display: block;
			}

			.info {
			background-color: lightblue;
			}

			.warning {
			background-color: yellow;
			}
			</script>
			</code>
			</pre>
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Welche Wechselwirkungen haben Styles zueinander, die innerhalb und außerhalb einer Komponente definiert sind? (Vorlage "web-component-styles.html")</p>
			</section>
			<section>
			<p>Einige globale Styles werden dennoch vererbt:</p>
			<ul>
			<li>Sämtliche Styles, die standardmäßig einen Wert von <code>inherit</code> besitzen (z.B. <code>color</code> oder <code>font-family</code>)</li>
			<li>Eigene CSS-Variablen wie z.B. <code>--my-custom-color</code></li>
			</ul>
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Passe das vorherige Ergebnis (Vorlage "web-component-styles.html") so an, dass ein beliebiger Style per CSS-Variable von außen gesetzt werden kann (z.B. <code>color</code> oder <code>background-color</code>)</p>
			<p>Erinnerung CSS-Variablen:</p>
			<pre>
			<code class="css" data-trim data-line-numbers>
			/* Definition */
			html {
			--my-variable: #abcdef;
			}

			/* Usage */
			.my-class {
			background-color: var(--my-variable, white);
			}
			</code>
			</pre>
			</section>
			<section>
			<p>In der Anfangszeit von Web Components wurde oft folgendes Muster zur Individualisierung verwendet:</p>
			<pre>
			<code class="css" data-trim data-line-numbers>
			/* Global Scope */
			html {
			--my-border-color: #abcdef;
			--my-border-width: 1px;
			--my-margin-top: 1rem;
			--my-margin-bottom: 1rem;
			}

			/* Inside Web Component */
			.container {
			border-color: var(--my-border-color, white);
			border-width: var(--my-border-width, 1px);
			margin-top: var(--my-margin-top, 0.5rem);
			margin-bottom: var(--my-margin-bottom, 0.5rem);
			}
			</code>
			</pre>
			</section>
			<section>
			<p>Eleganteres Stylen von Web Components mittels <code>part</code></p>
			<pre>
			<code class="css" data-trim data-line-numbers>
			/* Global Scope */
			my-component::part(inner) {
			border-color: yellow;
			border-width: 2px;
			}

			/* Inside Web Component */
			<div part="inner"></div>
			</code>
			</pre>
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Passe die <code>CardComponent</code> aus einer vorherigen Übung an (Vorlage "card-component.html"), sodass man Titel und Inhalt einfach von außen per <code>part</code>s stylen kann.</p>
			</section>
			<section>
			<p><code>part</code>s von eingebetteten Web Components exportieren und verfügbar machen</p>
			<pre>
			<code class="html" data-trim data-line-numbers>
			<!-- Inner Component Html -->
			<div part="inner">Inner Text</div>

			<!-- Outer Component Html -->
			<inner-component exportparts="inner"></inner-component>

			<!-- Global Html -->
			<outer-component></outer-component>
			</code>
			</pre>
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Passe das Beispiel (Vorlage "exportparts.html") entsprechend an, sodass von außen sowohl der <code>Inner Text</code> als auch der <code>Outer Text</code> stylebar sind</p>
			</section>
			<section>
			<h3>Stylen von LightDOM-Kindern</h3>
			<p>Web Components können direkte Kinder, die via <code>slot</code> eingefügt werden, stylen. Hierfür gibt es den Pseudo-Elemente-Selektor <code>::slotted([selector])</code>, welcher Elemente selektiert, die in einem Slot stecken:</p>
			<pre>
			<code class="css" data-trim data-line-numbers>
			/* Inside Web Component */
			::slotted() { / Selectors like elements, #id or .class */
			font-style: italic;
			}
			</code>
			</pre>
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Definiere mit dem Pseudo-Elemente-Selektor <code>::slotted()</code> Styles, sodass per <code>slot</code> eingefügte Elemente mit der Klasse <code>red</code> einen roten und Elemente mit der Klasse <code>blue</code> einen blauen Hintergrund haben. Die Schriftart soll jeweils weiß sein (Vorlage "slotted.html")</p>
			</section>
			<section>
			<h3>Events in Web Components</h3>
			<img data-src="/assets/images/web-components-event-bubbling-shadow-dom.png">
			<ul>
			<li>Events können an einer Web Component selbst oder innerhalb des Shadow Dom <code>dispatcht</code> werden</li>
			<li>Das Shadow Root der Komponente stellt eine Art "gläserne Decke" dar</li>
			<li>Standard-Events der UI wie <code>click</code> bubbeln durch das Shadow Dom nach oben durch</li>
			<li>Ein <code>CustomEvent</code> muss entsprechend konfiguriert werden</li>
			</ul>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			button.dispatchEvent(new CustomEvent(
			"tabactivated", // Name des Events, frei wählbar
			{
			detail: "any data", // beliebige Daten wie Strings, Zahlen, Booleans usw.
			bubbles: true, // bestimmt, ob das Event durch alle Eltern nach oben steigt
			cancelable: true, // Abbrechbar per event.preventDefault()
			composed: true // durch eventuelle Shadow Root steigen, falls vorhanden.
			}
			));
			</code>
			</pre>
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Entwickle eine Tab-Komponente (Vorlage "tab-componenmt.html"), welche beim Click auf einen Registerreite / Tab ein Event feuert, welches die Außenwelt über das gerade aktivierte Tab (tab-id) informiert</p>
			</section>
			<section>
			<h3>Lösung</h3>
			<pre>
			<code class="js" data-trim data-line-numbers>
			this.root.innerHTML = `
			<style>
			::slotted(div) {
			display: none;
			}

			::slotted(div.active) {
			display: block;
			}
			</style>

			<div><slot name="tab"></slot></div>
			<div><slot name="content"></slot></div>
			`;
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			connectedCallback() {
			const firstContent = this.querySelector("div");

			firstContent.classList.add("active");

			this.addEventListener("click", (e) => {
			if (e.target.tagName === "SPAN" && e.target.hasAttribute("tab-id")) {
			const oldContent = this.querySelector("div.active");
			const newContent = this.querySelector(`[tab-id="${e.target.getAttribute("tab-id")}"]`);

			oldContent.classList.remove("active");
			newContent.classList.add("active");

			this.dispatchEvent(new CustomEvent("tabclick", {composed: true, bubbles: true, detail: e.target.getAttribute("tab-id"), cancelable: true}));
			}
			});
			}
			</code>
			</pre>
			</section>
			</section>
			<section>
			<section>
			<h2>NodeJS</h2>
			</section>
			<section>
			<h3>Was ist NodeJS?</h3>
			<ul>
			<li class="fragment">"JavaScript auf dem Server"</li>
			<li class="fragment">basiert auf der V8-Engine von Google</li>
			<li class="fragment">Laufzeitumgebung für JavaScript mit eigener API</li>
			</ul>
			</section>
			<section>
			<img data-src="/assets/images/node-js.svg">
			</section>
			<section>
			<h3>Überblick über die Node-API</h3>
			<p>Die API ist in viele verschiedene Module aufgeteilt</p>
			<table>
			<tr><td>fs</td><td>Dateisystem</td></tr>
			<tr><td>crypto</td><td>Kryptografie</td></tr>
			<tr><td>zlib</td><td>Datenkompression</td></tr>
			<tr><td>http</td><td>Webserver</td></tr>
			<tr><td>net</td><td>Netzwerk (TCP)</td></tr>
			<tr><td>tls</td><td>Verschlüsseltes Netzwerk (TCP)</td></tr>
			</table>
			</section>
			<section>
			<p>Aufruf eines Programmes in der Kommandozeile</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			node [Node-Parameter] path/to/script.js [Anwendungsparameter]
			</code>
			</pre>
			<p>z.B.</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			node --inspect index.js --port 3000
			</code>
			</pre>
			</section>
			<section>
			<p>Einbinden von Modulen</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const fs = require("fs");
			</code>
			</pre>
			</section>
			<section>
			<p>Aufbau eines Moduls</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			module.exports = {
			foo: 5,
			sayHello: function(name) {
			return "Hello " + name + "!";
			}
			}
			</code>
			</pre>
			<p>oder</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			exports.foo = 5;
			exports.sayHello = function(name) {
			return "Hello " + name + "!";
			};
			</code>
			</pre>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Schreibe ein Modul, welches eine <code>Square</code>-Klasse zur Verfügung stellt, mit welchem man den Umfang und den Flächeninhalt eines Rechtecks berechnen kann:</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const Square = require("./square");

			const square = new Square(2, 3);

			console.log(square.getArea()); // => 6
			console.log(square.getPerimeter()); // => 10
			</code>
			</pre>
			</section>
			<section>
			<h3>Module für die Kommandozeile</h3>
			<p>package.json</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			npm init -y
			</code>
			</pre>
			<pre>
			<code class="js" data-trim data-line-numbers>
			{
			...
			"bin": {
			"my-command": "./index.js"
			}
			}
			</code>
			</pre>
			</section>
			<section>
			<p>index.js</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			#! /usr/bin/env node

			console.log("Hello world from the command line!");
			</code>
			</pre>
			</section>
			<section>
			<p>Installation</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			npm install -g path/to/project
			</code>
			</pre>
			z.B.
			<pre>
			<code class="bash" data-trim data-line-numbers>
			npm install -g .
			</code>
			</pre>
			</section>
			<section>
			<p>Ausführung</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			my-command
			</code>
			</pre>
			</section>
			<section>
			<p>Kommandozeilenparameter</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			console.log(process.argv);
			</code>
			</pre>
			<p>angelehnt an die Parameter aus der Programmiersprache <code>c</code>:</p>
			<pre>
			<code class="c" data-trim data-line-numbers>
			int main(int argc, char *argv[])
			</code>
			</pre>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Mache das vorherige Programm für die Konsole aufrufbar, sodass die Länge und Breite für das Rechteck per Konsolenargumente übergeben werden können und der Flächeninhalt ausgegeben wird:</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			my-command 2 3
			</code>
			</pre>
			</section>
			<section>
			<h3>Buffer</h3>
			<p>Array-artige Struktur für rohe Bytes</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const b1 = Buffer.from("abc"); // bevorzugt
			const b2 = Buffer.alloc(100, 0); // Länge mit initialen Daten
			const b3 = Buffer.allocUnsafe(100); // Länge ohne initiale Daten
			const b4 = new Buffer("abc"); // offiziell nicht empfohlen

			console.log(b1); // => <Buffer 61 62 63>
			console.log(b1.toString("hex")); // => "616263"
			</code>
			</pre>
			</section>
			<section>
			<p>Mit Buffern arbeiten:</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const a = Buffer.from("a") + Buffer.from("b");
			const b = Buffer.concat([Buffer.from("a"), Buffer.from([98])]);
			const c = b.toString()

			console.log(a); // => ab
			console.log(b); // => <Buffer 61 62>
			console.log(c); // => ab

			for (const byte of a) {
			console.log(byte); // => 97 98
			}
			</code>
			</pre>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Implementiere eine XOR-Verschlüsselung (<code>^</code>-Operator), sodass jedes Byte einer Original-Nachricht der Reihe nach mit dem entsprechenden Byte eines Schlüsselwortes verschlüsselt wird und gebe die verschlüsselte Nachricht als Text aus.</p>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Implementiere zur vorherigen Verschlüsselung eine Entschlüsselung.</p>
			</section>
			<section>
			<p>Lösung</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const word = Buffer.from("abcdef");
			const key = Buffer.from("xyz");
			const encrypted = Buffer.alloc(word.length, 0);

			// encrypt
			for (let i = 0; i < word.length; i++) {
			encrypted[i] = word[i] ^ key[i % key.length];
			}

			// decrypt
			for (let i = 0; i < word.length; i++) {
			word[i] = encrypted[i] ^ key[i % key.length];
			}

			console.log(word.toString()); // => "abcdef"
			</code>
			</pre>
			</section>
			<section>
			<h3>Streams</h3>
			<p>Konstanter Fluss von (meist) großen Datenmengen in kleinen Paketen</p>
			</section>
			<section>
			<p>Gängige Typen von Streams</p>
			<ul>
			<li>Standard In / Out</li>
			<li>HTTP-Requests / -Responses</li>
			<li>TCP-Sockets</li>
			<li>Lese- und Schreib-Streams auf Dateien</li>
			<li>Große Datenbank-Ergebnisse mittels Cursor</li>
			</ul>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const readableStream = fs.createReadStream("./source.txt");
			const writableStream = fs.createWriteStream("./target.txt");

			readableStream.on("data", (data /* Buffer */) => {
			// process data here
			writableStream.write(data)
			});

			readableStream.on("end", (data) => {
			// stream has finished, e.g. EOF (end of file)
			});

			// alternatively pipe content
			readableStream.pipe(writableStream);
			</code>
			</pre>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Lese eine beliebige Datei als Readable Stream, verschlüssele den Inhalt mit der XOR-Methode und schreibe die verschlüsselten Bytes in eine Zieldatei</p>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Ändere das Programm, sodass auf Konsolenebene ein Pipe (\|) ermöglicht wird:</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			echo "Hello World!" \| node index.js
			</code>
			</pre>
			<p>Nutze dafür die implizit vorhandenen Streams von Standard In / Out:</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			process.stdin; // Readable Stream
			process.stdout; // Writable Stream
			</code>
			</pre>
			</section>
			<section>
			<h3>Kryptographie</h3>
			</section>
			<section>
			Mithilfe des nativen <code>crypto</code>-Moduls ist es möglich, moderne sichere kryptografische Verfahren zu verwenden:
			<pre>
			<code class="js" data-trim data-line-numbers>
			const crypto = require("crypto");
			</code>
			</pre>
			Hierzu nutzt NodeJS selber die weit verbreitete OpenSSL-Bibliothek
			</section>
			<section>
			Einen MD5-Hash erzeugen:
			<pre>
			<code class="js" data-trim data-line-numbers>
			const crypto = require("crypto");

			const hash = crypto.createHash("md5");
			const md5 = hash.update("abcdefg")
			.digest(); // Buffer (default)
			// .digest("hex") // Hexadezimal
			// .digest("utf8") // Bytes forciert als Chars

			console.log(md5);
			</code>
			</pre>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Erzeuge jeweils den md5- und den sha256-Hash als Hex-Wert der beiden Texte in der Datei <code>text-examples.txt</code> und vergleiche jeweils ihren md5- und sha256-Hash miteinander</p>
			</section>
			<section>
			<h3>Zippen</h3>
			</section>
			<section>
			Mit dem nativen Modul <code>zlib</code> ist es möglich, Kompression in seinen Anwendungen zu nutzen.
			<pre>
			<code class="js" data-trim data-line-numbers>
			const zlib = require("zlib");

			// Komprimieren
			zlib.deflate("abc" /* buffer \| string */, (err, compressed) => {});

			// Dekomprimieren
			zlib.inflate(compressed /* buffer */, (err, decompressed) => {});

			// Als Stream
			const zipper = zlib.createDeflate();
			const unzipper = zlib.createInflate();

			source.pipe(zipper).pipe(target);
			source.pipe(unzipper).pipe(target);
			</code>
			</pre>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Nutze die einfachen Varianten <code>zlib.deflate</code> und <code>zlib.inflate</code>, um einen beliebigen Text zu komprimieren und anschließend wieder zu dekomprimieren</p>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Nutze die Stream-Varianten <code>zlib.createDeflate</code> und <code>zlib.createInflate</code>, um jeweils ein getrenntes Programm für die Kompression und Dekompression mit <code>process.stdin</code> und <code>process.stdout</code> zu machen, sodass in der Konsole folgende Nutzung möglich ist:</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			echo "abc" \| node compress.js \| node decompress.js
			cat file.txt \| node compress.js > file.zipped
			cat file.zipped \| node decompress.js > file.txt
			</code>
			</pre>
			</section>
			<section>
			<h3>TCP-Verbindungen</h3>
			</section>
			<section>
			<ul>
			<li>Bidirektionale Verbindung</li>
			<li>Duplexfähig</li>
			<li>Besteht immer aus Server- und Client-Socket</li>
			</ul>
			</section>
			<section>
			Mit dem nativen Modul <code>net</code> ist es möglich, eine TCP-Verbindung aufzubauen
			<pre>
			<code class="js" data-trim data-line-numbers>
			/* Server */
			const net = require("net");

			const server = net.createServer((socket) => {

			// new incoming connection
			socket.on("data", (data) => {
			// data is a buffer
			});

			socket.write("Hello World!");
			});

			server.listen(3000);
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			/* Client */
			const net = require("net");

			const socket = net.connect(3000, () => {
			// 'connect' listener
			});

			socket.on("data", (data) => {
			// data is a buffer
			});
			</code>
			</pre>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Implementiere die Clientlogik in der <code>tcp-client.js</code>, um dem Server ein <code>"Hello Server!"</code> zurück zu senden</p>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Sende eine festgelegte Datei vom Server zum Client. Der Server liest die Datei ein und sendet die Inhalte zum Client, welcher diese wiederum in eine Zieldatei schreibt. Eventuell darf auch noch eine Kompression mittels Zip / Deflate implementiert werden.</p>
			</section>
			<section>
			<p>Kurze Wiederholung des HTTP-Protokolls</p>
			<p>Request</p>
			<pre>
			<code class="http" data-trim data-line-numbers>
			GET / HTTP/1.1
			Host: localhost:3456
			</code>
			</pre>
			<p>Response</p>
			<pre>
			<code class="http" data-trim data-line-numbers>
			HTTP/1.1 200
			Content-Type: text/plain
			Content-Length: 12

			Hello World!
			</code>
			</pre>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Implementiere mithilfe des TCP-Sockets einen minimalen HTTP-Server, welcher <code>Hello <name></code> als Text zurück gibt, wobei <code><name></code> aus dem Query-Parameter gelesen werden soll</p>
			</section>
			<section>
			<h3>HTTP-Server</h3>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const http = require("http");

			const server = http.createServer((req, res) => {
			res.writeHeader(200, {
			"Content-Type": "text/plain", /* Put Content-Type here */
			});

			console.log(req.rawHeaders);
			console.log(req.method);
			console.log(req.url);

			res.write(/* response content */);
			res.end(); /* important if no Content-Length is specified */
			});

			server.listen(3456);
			</code>
			</pre>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>Experimentiert mit verschiedenen Möglichkeiten von <code>Content-Length</code> und dem Vorhandensein von <code>res.end()</code>, mit längerer oder kürzerer <code>Content-Length</code> als der tatsächliche Body oder teilt den Body in zwei <code>res.write()</code> und verzögert künstlich mit einem setTimeout() den zweiten Teil und schaut euch im Browser bei den Entwickler-Tools die Timings der Response an.</p>
			</section>
			<section>
			<h3>Worker Threads</h3>
			</section>
			<section>
			<p>Was sind Worker Threads?</p>
			<p>Eine bidirektionale nachrichten-basierte Implementierung von Multithreading in NodeJS</p>
			</section>
			<section>
			<p>Beispiel:</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			// Main Thread
			const { Worker } = require('worker_threads');

			const data = 'some data';

			const worker = new Worker("path/to/worker.js", { workerData: data });

			worker.on('message', message => console.log('Reply from Thread:', message));

			// Worker Thread
			const { workerData, parentPort } = require('worker_threads');

			const result = workerData.toUpperCase();

			parentPort.postMessage(result);
			</code>
			</pre>
			</section>
			<section>
			<p>Weitere nützliche Funktionen:</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			// Main Thread
			worker.on('message', message => processMessage(message));
			worker.on('error', error => console.error(error));

			worker.postMessage({a: 1}); // send any data to the worker

			worker.terminate(); // manually terminate worker thread

			// Worker Thread
			parentPort.on('message', message => doSomething(message)); // receive messages from the main thread

			process.exit(0); // terminate self, optionally with exit code
			</code>
			</pre>
			</section>
			<section>
			<p>Aufgabe</p>
			<p>
			Nutze die in den <code>examples</code> vorhandene Funktion <code>isPrime</code> (010-nodejs/mt-main.js und 010-nodejs/mt-worker.js) und implementiere mit Hilfe der <code>Worker Threads</code> die Suche nach Primzahlen.
			Die gewünschte maximale Zahl, bis zu der die Primzahlen gesucht werden sollen als auch die Anzahl der Threads, mit der gleichzeitig gesucht werden soll, sollen möglichst einfach parametrisierbar sein (einfache Variable im Code genügt).

			Probiert verschiedene Thread-Anzahlen aus und vergleicht einmal die benötigten Zeiten.
			</p>
			</section>
			<section>
			<p>Hinweise:</p>
			<ul>
			<li>Bei der Suche bis zu 1.000.000 und 8 Threads soll der erste Thread von 0 bis 125.000 suchen, der zweite von 125.000 bis 250.000 usw.</li>
			<li>Nutzt Promises, um auf alle Ergebnisse warten zu können. (s. <code>Promise.all</code>)</li>
			<li>per <code>workerData</code> können auch Objekte übergeben werden</li>
			<li>Die gefundenen Primzahlen können ausgegeben werden, müssen aber nicht. In erster Linie geht es darum, die Arbeit auf mehrere Threads aufzuteilen.</li>
			</ul>
			</section>
			<section>
			<h3>Multi Page Applications</h3>
			</section>
			<section>
			<p>Im Gegensatz zu einer SPA ("Single Page Application") teilt sich eine Multi Page Application in mehrere Unterseiten auf, die sich per URL z.B. im Browser adressieren lassen.</p>
			</section>
			<section>
			<p>In einem neuen Ordner / Projekt:</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			npm init -y

			npm install express pug

			mkdir public
			</code>
			</pre>
			<pre>
			<code class="js" data-trim data-line-numbers>
			// index.js (s. examples 010-nodejs/mpa.js)
			const express = require("express");
			const app = express();

			app.use(express.static("public"));

			app.listen(3002);
			</code>
			</pre>
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Fülle das Verzeichnis "public" mit jeweis einer HTML-Datei für eine "Home"- und eine "About Us"-Seite, die beide eine einfache Navigations-Leiste enthalten (simple <code>span</code> mit Link (href)), um zwischen diesen beiden Seiten navigieren zu können.
			Unterscheiden sollen sich diese beiden Seiten durch ihren "Inhalt", indem dort einfach "Home" und "About Us" enthalten ist.</p>
			</section>
			<section>
			<h3>Serverseitiges Rendern</h3>
			</section>
			<section>
			<p>Template-Engine "pug"</p>
			<pre>
			<code class="css" data-trim data-line-numbers>
			html
			head
			body
			div This is a div with some text
			#main.my-class This is also a div with short-hands for id and class
			a(href="/") This is a link with href
			</code>
			</pre>
			</section>
			<section>
			<p>Conditionals</p>
			<pre>
			<code class="css" data-trim data-line-numbers>
			html
			head
			body
			if name
			div Hello #{name}!
			else
			div Hello Anonymous"
			</code>
			</pre>
			</section>
			<section>
			<p>Extension / Inheritance</p>
			<pre>
			<code class="css" data-trim data-line-numbers>
			// layout.pug
			html
			head
			body
			div Some static content
			block content

			// page.pug
			extends layout.pug

			block content
			div This is my home content
			</code>
			</pre>
			</section>
			<section>
			<p>Pug in Express</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			mkdir views
			</code>
			</pre>
			<pre>
			<code class="js" data-trim data-line-numbers>
			// ...

			app.set('view engine', 'pug');

			app.get('/', (req, res) => {
			// file name without .pug and some data passed to the template
			res.render('index', { title: 'Hey', message: 'Hello there!' })
			});

			app.listen(3002);
			</code>
			</pre>
			<pre>
			<code class="css" data-trim data-line-numbers>
			// views/index.pug
			html
			head
			title #{title}
			body #{message}
			</code>
			</pre>
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Implementiere die Seiten aus dem vorherigen Beispiel mit Pug (nutze Vererbung, um die Navigationsleiste nicht doppelt implementieren zu müssen) und
			baue einen Gruß im Seitentext mit dynamischen Namen ein, den man z.B. in der URL als Query-Parameter "?name=Joe" angibt und der im Server ausgewertet wird.</p>
			</section>
			</section>
			<section>
			<section>
			<h2>Betrieb von Anwendungen</h2>
			</section>
			<section>
			<p>Wichtige Aspekte beim produktiven Betrieb von Anwendungen</p>
			<ul>
			<li>Stabilität</li>
			<li>Zugriffsschutz</li>
			<li>Sicherheitsupdates</li>
			<li>Ausfallsicherheit</li>
			</ul>
			</section>
			<section>
			<p>Typische Werkzeuge beim Betrieb</p>
			<ul>
			<li>Webserver</li>
			<li>Proxies</li>
			<li>Laufzeitumgebungen</li>
			<li>Application-Server / Prozess-Manager</li>
			<li>Remote-Zugänge</li>
			</ul>
			</section>
			<section>
			<h3>Beispielhafte Produktivumgebung mit lokaler VM</h3>
			</section>
			<section>
			<p>Vorbereitungen</p>
			<ul>
			<li>Oracle VirtualBox</li>
			<li>Ubuntu Server 24.04</li>
			</ul>
			</section>
			<section>
			<p>Eckdaten für die VM</p>
			<ul>
			<li>2048 MB Ram</li>
			<li>Netzwerktyp "Brücke" / "Bridge"</li>
			<li>Linux / Ubuntu (64-Bit)</li>
			<li>20GB HDD</li>
			</ul>
			</section>
			<section>
			<img data-src="/assets/images/ubuntu-installation.png">
			</section>
			<section>
			<p>Nach der Installation in der VM mit den bekannten Credentials anmelden und die IP in Erfahrung bringen:</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			ip a
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			2: enp0s3: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP [...]
			link/ether 08:00:27:43:e5:2c brd ff:ff:ff:ff:ff:ff
			inet 10.0.0.166/16 metric 100 brd 10.0.255.255 scope global dynamic enp0s3
			valid_lft 863191sec preferred_lft 863191sec
			</code>
			</pre>
			</section>
			<section>
			<h3>Anmeldung am Server</h3>
			<p>Nach der Installation am Server anmelden</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			ssh user@domain [-p 12345]
			</code>
			</pre>
			<p>Beispiele für eine Domain: localhost, www.example.com, 127.0.0.1, [0:0:0:0:0:0:0:1], [::1]</p>
			</section>
			<section>
			<h3>Pakete aktualisieren</h3>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			# Paketlisten updaten
			sudo apt update

			# Pakete updaten
			sudo apt upgrade
			</code>
			</pre>
			</section>
			<section>
			<h3>Ordner-Navigation</h3>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			# In einen Ordner gehen
			cd [Ordner]

			# Zum vorherigen Ordner gehen
			cd -

			# Längere Ordnerpfade sind auch möglich
			# realtiv
			cd a/b/c/d

			# absolut
			cd /var/www/html
			</code>
			</pre>
			</section>
			<section>
			<h3>Ordner erstellen und löschen</h3>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			# Einen Ordner erstellen
			mkdir my-folder

			# Mehrere Hierarchien
			mkdir -p a/b/c/d

			# Mehrere Ordner
			mkdir a b c

			# Ordner rekrusiv löschen
			rm -rf [Ordner]
			</code>
			</pre>
			</section>
			<section>
			<h3>Dateien zum Server kopieren</h3>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			# scp [Quelle] [Ziel]
			scp . user@domain:/ziel
			</code>
			</pre>
			</section>
			</section>
			</div>
			</div>