diff --git a/Makefile b/Makefile index 0c159f7..bd89aa3 100644 --- a/Makefile +++ b/Makefile @@ -22,8 +22,8 @@ DEPLOY_HOST = tengo@tuttle.uberspace.de 223015c_DEPLOY = /home/tengo/html/hdm/223015c 223015c_KLAUSUR = 1 -dhbw_NAME = Technik I – Grundlagen IT -dhbw_KAPITEL = 01_web_eng 02_css_extended 03_nodejs_basics 04_nodejs_advanced 05_testing 06_typescript 07_docker 08_best_practices +dhbw_NAME = Web Engineering +dhbw_KAPITEL = 01_intro 02_html_css 03_js_frameworks 04_nodejs_basics 05_express 06_testing 07_typescript 08_docker 09_best_practices dhbw_DEPLOY = /home/tengo/html/dhbw dhbw_KLAUSUR = diff --git a/slides/dhbw/01_intro.md b/slides/dhbw/01_intro.md new file mode 100644 index 0000000..3657bd9 --- /dev/null +++ b/slides/dhbw/01_intro.md @@ -0,0 +1,606 @@ +--- +marp: true +theme: gaia +paginate: true +backgroundColor: #fff +header: "Web Engineering – DHBW Stuttgart" +footer: "Michael Czechowski – SoSe 2026" +title: Intro +--- + + + + + + + +![bg cover opacity:0.2](./assets/background.png) + +# Web Engineering + +**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik + +**Sommersemester 2026** + +--- + +# Ressourcen zum Selbstlernen + +- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/) +- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/) +- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/) +- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/) +- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/) + +--- + + + +# Herzlich Willkommen! + +## 1. Sitzung: 08.05.2026 + +--- + +# Über mich + +![bg right:33% fit](./assets/logos/collage.png) + +**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 + +--- + +# Vorlesungsplan + + + +
+
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
+
+ +--- + +# 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 + +--- + +# 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](./assets/arpanet.jpg) + +--- + +# 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](./assets/mosaic.jpg) + +--- + + + + +![bg cover](./assets/img_633d7b91366e0-1025x538-768x403.jpg) + +--- + +# 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](./assets/demos/browser-server-sequence.png) + + +--- + +# 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](https://brew.sh)** + +```bash +# 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](https://nodejs.org) + +--- + +# Node.js installieren – Linux + +Empfohlen: **LTS** (aktuell **Node.js 24**). + +**Debian / Ubuntu** ([NodeSource](https://github.com/nodesource/distributions)): +```bash +curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - +sudo apt install -y nodejs +``` + +**Arch / Manjaro:** +```bash +sudo pacman -S nodejs npm +``` + +**Fedora / RHEL:** +```bash +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): +```powershell +winget install OpenJS.NodeJS.LTS +``` + +**Option 2: Chocolatey** ([chocolatey.org](https://chocolatey.org)): +```powershell +choco install nodejs-lts +``` + +**Option 3: Scoop** ([scoop.sh](https://scoop.sh)): +```powershell +scoop install nodejs-lts +``` + +**Option 4:** Installer von [nodejs.org](https://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 | + +```bash +# 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 | + +```bash +# 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 + +- **VS Code** (empfohlen) — kostenlos, große Plugin-Auswahl +- **JetBrains WebStorm** — sehr mächtig, kostenpflichtig + - kostenlos für Studierende via [JetBrains Education](https://www.jetbrains.com/community/education/#students) +- **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](https://usebruno.com)) — open source, git-friendly +- **Hoppscotch** ([hoppscotch.io](https://hoppscotch.io)) — open source, browser-basiert (vormals Postwoman) +- **Insomnia** / **Postman** — etabliert, freemium +- **curl** / **httpie** — CLI (Command-Line Interface, scriptbar) + +--- + +# Git Setup & Workflow + +**Einmalige Konfiguration:** +```bash +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:** +```bash +ssh-keygen -t ed25519 -C "vorname.nachname@example.com" +cat ~/.ssh/id_ed25519.pub # → in GitHub-Settings einfügen +``` + +**Tägliche Befehle:** +```bash +git status # was hat sich geändert? +git add # für Commit vormerken +git commit -m "feat: ..." # Conventional Commits +git push # hochladen +git pull --rebase # neueste Änderungen holen +``` + +--- + +# Projekt-Skeleton + +```bash +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:** +```json +{ + "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. + +--- diff --git a/slides/dhbw/02_css_extended.md b/slides/dhbw/02_css_extended.md deleted file mode 100644 index b4a834c..0000000 --- a/slides/dhbw/02_css_extended.md +++ /dev/null @@ -1,292 +0,0 @@ ---- -marp: true -theme: gaia -paginate: true -backgroundColor: #fff -header: "Web Engineering – DHBW Stuttgart" -footer: "Michael Czechowski – SoSe 2026" ---- - - - - - - - -# Web Engineering - -**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik - -**Sommersemester 2026** · Sitzung 2 — HTML & CSS (Frameworks) - ---- - -# Ressourcen zum Selbstlernen - -- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/) -- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/) -- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/) -- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/) -- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/) - ---- - -# Inhalt - -Aufbauend auf den Grundlagen aus Sitzung 1. - -1. Attribut-Selektoren -2. Combinators (vertieft) -3. Pseudo-Klassen — erweitert -4. Shorthand Properties -5. Flexbox-Shorthands -6. Custom Properties (Variables) -7. CSS Functions (`calc`, `clamp`, ...) -8. Transition & Animation -9. CSS Frameworks (Tailwind & Co.) - ---- - - - - -# CSS: Extended - ---- - -# CSS Selectors – Attribut-Selektoren - -```css -/* presence */ -[disabled] { opacity: 0.5; } - -/* exact value */ -[type="email"] { border-color: blue; } - -/* contains word */ -[class~="btn"] { cursor: pointer; } - -/* starts with */ -[href^="https"] { color: green; } - -/* ends with */ -[src$=".png"] { border: 1px solid #ccc; } - -/* contains substring */ -[class*="icon"] { padding-left: 20px; } -``` - ---- - -# CSS Combinators - -```css -/* Child (direkt) */ -div > p { margin: 0; } - -/* Descendant (Nachkomme) */ -div p { margin: 0; } - -/* Next Sibling */ -h1 + p { font-size: 1.2em; } - -/* Subsequent Sibling */ -h1 ~ p { color: #666; } - -/* Selector List */ -h1, h2, h3 { font-weight: bold; } -``` - ---- - -# Pseudo Classes – Erweitert - -```css -/* Form States */ -:valid { border-color: green; } -:invalid { border-color: red; } -:placeholder-shown { color: #999; } - -/* Content */ -:before { content: "→ "; } -:after { content: " [Wichtig]"; } -:first-letter { font-size: 2em; } -:first-line { font-weight: bold; } - -/* NOT */ -:not(.disabled) { pointer-events: auto; } -:not(:last-child) { border-bottom: 1px solid #ccc; } -``` - ---- - -# Shorthand Properties - -```css -/* margin: top right bottom left */ -margin: 10px 20px 10px 20px; - -/* centering */ -margin: 0 auto; - -/* padding same */ -padding: 20px; - -/* border: width style color */ -border: 1px solid #333; - -/* background: color image position/size repeat */ -background: #fff url(logo.png) 0 0 no-repeat; - -/* font: style variant weight size/line-height family */ -font: italic normal bold 16px/1.5 Arial, sans-serif; -``` - ---- - -# Flexbox Shorthands - -```css -/* flex: grow shrink basis */ -flex: 1 0 auto; - -/* place-items: align-items justify-items */ -place-items: center stretch; - -/* place-content: align-content justify-content */ -place-content: space-between center; - -/* gap: row-gap column-gap */ -gap: 20px 40px; -``` - ---- - -# CSS Custom Properties (Variables) - -```css -:root { - --primary-color: #d63384; - --spacing: 20px; - --radius: 8px; -} - -.button { - background: var(--primary-color); - padding: var(--spacing); - border-radius: var(--radius); -} -``` - ---- - -# CSS Functions - -```css -/* calc */ -width: calc(100% - 40px); - -/* min/max/clamp */ -width: min(100%, 600px); -font-size: clamp(14px, 2vw, 20px); - -/* var with fallback */ -color: var(--text-color, #333); - -/* rgb/rgba/hsl/hsla */ -color: hsl(200, 100%, 50%); -background: rgba(0, 0, 0, 0.5); -``` - ---- - -# Transition & Animation - -```css -/* transition: property duration timing-function */ -transition: all 0.3s ease-in-out; -transition: background 0.2s, transform 0.1s; - -/* animation */ -@keyframes fadeIn { - from { opacity: 0; } - to { opacity: 1; } -} - -.fade-in { - animation: fadeIn 0.5s ease-out; -} -``` - ---- - -# CSS Frameworks - -| Framework | Stil | -|-----------|------| -| **Bootstrap** | Komponenten + Grid, opinionated | -| **Tailwind CSS** | Utility-First, atomar | -| **Bulma** | klassisch, ohne JS | -| **shadcn/ui** | kopierbare Komponenten (Tailwind-basiert) | -| **Flowbite** | Tailwind-Komponentenbib. | - ---- - -# Tailwind CSS – Beispiel - -```html - -``` - -- Keine eigenen CSS-Klassen mehr -- JIT-Compiler erzeugt nur genutzte Klassen -- Design-System via `tailwind.config.js` - diff --git a/slides/dhbw/01_web_eng.md b/slides/dhbw/02_html_css.md similarity index 51% rename from slides/dhbw/01_web_eng.md rename to slides/dhbw/02_html_css.md index c73dfb8..d31530d 100644 --- a/slides/dhbw/01_web_eng.md +++ b/slides/dhbw/02_html_css.md @@ -5,7 +5,7 @@ paginate: true backgroundColor: #fff header: "Web Engineering – DHBW Stuttgart" footer: "Michael Czechowski – SoSe 2026" -title: Web Engineering +title: HTML & CSS --- - -
-
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
-
- ---- - -# 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 - ---- - -# 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](./assets/arpanet.jpg) - ---- - -# 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](./assets/mosaic.jpg) - ---- - - - - -![bg cover](./assets/img_633d7b91366e0-1025x538-768x403.jpg) - ---- - -# 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](./assets/demos/browser-server-sequence.png) - - ---- - -# 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](https://brew.sh)** - -```bash -# 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](https://nodejs.org) - ---- - -# Node.js installieren – Linux - -Empfohlen: **LTS** (aktuell **Node.js 24**). - -**Debian / Ubuntu** ([NodeSource](https://github.com/nodesource/distributions)): -```bash -curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - -sudo apt install -y nodejs -``` - -**Arch / Manjaro:** -```bash -sudo pacman -S nodejs npm -``` - -**Fedora / RHEL:** -```bash -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): -```powershell -winget install OpenJS.NodeJS.LTS -``` - -**Option 2: Chocolatey** ([chocolatey.org](https://chocolatey.org)): -```powershell -choco install nodejs-lts -``` - -**Option 3: Scoop** ([scoop.sh](https://scoop.sh)): -```powershell -scoop install nodejs-lts -``` - -**Option 4:** Installer von [nodejs.org](https://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 | - -```bash -# 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 | - -```bash -# 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 - -- **VS Code** (empfohlen) — kostenlos, große Plugin-Auswahl -- **JetBrains WebStorm** — sehr mächtig, kostenpflichtig - - kostenlos für Studierende via [JetBrains Education](https://www.jetbrains.com/community/education/#students) -- **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](https://usebruno.com)) — open source, git-friendly -- **Hoppscotch** ([hoppscotch.io](https://hoppscotch.io)) — open source, browser-basiert (vormals Postwoman) -- **Insomnia** / **Postman** — etabliert, freemium -- **curl** / **httpie** — CLI (Command-Line Interface, scriptbar) - ---- - -# Git Setup & Workflow - -**Einmalige Konfiguration:** -```bash -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:** -```bash -ssh-keygen -t ed25519 -C "vorname.nachname@example.com" -cat ~/.ssh/id_ed25519.pub # → in GitHub-Settings einfügen -``` - -**Tägliche Befehle:** -```bash -git status # was hat sich geändert? -git add # für Commit vormerken -git commit -m "feat: ..." # Conventional Commits -git push # hochladen -git pull --rebase # neueste Änderungen holen -``` - ---- - -# Projekt-Skeleton - -```bash -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:** -```json -{ - "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. - ---- @@ -1436,7 +907,7 @@ p::first-letter { } ``` -→ Eindimensionales Layout (Zeile *oder* Spalte). Tiefer in `02_css_extended`. +→ Eindimensionales Layout (Zeile *oder* Spalte). Siehe nachfolgende Folien. --- @@ -1496,330 +967,206 @@ p::first-letter { **Moderne Alternativen:** `clamp()`, Container Queries, CSS Grid `auto-fit`/`auto-fill`. +--- --- - -# JavaScript +# CSS: Extended --- -# ECMAScript +# CSS Selectors – Attribut-Selektoren -- **Ecma International** — European Computer Manufacturers Association -- Seit **1997** standardisiert als **ECMA-262** -- Implementierungen: **JavaScript** (Netscape, später Mozilla), **JScript** (Microsoft), **ActionScript** (Adobe Flash) etc. -- Aktuelle Version: **ECMAScript 2024 (ES15)**, jährliche Releases +```css +/* presence */ +[disabled] { opacity: 0.5; } -**Browser-Kompatibilität:** -- Faustregel: **ES2017+** läuft in allen modernen Browsern -- Ältere Targets via Transpiler (Babel, esbuild, swc, tsc) -- Kompatibilitätstabelle: [kangax.github.io/compat-table](https://kangax.github.io/compat-table/) +/* exact value */ +[type="email"] { border-color: blue; } + +/* contains word */ +[class~="btn"] { cursor: pointer; } + +/* starts with */ +[href^="https"] { color: green; } + +/* ends with */ +[src$=".png"] { border: 1px solid #ccc; } + +/* contains substring */ +[class*="icon"] { padding-left: 20px; } +``` --- -# JavaScript Grundlagen +# CSS Combinators -```javascript -// Variablen -let name = "Welt"; -const alter = 25; +```css +/* Child (direkt) */ +div > p { margin: 0; } -// Funktionen -function gruss(name) { - return `Hallo, ${name}!`; +/* Descendant (Nachkomme) */ +div p { margin: 0; } + +/* Next Sibling */ +h1 + p { font-size: 1.2em; } + +/* Subsequent Sibling */ +h1 ~ p { color: #666; } + +/* Selector List */ +h1, h2, h3 { font-weight: bold; } +``` + +--- + +# Pseudo Classes – Erweitert + +```css +/* Form States */ +:valid { border-color: green; } +:invalid { border-color: red; } +:placeholder-shown { color: #999; } + +/* Content */ +:before { content: "→ "; } +:after { content: " [Wichtig]"; } +:first-letter { font-size: 2em; } +:first-line { font-weight: bold; } + +/* NOT */ +:not(.disabled) { pointer-events: auto; } +:not(:last-child) { border-bottom: 1px solid #ccc; } +``` + +--- + +# Shorthand Properties + +```css +/* margin: top right bottom left */ +margin: 10px 20px 10px 20px; + +/* centering */ +margin: 0 auto; + +/* padding same */ +padding: 20px; + +/* border: width style color */ +border: 1px solid #333; + +/* background: color image position/size repeat */ +background: #fff url(logo.png) 0 0 no-repeat; + +/* font: style variant weight size/line-height family */ +font: italic normal bold 16px/1.5 Arial, sans-serif; +``` + +--- + +# Flexbox Shorthands + +```css +/* flex: grow shrink basis */ +flex: 1 0 auto; + +/* place-items: align-items justify-items */ +place-items: center stretch; + +/* place-content: align-content justify-content */ +place-content: space-between center; + +/* gap: row-gap column-gap */ +gap: 20px 40px; +``` + +--- + +# CSS Custom Properties (Variables) + +```css +:root { + --primary-color: #d63384; + --spacing: 20px; + --radius: 8px; } -// Arrow Functions -const add = (a, b) => a + b; - -// Arrays -const arr = [1, 2, 3]; -arr.map(x => x * 2); // [2, 4, 6] -``` - ---- - -# DOM Manipulation - -```javascript -// Element auswählen -const title = document.querySelector('h1'); - -// Inhalt ändern -title.textContent = 'Neue Überschrift'; - -// Event Listener -button.addEventListener('click', () => { - alert('Geklickt!'); -}); -``` - ---- - -# Fetch API - -```javascript -fetch('/api/products') - .then(res => res.json()) - .then(data => { - console.log(data); - }) - .catch(err => console.error(err)); -``` - ---- - -# Async/Await - -```javascript -async function loadProducts() { - try { - const res = await fetch('/api/products'); - const data = await res.json(); - return data; - } catch (err) { - console.error('Fehler:', err); - } +.button { + background: var(--primary-color); + padding: var(--spacing); + border-radius: var(--radius); } ``` --- - - - +# CSS Functions -![bg fit](./assets/demos/web-engineering-mandala.png) +```css +/* calc */ +width: calc(100% - 40px); + +/* min/max/clamp */ +width: min(100%, 600px); +font-size: clamp(14px, 2vw, 20px); + +/* var with fallback */ +color: var(--text-color, #333); + +/* rgb/rgba/hsl/hsla */ +color: hsl(200, 100%, 50%); +background: rgba(0, 0, 0, 0.5); +``` --- - - +# Transition & Animation -# Web Engineering Mandala +```css +/* transition: property duration timing-function */ +transition: all 0.3s ease-in-out; +transition: background 0.2s, transform 0.1s; -Interaktive version: [nextlevelshit.github.io/web-engineering-mandala](https://nextlevelshit.github.io/web-engineering-mandala/) +/* animation */ +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} -3 Schichten: -- **Core Layer** — JS, HTML, CSS (vanilla) -- **Build Layer** — bundlers, runtimes, template engines, pre/post processors -- **Application Layer** — frontend, backend, frameworks, SSR, CSS-utilities - -3 Segmente: HTML (blau) · JavaScript (rot) · CSS (grün) · Mittelpunkt: `package.json` +.fade-in { + animation: fadeIn 0.5s ease-out; +} +``` --- -# JavaScript Frameworks – Kategorien +# CSS Frameworks -| Kategorie | Beispiele | -|-----------|-----------| -| **CSS Frameworks** | Tailwind, Bootstrap, shadcn/ui | -| **Frontend Frameworks** | React, Vue, Svelte, Astro | -| **Rendering / Meta** | Next.js, Nuxt, Gatsby | -| **Build Tools / Bundler** | Webpack, Vite, Parcel, esbuild | -| **Backend Frameworks** | Express, Fastify, NestJS | +| Framework | Stil | +|-----------|------| +| **Bootstrap** | Komponenten + Grid, opinionated | +| **Tailwind CSS** | Utility-First, atomar | +| **Bulma** | klassisch, ohne JS | +| **shadcn/ui** | kopierbare Komponenten (Tailwind-basiert) | +| **Flowbite** | Tailwind-Komponentenbib. | --- -# Vanilla JS – Counter +# Tailwind CSS – Beispiel ```html - - -``` - -**Pro:** hohe Kompatibilität, simpel -**Contra:** State-Management und Re-Rendering werden schnell komplex - ---- - -# React – Counter (JSX) - -![bg right:25% fit](./assets/logos/frameworks/react.svg) - -```jsx -import { useState } from "react"; - -function MyButton() { - const [count, setCount] = useState(0); - - return ( - - ); -} -``` - -- **Component-Based** Architecture -- **Virtual DOM**, JSX, Hooks -- großes Ökosystem (React Router, Redux, …) - ---- - -# Vue 3 – Composition API - -![bg right:25% fit](./assets/logos/frameworks/vue.svg) - -```vue - - - -``` - -- **Reactive Data Binding** -- Single-File Components (`.vue`) -- Vue Router, Pinia (State) - ---- - -# Svelte – Counter - -![bg right:25% fit](./assets/logos/frameworks/svelte.svg) - -```svelte - - - ``` -- **Compiler-Based** – kein Runtime-Framework -- Reactive Assignments (`let`) -- Built-in Animationen - ---- - -# Astro – Content-First - -![bg right:25% fit](./assets/logos/frameworks/astro.svg) - -```astro ---- -const greeting = "Hallo DHBW"; ---- - - -

