public/uni
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7970ba84d111c8b4f58851944572281e81fcac1e
uni/slides/dhbw/01_intro.md
T

16 KiB
Raw Blame History

marp, theme, paginate, backgroundColor, header, footer, title
marp theme paginate backgroundColor header footer title
true gaia true Web Engineering – DHBW Stuttgart Michael Czechowski – SoSe 2026 Intro
<style> :root { --color-foreground: #1a1a2e; --color-highlight: #d63384; --color-dimmed: #4a4a6a; } section.invert { --color-foreground: #fff; } section { font-size: 1.4rem; } h1 { color: #a02060; } section.invert h1 { color: #fff; } h2 { color: #1f2937; } section.invert h2 { color: #f48fb1; } pre { background: #0f0f23; color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; } pre code { background: transparent; color: inherit; } code { background: #1a1a2e; color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; } a { color: var(--color-highlight); } </style>

bg cover opacity:0.2

Web Engineering

DHBW Stuttgart · Informatik / Wirtschaftsinformatik

Sommersemester 2026

https://librete.ch/dhbw/

bg fit

Ressourcen zum Selbstlernen

Herzlich Willkommen!

1. Sitzung: 08.05.2026

Über mich

bg right:33% fit

Michael Werner Czechowski

  • Systems and Platform Engineer
  • Schwerpunkte:
    • Web-Technologien, Barriere-Armut, Open Source
  • Hintergrund:
    • Philosophie (Uni Stuttgart)
    • Wirtschaftsinformatik (Leibniz-FH Hannover)
  • Honorardozent (DHBW Stuttgart, HdM Stuttgart, Leibniz-FH)
  • Kontakt: michael.czechowski@lehre.dhbw-stuttgart.de

Vorstellungsrunde

Wer bist du, was machst du?

Ich bin ___, mache bei ___ ___ und ein Fun Fact über mich ist, dass ich ...

  • ... sämtliche One Piece Bände gelesen habe.
  • ... alle XKCD Comics mit Titel kenne.
  • ... irgendwann bei ___ arbeiten möchte.
  • ... Paulaner Spezi im Blindtest herausschmecken kann.

Vorlesungsplan

<style scoped> .lp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 0.5rem; } .lp-card { border: 1px solid #d63384; border-radius: 8px; padding: 10px 12px; background: #fff; font-size: 0.95em; display: flex; flex-direction: column; gap: 4px; } .lp-card .head { font-weight: bold; color: #a02060; display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85em; } .lp-card .head .num { font-size: 1.1em; } .lp-card .topic { color: #1a1a2e; line-height: 1.25; } .lp-card.milestone { background: #fce4ec; border-color: #a02060; border-width: 2px; } .lp-card.milestone .topic { font-weight: bold; } </style>
108.05.
Intro · Projektgruppen · Internet 101
215.05.
HTML und CSS (Frameworks)
322.05.
JS (Frameworks) und npm
429.05.
nodeJS: Scripting, Running, Building
505.06.
Express API, CRUD, Middlewares
612.06.
Projektwerkstattbericht
719.06.
Testing (Unit · Integration · E2E)
826.06.
TypeScript
903.07.
Docker · Proxies · DBs
1010.07.
Wrap-up & Projektsupport
1117.07.
Präsentation

Erwartungen und Wünsche

  • Was haben wir bisher gelernt?
  • Was kennen wir bereits aus dem Arbeitskontext?
  • Welche Technologien nutzen wir bereits?
  • Was möchte ich hier lernen: Frontend, Backend, DevOps?
  • Eigene FOSS entwickeln?
  • CLI-Skills verbessern?
  • Cloud, Cloud, Cloud?

Prüfungsleistung – Übersicht

Eigenes Projekt: Web-App ODER Backend (API/CLI).

Punkte Bereich
30 Grundanforderungen (Projektgrundlagen + Präsentation)
25 Clean Code Prinzipien
25 Accessibility & UX
20 Technische Umsetzung
100 Basispunkte
+15 Bonuspunkte (max. 3 Features a 5 P.)

Prüfungsleistung – Grundanforderungen (30 P.)

Projektgrundlagen (15 P.)

  • Funktionsfähige Anwendung (8 P.)
  • Repository mit Versionskontrolle (4 P.)
  • Projektdokumentation / README (3 P.)

Präsentation (15 P.)

  • Elevator Pitch (5 P.)
  • Technische Präsentation (5 P.)
  • Projektevolution: wie hat sich das Projekt vs. Ursprungsidee verändert? (5 P.)

Prüfungsleistung – Clean Code (25 P.)

Projektstruktur (10 P.)

  • Ordnerstruktur (5 P.)
  • Datei-Organisation (5 P.)

Code-Qualität (10 P.)

  • KISS – Keep It Simple, Stupid (3 P.)
  • Beschreibende Namen (3 P.)
  • Funktionsverantwortlichkeiten (4 P.)

Kommentierung & Dokumentation (5 P.)

Prüfungsleistung – Accessibility & UX (25 P.)

Web Accessibility (15 P.)

  • Semantisches HTML (5 P.)
  • ARIA Labels & Alt-Texte (5 P.)
  • Tastaturnavigation (5 P.)

Responsive Design (10 P.)

  • Mobile First Approach (5 P.)
  • Flexbox/Grid Layout (5 P.)

Prüfungsleistung – Technische Umsetzung (20 P.)

  • Plattformunabhängigkeit (5 P.)
  • Package Management (5 P.)
  • Build Tools & Optimierung (5 P.)
  • Live-Demo (5 P.)

Prüfungsleistung – Bonuspunkte (max. 15 P.)

Mindestens 2 Bereiche wählen, je 5 Punkte:

  • API Integration
  • Local Storage / State Management
  • Progressive Web App Features
  • Testing
  • Erweiterte Responsive Features (3+ Breakpoints)
  • Security Features

Prüfungsleistung – Abgabe & Termine

  • Code-Upload: bis 27.07.
  • Präsentation: 17.07. (Gruppen, ~10 Min.)

Details: https://git.librete.ch/DHBW/pruefungsleistung

Was ist (k)eine Web App?

Exkurs

Was ist (k)eine Web App?

Keine Web App ist:

  • Desktop-Applikation (GNU/Linux, Windows, macOS)
  • Mobile-Applikation (iOS, Android)
  • Embedded System (Microcontroller, IoT)

Eine Web App ist:

  • plattformunabhängig (läuft im Browser)
  • nutzt in der Regel HTTP-Requests
  • keine Installation nötig — serverseitig aktualisiert
  • gebaut in Web-Technologien (HTML, CSS, JS/TS)
  • skalierbar durch verteilte Architektur

Internet-Timeline

Jahr Meilenstein
1966 ARPANET-Projekt startet (DARPA)
1969 Erste Verbindung zwischen UCLA und Stanford
1974 TCP/IP-Protokoll entwickelt
1989 Tim Berners-Lee erfindet das WWW (CERN)
1993 Mosaic — erster grafischer Browser
1994 W3C gegründet (HTML, CSS, SVG, WCAG)
1995 ECMAScript / JavaScript wird Standard
2008 V8 JavaScript Engine (Chrome / Node.js)

bg fit

Das WWW (1989)

Tim Berners-Lee am CERN (Genf)

Problem: Wissenschaftler:innen können Forschungsdokumente nicht verlinken — Inkompatible Systeme, kein gemeinsames Format.

Lösung — drei Bausteine:

  • HTML — Auszeichnungssprache für Dokumente
  • HTTP — Protokoll zur Übertragung
  • URL — eindeutige Adressen

1991: erste Webseite geht online · 1993 vom CERN gemeinfrei freigegeben.

→ WWW ≠ Internet. Das WWW ist eine Anwendung auf dem Internet.

bg fit

bg cover

Heute: Physische Infrastruktur

  • 5,5 Milliarden Menschen online
  • > 400 Unterseekabel, ca. 1,3 Mio. km Glasfaser
  • Daten reisen mit Lichtgeschwindigkeit
  • Latenz Frankfurt — New York: ~80 ms

→ Keine "Cloud" ohne Kabel. Das Internet ist physische Infrastruktur — und damit angreifbar.

Geopolitik: Five-Eyes-Allianz (USA, UK, CA, AU, NZ) zapft Unterseekabel ab (Programm "Tempora", aufgedeckt 2013 durch Snowden). DE ist Teil der Fourteen Eyes.

bg fit

HTTP – Hypertext Transfer Protocol

Request:

GET /products HTTP/1.1
Host: localhost:8080

Response:

HTTP/1.1 200 OK
Content-Type: application/json

[{"id": 1, "name": "Produkt A"}, ...]

Onboarding

Tools, Runtimes, Workflows

Werkzeuge & Betriebssystem

Erforderliche Werkzeuge:

  • Terminal (zsh / bash / fish / pwsh) — Kommandozeile
  • Editor (siehe folgende Folie)
  • JavaScript-Runtime (Node.js / Bun / Deno)
  • Browser mit DevTools (Chromium / Firefox / Safari)
  • Git — verteiltes Versionskontrollsystem (Stand der Industrie)

OS-Empfehlung:

OS Status
macOS First-class, viele Tools "just work"
Linux First-class, beste Server-Parität
Windows + WSL2 Empfohlen — Windows-CLI hat Edge Cases
Windows nativ (PowerShell) Funktioniert, aber holpriger Pfad

Node.js installieren – macOS

Empfohlen: LTS (aktuell Node.js 24 — Stand 2026).

Paketmanager: Homebrew

# Homebrew installieren (falls nicht vorhanden)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Node.js LTS installieren
brew install node@24

# Version prüfen
node --version
npm --version

Alternative: Installer von nodejs.org

Node.js installieren – Linux

Empfohlen: LTS (aktuell Node.js 24).

Debian / Ubuntu (NodeSource):

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install -y nodejs

Arch / Manjaro:

sudo pacman -S nodejs npm

Fedora / RHEL:

sudo dnf module install nodejs:24/common

→ Distro-Pakete sind oft veraltet. Versionsmanager (folgende Folie) bevorzugen.

Node.js installieren – Windows

Empfohlen: LTS (aktuell Node.js 24).

Option 1: winget (empfohlen, Win 10/11):

winget install OpenJS.NodeJS.LTS

Option 2: Chocolatey (chocolatey.org):

choco install nodejs-lts

Option 3: Scoop (scoop.sh):

scoop install nodejs-lts

Option 4: Installer von nodejs.org

→ Empfehlung: WSL2 + Linux-Workflow nutzen.

Direkt-Install: Wenn es eng wird

Typisches Szenario — drei parallele Projekte mit unterschiedlichen Anforderungen:

Projekt Stack Node-Version
Praktikums-API Express (Legacy) 18.x (LTS Hydrogen)
Studienarbeit Next.js 15 22.x (LTS Jod)
Aktuelles Lab-Projekt neueste Features 24.x (Iron, current LTS)

System-Install kennt nur eine Node-Version global → Konflikt.

Symptome im Alltag

  • npm install bricht mit engines-Warning ab
  • native Module (z. B. node-sass) bauen nicht
  • CI-Pipeline ist grün, lokal rot — oder umgekehrt
  • erheblicher Zeitverlust beim Debuggen von Versions-Konflikten

→ Lösung: Versionsmanager und Node-Version pro Projekt pinnen.

Node-Versionsmanager

Verschiedene Projekte brauchen oft verschiedene Node-Versionen. Lösung: Versionsmanager.

Tool Sprache Geschwindigkeit Plattform
nvm Bash langsam (Shell-Funktion) macOS, Linux
fnm Rust sehr schnell macOS, Linux, Windows
asdf Bash mittel, multi-language macOS, Linux
volta Rust schnell, pinning per package.json alle 
# fnm
curl -fsSL https://fnm.vercel.app/install | bash
fnm install --lts        # aktuell Node 24
fnm use lts-latest

# .nvmrc / .node-version automatisch
echo "lts/*" > .nvmrc
fnm use   # liest .nvmrc

Alternative Runtimes

Runtime Erschienen Engine USP
Node.js 2009 V8 (C++) Standard, größtes Ökosystem
Deno 2020 V8 (Rust) Sicherheit, TypeScript nativ, Std-Lib
Bun 2022 JavaScriptCore (Zig) Geschwindigkeit, all-in-one 
# Deno
curl -fsSL https://deno.land/install.sh | sh
deno run main.ts

# Bun
curl -fsSL https://bun.sh/install | bash
bun install
bun run dev

→ Im Kurs primär Node.js. Bun und Deno sind ebenfalls zulässig.

Editor (IDE)

  • VS Code (empfohlen) — kostenlos, große Plugin-Auswahl
  • JetBrains WebStorm — sehr mächtig, kostenpflichtig
  • Vim / Neovim / Emacs — für CLI-Profis
  • Zed — modern, schnell

Browser DevTools

Chromium / Firefox / Safari — F12 oder Cmd+Opt+I

Chromium = Open-Source-Basis von Chrome, Edge, Brave, Opera, Vivaldi etc.

Wichtigste Panels:

  • Network — HTTP-Requests, Responses, Timing
  • Console — console.log, JS-Errors, REPL
  • Elements — DOM-Inspektor, Live-CSS-Editor
  • Sources — Debugger, Breakpoints, Source-Maps
  • Performance — Profiling, Frame-Rate, FPS
  • Application — LocalStorage, Cookies, Service Workers

HTTP-Clients

  • Bruno (usebruno.com) — open source, git-friendly
  • Hoppscotch (hoppscotch.io) — open source, browser-basiert (vormals Postwoman)
  • Insomnia / Postman — etabliert, freemium
  • curl / httpie — CLI (Command-Line Interface, scriptbar)

Git Setup & Workflow

Einmalige Konfiguration:

git config --global user.name "Vorname Nachname"
git config --global user.email "vorname.nachname@example.com"
git config --global init.defaultBranch main
git config --global pull.rebase true

SSH-Key für GitHub/GitLab:

ssh-keygen -t ed25519 -C "vorname.nachname@example.com"
cat ~/.ssh/id_ed25519.pub   # → in GitHub-Settings einfügen

Tägliche Befehle:

git status                  # was hat sich geändert?
git add <file>              # für Commit vormerken
git commit -m "feat: ..."   # Conventional Commits
git push                    # hochladen
git pull --rebase           # neueste Änderungen holen

Projekt-Skeleton

mkdir mein-projekt && cd mein-projekt
git init
npm init -y                 # erzeugt package.json
echo "node_modules" > .gitignore
echo ".env" >> .gitignore
npm install express

package.json minimal:

{
  "name": "mein-projekt",
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "start": "node index.js",
    "dev": "node --watch index.js"
  }
}

.env für Secrets (nie committen!), .env.example mit Dummy-Werten committen.

Reference in New Issue View Git Blame Copy Permalink