dhbw: neuer kurs technik I — 4 kapitel + demo assets

slides/dhbw/04_nodejs_advanced.md

@@ -0,0 +1,258 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Web Engineering – DHBW Stuttgart"
+footer: "Michael Czechowski – SoSe 2025"
+---
+
+<style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #005f8a;
+  --color-dimmed: #4a6a7a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
+section {
+  font-size: 1.7rem;
+}
+h1 {
+  color: #005f8a;
+}
+section.invert h1 {
+  color: #fff;
+}
+pre {
+  background: #0f1e2e;
+  color: #00b4d8;
+  border-radius: 8px;
+  border-left: 3px solid #005f8a;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a3a4a;
+  color: #00b4d8;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
+}
+</style>
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #001520 -->
+
+# node.js – Advanced
+
+---
+
+# node.js – Fun Facts
+
+- Entwickelt von Ryan Dahl in 2009
+- Erste serverseitige Laufzeitumgebung in JavaScript (C++)
+- Inspiriert von Nginx (Non-blocking I/O)
+
+**Alternativen heute:**
+- **Deno** (2020): Rust, Tokio
+- **Bun** (2022): Zig
+
+---
+
+# process – Prozess-Steuerung
+
+```javascript
+process.on("SIGINT", () => {
+  console.log("Received SIGINT. Closing server...");
+  server.close(() => {
+    console.log("Server closed.");
+    process.exit(0);
+  });
+});
+
+// Signale
+process.exit(0);  // Erfolgreich
+process.exit(1);  // Fehler
+```
+
+---
+
+# node.js Module System
+
+```javascript
+// ES Modules
+import express from 'express';
+import { port } from './src/config/constants.js';
+
+// CommonJS
+const fs = require('fs');
+```
+
+---
+
+# HTTP Request mit node-fetch
+
+```javascript
+// Node.js 18+ hat fetch eingebaut
+const res = await fetch('https://api.example.com/data');
+const data = await res.json();
+
+// Ältere Versionen: node-fetch
+import fetch from 'node-fetch';
+```
+
+---
+
+# Web Server, Builder, Bundler
+
+```bash
+# Boilerplates erstellen
+npm create vite@latest my-app -- --template react
+npm create svelte@latest
+npm create astro@latest
+
+# nuxt
+npm install nuxt
+npm run dev
+```
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/js-frameworks-overview.png)
+
+
+---
+
+# Express – Grundlagen
+
+```javascript
+import express from 'express';
+const app = express();
+
+app.listen(port, () => {
+  console.log(`Server läuft auf Port ${port}`);
+});
+```
+
+---
+
+# Express – Middleware
+
+```javascript
+app.use(express.json());
+
+app.use('/api', (req, res, next) => {
+  console.log('Time:', Date.now());
+  next();
+});
+
+app.use((req, res, next) => {
+  console.log('Middleware 2');
+  next();
+});
+```
+
+---
+
+# Express – CRUD Routes
+
+```javascript
+app.get('/api/:key', async (req, res) => {
+  const context = cache.get(req.params.key);
+  res.json({ context });
+});
+
+app.post('/api/:key', async (req, res) => {
+  const payload = req.body;
+  res.json({ created: cache.set(req.params.key, payload) });
+});
+
+app.put('/api/:key', async (req, res) => {
+  const payload = req.body;
+  res.json({ updated: cache.update(req.params.key, payload) });
+});
+
+app.delete('/api/:key', async (req, res) => {
+  cache.remove(req.params.key);
+  res.json({ deleted: req.params.key });
+});
+```
+
+---
+
+# Express – server.listen
+
+```javascript
+const server = app.listen(port, () => {
+  console.log(`Server läuft auf Port ${port}`);
+});
+
+server.on('error', (err) => {
+  console.error('Server error:', err);
+});
+
+server.close(() => {
+  console.log('Server geschlossen');
+});
+```
+
+---
+
+# WebSockets
+
+```javascript
+import { WebSocketServer } from 'ws';
+
+const wss = new WebSocketServer({ port: 8080 });
+
+wss.on('connection', (ws) => {
+  console.log('Client verbunden');
+
+  ws.on('message', (data) => {
+    console.log('Empfangen:', data.toString());
+    ws.send('Pong');
+  });
+});
+```
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/ts-js-compilation.png)
+
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/docker-orchestration.png)
+
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/test-automation-trophy.png)
+
+
+---
+
+# Fragen?
+
+1. Wozu dient `process.on('SIGINT')`?
+2. Was macht `app.use(express.json())`?
+3. Wie erstellst du einen GET-Endpoint mit Express?