{greeting}

- - - -``` - -- **Islands Architecture** – Komponenten mehrerer Frameworks mischen -- Default: kein JS im Output (nur statisches HTML) -- Hydration on demand (`client:load`, `client:visible`) - ---- - -# Rendering Frameworks - -| | Frontend | SSR | SSG | File Routing | -|---|---|---|---|---| -| **Next.js** | React | ja | ja | `/app/page.js` | -| **Nuxt** | Vue | ja | ja | `/pages/*.vue` | -| **Gatsby** | React | nein | ja | GraphQL Data | - ---- - -# Build Tools – Webpack - -![bg right:25% fit](./assets/logos/frameworks/webpack.svg) - -- Module Bundling (JS, CSS, Images) -- Module Loaders + großes Plugin-Ökosystem -- Code Splitting, HMR -- Konfigurations-lastig (`webpack.config.js`) - -→ Standard für viele Legacy-Setups. - ---- - -# Build Tools – Vite - -![bg right:25% fit](./assets/logos/frameworks/vite.svg) - -```javascript -// vite.config.js -import { defineConfig } from "vite"; - -export default defineConfig({ - server: { - proxy: { - "/api": { - target: "http://localhost:4567", - changeOrigin: true, - rewrite: (path) => path.replace(/^\/api/, "") - } - } - } -}); -``` - -- Rollup unter der Haube, **HMR mit ES Modules** -- Tree-Shaking, Code Splitting, React + Vue out-of-the-box - ---- - -# Build Tools – Parcel - -![bg right:25% fit](./assets/logos/frameworks/parcel.png) - -```json -{ - "name": "my-project", - "source": "src/index.html", - "browserslist": "> 0.5%, last 2 versions, not dead", - "scripts": { - "start": "parcel", - "build": "parcel build" - }, - "devDependencies": { - "parcel": "latest" - } -} -``` - -- **Zero-Config** -- Auto-Resolution, HMR -- TS / CSS-Preprocessors out-of-the-box - ---- - -# Microfrontends - -- Mehrere unabhängige Frontend-Apps in einer Page -- Module Federation (Webpack 5) -- **single-spa**: https://single-spa.js.org/ -- Anwendungsfall: große Teams, unterschiedliche Tech-Stacks pro Domain - -→ Komplexitätskosten: nur bei echtem Skalierungsbedarf. - ---- - -# Demo-Repos - -- https://github.com/nextlevelshit/dhbw-client-js (Counter, multi-framework) -- https://github.com/nextlevelshit/node-cache-api (API + Tests) -- https://github.com/nextlevelshit/dhbw-docker (Compose-Stack) +- Keine eigenen CSS-Klassen mehr +- JIT-Compiler erzeugt nur genutzte Klassen +- Design-System via `tailwind.config.js` diff --git a/slides/dhbw/03_js_frameworks.md b/slides/dhbw/03_js_frameworks.md new file mode 100644 index 0000000..3be2b62 --- /dev/null +++ b/slides/dhbw/03_js_frameworks.md @@ -0,0 +1,403 @@ +--- +marp: true +theme: gaia +paginate: true +backgroundColor: #fff +header: "Web Engineering – DHBW Stuttgart" +footer: "Michael Czechowski – SoSe 2026" +title: JavaScript & Frameworks +--- + + + + + + + +![bg cover opacity:0.2](./assets/background.png) + +# Web Engineering + +**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik + +**Sommersemester 2026** · Sitzung 3 — JS, Frameworks & Build Tools + +--- + +# Ressourcen zum Selbstlernen + +- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/) +- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/) +- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/) +- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/) +- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/) + + + + + + +# JavaScript + +--- + +# ECMAScript + +- **Ecma International** — European Computer Manufacturers Association +- Seit **1997** standardisiert als **ECMA-262** +- Implementierungen: **JavaScript** (Netscape, später Mozilla), **JScript** (Microsoft), **ActionScript** (Adobe Flash) etc. +- Aktuelle Version: **ECMAScript 2024 (ES15)**, jährliche Releases + +**Browser-Kompatibilität:** +- Faustregel: **ES2017+** läuft in allen modernen Browsern +- Ältere Targets via Transpiler (Babel, esbuild, swc, tsc) +- Kompatibilitätstabelle: [kangax.github.io/compat-table](https://kangax.github.io/compat-table/) + +--- + +# JavaScript Grundlagen + +```javascript +// Variablen +let name = "Welt"; +const alter = 25; + +// Funktionen +function gruss(name) { + return `Hallo, ${name}!`; +} + +// Arrow Functions +const add = (a, b) => a + b; + +// Arrays +const arr = [1, 2, 3]; +arr.map(x => x * 2); // [2, 4, 6] +``` + +--- + +# DOM Manipulation + +```javascript +// Element auswählen +const title = document.querySelector('h1'); + +// Inhalt ändern +title.textContent = 'Neue Überschrift'; + +// Event Listener +button.addEventListener('click', () => { + alert('Geklickt!'); +}); +``` + +--- + +# Fetch API + +```javascript +fetch('/api/products') + .then(res => res.json()) + .then(data => { + console.log(data); + }) + .catch(err => console.error(err)); +``` + +--- + +# Async/Await + +```javascript +async function loadProducts() { + try { + const res = await fetch('/api/products'); + const data = await res.json(); + return data; + } catch (err) { + console.error('Fehler:', err); + } +} +``` + +--- + + + + + +![bg fit](./assets/demos/web-engineering-mandala.png) + +--- + + + + +# Web Engineering Mandala + +Interaktive version: [nextlevelshit.github.io/web-engineering-mandala](https://nextlevelshit.github.io/web-engineering-mandala/) + +3 Schichten: +- **Core Layer** — JS, HTML, CSS (vanilla) +- **Build Layer** — bundlers, runtimes, template engines, pre/post processors +- **Application Layer** — frontend, backend, frameworks, SSR, CSS-utilities + +3 Segmente: HTML (blau) · JavaScript (rot) · CSS (grün) · Mittelpunkt: `package.json` + +--- + +# JavaScript Frameworks – Kategorien + +| Kategorie | Beispiele | +|-----------|-----------| +| **CSS Frameworks** | Tailwind, Bootstrap, shadcn/ui | +| **Frontend Frameworks** | React, Vue, Svelte, Astro | +| **Rendering / Meta** | Next.js, Nuxt, Gatsby | +| **Build Tools / Bundler** | Webpack, Vite, Parcel, esbuild | +| **Backend Frameworks** | Express, Fastify, NestJS | + +--- + +# Vanilla JS – Counter + +```html + + +``` + +**Pro:** hohe Kompatibilität, simpel +**Contra:** State-Management und Re-Rendering werden schnell komplex + +--- + +# React – Counter (JSX) + +![bg right:25% fit](./assets/logos/frameworks/react.svg) + +```jsx +import { useState } from "react"; + +function MyButton() { + const [count, setCount] = useState(0); + + return ( + + ); +} +``` + +- **Component-Based** Architecture +- **Virtual DOM**, JSX, Hooks +- großes Ökosystem (React Router, Redux, …) + +--- + +# Vue 3 – Composition API + +![bg right:25% fit](./assets/logos/frameworks/vue.svg) + +```vue + + + +``` + +- **Reactive Data Binding** +- Single-File Components (`.vue`) +- Vue Router, Pinia (State) + +--- + +# Svelte – Counter + +![bg right:25% fit](./assets/logos/frameworks/svelte.svg) + +```svelte + + + +``` + +- **Compiler-Based** – kein Runtime-Framework +- Reactive Assignments (`let`) +- Built-in Animationen + +--- + +# Astro – Content-First + +![bg right:25% fit](./assets/logos/frameworks/astro.svg) + +```astro +--- +const greeting = "Hallo DHBW"; +--- + + +

{greeting}

+ + + +``` + +- **Islands Architecture** – Komponenten mehrerer Frameworks mischen +- Default: kein JS im Output (nur statisches HTML) +- Hydration on demand (`client:load`, `client:visible`) + +--- + +# Rendering Frameworks + +| | Frontend | SSR | SSG | File Routing | +|---|---|---|---|---| +| **Next.js** | React | ja | ja | `/app/page.js` | +| **Nuxt** | Vue | ja | ja | `/pages/*.vue` | +| **Gatsby** | React | nein | ja | GraphQL Data | + +--- + +# Build Tools – Webpack + +![bg right:25% fit](./assets/logos/frameworks/webpack.svg) + +- Module Bundling (JS, CSS, Images) +- Module Loaders + großes Plugin-Ökosystem +- Code Splitting, HMR +- Konfigurations-lastig (`webpack.config.js`) + +→ Standard für viele Legacy-Setups. + +--- + +# Build Tools – Vite + +![bg right:25% fit](./assets/logos/frameworks/vite.svg) + +```javascript +// vite.config.js +import { defineConfig } from "vite"; + +export default defineConfig({ + server: { + proxy: { + "/api": { + target: "http://localhost:4567", + changeOrigin: true, + rewrite: (path) => path.replace(/^\/api/, "") + } + } + } +}); +``` + +- Rollup unter der Haube, **HMR mit ES Modules** +- Tree-Shaking, Code Splitting, React + Vue out-of-the-box + +--- + +# Build Tools – Parcel + +![bg right:25% fit](./assets/logos/frameworks/parcel.png) + +```json +{ + "name": "my-project", + "source": "src/index.html", + "browserslist": "> 0.5%, last 2 versions, not dead", + "scripts": { + "start": "parcel", + "build": "parcel build" + }, + "devDependencies": { + "parcel": "latest" + } +} +``` + +- **Zero-Config** +- Auto-Resolution, HMR +- TS / CSS-Preprocessors out-of-the-box + +--- + +# Microfrontends + +- Mehrere unabhängige Frontend-Apps in einer Page +- Module Federation (Webpack 5) +- **single-spa**: https://single-spa.js.org/ +- Anwendungsfall: große Teams, unterschiedliche Tech-Stacks pro Domain + +→ Komplexitätskosten: nur bei echtem Skalierungsbedarf. + +--- + +# Demo-Repos + +- https://github.com/nextlevelshit/dhbw-client-js (Counter, multi-framework) +- https://github.com/nextlevelshit/node-cache-api (API + Tests) +- https://github.com/nextlevelshit/dhbw-docker (Compose-Stack) + diff --git a/slides/dhbw/03_nodejs_basics.md b/slides/dhbw/04_nodejs_basics.md similarity index 100% rename from slides/dhbw/03_nodejs_basics.md rename to slides/dhbw/04_nodejs_basics.md diff --git a/slides/dhbw/04_nodejs_advanced.md b/slides/dhbw/05_express.md similarity index 100% rename from slides/dhbw/04_nodejs_advanced.md rename to slides/dhbw/05_express.md diff --git a/slides/dhbw/05_testing.md b/slides/dhbw/06_testing.md similarity index 100% rename from slides/dhbw/05_testing.md rename to slides/dhbw/06_testing.md diff --git a/slides/dhbw/06_typescript.md b/slides/dhbw/07_typescript.md similarity index 100% rename from slides/dhbw/06_typescript.md rename to slides/dhbw/07_typescript.md diff --git a/slides/dhbw/07_docker.md b/slides/dhbw/08_docker.md similarity index 100% rename from slides/dhbw/07_docker.md rename to slides/dhbw/08_docker.md diff --git a/slides/dhbw/08_best_practices.md b/slides/dhbw/09_best_practices.md similarity index 100% rename from slides/dhbw/08_best_practices.md rename to slides/dhbw/09_best_practices.md