Svelte 5 und SvelteKit Schulung: Runes bis Deployment

Svelte 5 einordnen und das erste Projekt anlegen

• Geschichte und Idee: Compiler statt Laufzeit-Framework
• Neu in Svelte 5: Runes, Snippets, Ereignisse als Attribute
• Compiler-Ausgabe im Svelte-Playground nachvollziehen
• Entwicklungsumgebung: Node.js, VS Code mit Svelte-Erweiterung
• Projekt anlegen mit npx sv create: Vorlagen, TypeScript, Prettier, ESLint
• Integrationen nachrüsten mit npx sv add, z. B. Tailwind CSS, Vitest oder Playwright

Komponenten und Markup

• Aufbau einer .svelte-Datei: <script>, Markup und <style>
• Komponenten anlegen, importieren und in src/lib gliedern
• Markup-Syntax: Ausdrücke, Attribute, {#if}, {#each} mit Schlüssel, {#await}
• Reaktivität: wie Svelte Änderungen bis in einzelne DOM-Knoten verfolgt
• Übung: Profilkarte als erste Komponente mit Props und eigenem Stil

Runes: das Reaktivitätsmodell von Svelte 5

• Runes: vom Compiler erkannte Schlüsselwörter mit $-Präfix
• $state für reaktive Variablen und tiefe Reaktivität über Proxies
• $derived und $derived.by für berechnete Werte
• $effect für Seiteneffekte wie Timer, Canvas und Fremdbibliotheken
• Legacy-Syntax (let, $:, export let) und Runes im direkten Vergleich
• Zustandsänderungen debuggen mit $inspect
• Übung: Zähler aus Svelte-4-Syntax auf $state und $derived umstellen

Zustand für Objekte, Listen und die ganze Anwendung

• Verschachtelte Objekte mit $state, große Daten mit $state.raw
• $state.snapshot für die Übergabe an Fremdbibliotheken
• Arrays reaktiv ändern: push, splice, Neuzuweisung
• SvelteMap, SvelteSet und SvelteDate aus svelte/reactivity
• Zustand teilen: Props und Context mit setContext/getContext
• Globaler Zustand in .svelte.ts-Modulen und Klassen mit $state-Feldern
• Stores (writable, readable) im Bestand
• Übung: Todo-App mit Filter und abgeleiteten Zählern

Props, Bindings und Ereignisse

• $props mit Destrukturierung, Standardwerten und Rest-Props
• Props typisieren, auch in generischen Komponenten
• Zweiwege-Bindung an Kindkomponenten mit $bindable
• Ereignisse als Attribute (onclick) und Callback-Props statt createEventDispatcher
• Formulare: bind:value, bind:checked, bind:group und Auswahllisten
• Function Bindings bind:value={get, set} zum Umwandeln von Eingaben
• Übung: Registrierungsformular mit Validierung

Lebenszyklus und Effekte

• $effect und $effect.pre: vor oder nach der DOM-Aktualisierung
• onMount und onDestroy sowie Aufräumfunktionen in $effect
• Abhängigkeiten von Effekten – und warum sie nach await fehlen
• untrack gegen Endlosschleifen und unnötige Läufe
• $derived statt synchron gehaltener Kopien
• Übung: Daten per fetch laden, mit Ladezustand und Abbruch

Snippets und dynamisches Rendering

• Snippets statt Slots: Unterschiede zu Svelte 4
• Snippets mit {#snippet} definieren und als Props übergeben
• {@render} und das implizite children-Snippet
• Dynamische Komponenten ohne <svelte:component>
• Attachments mit {@attach} als Nachfolger von Actions (use:)
• Übung: Datentabelle mit Snippets für Kopf und Zeilen

Übergänge und Animationen

• transition:, in: und out: mit fade, fly, slide
• Werte animieren mit Tween und Spring aus svelte/motion
• Listen animieren mit animate:flip und crossfade
• Eigene Übergänge mit css- oder tick-Funktion
• Ruckelfrei animieren: CSS statt JavaScript, prefers-reduced-motion beachten
• Übung: animierte Benachrichtigungsleiste

Styling in Svelte-Komponenten

• Scoped Styles: Kapselung über Klassen-Hashes
• CSS-Variablen als Komponentenparameter, style:-Direktive
• :global() und :global {}-Blöcke sparsam einsetzen
• Klassen mit class: oder als Objekt bzw. Array setzen
• Tailwind CSS und andere CSS-Frameworks einbinden
• Übung: Hell-/Dunkel-Theme mit CSS-Variablen

Einstieg in SvelteKit

• SvelteKit oder Svelte mit Vite allein?
• Projektstruktur src/routes, src/lib, static; Konfiguration im sveltekit()-Plugin der Vite-Konfiguration
• Dateibasiertes Routing mit +page.svelte und +layout.svelte
• SSR, Hydration, Prerendering und reines CSR je Route steuern
• Übung: SvelteKit-Projekt mit Layout und Navigation

Routing und Datenladen mit SvelteKit

• Verschachtelte Routen und Layouts
• Parameter [id], optional [[lang]], Param-Matcher
• Layout-Gruppen (gruppe) und Rest-Parameter [...pfad]
• load in +page.ts oder +page.server.ts: universell oder nur auf dem Server
• Fehler und Umleitungen: error(), redirect(), +error.svelte
• Seitenzustand über $app/state – $app/stores ist in SvelteKit 3 entfernt
• Übung: mehrseitige Anwendung mit Detailseiten

Serverseite mit SvelteKit

• Form Actions und progressive Verbesserung mit use:enhance
• API-Endpunkte in +server.ts mit GET, POST und JSON-Antworten
• Cookies, Sitzungen und hooks.server.ts mit locals
• Umgebungsvariablen über $app/env/private und $app/env/public; $env/... ist in SvelteKit 3 abgekündigt
• Serverseitige Validierung mit Zod oder Valibot
• Übung: Kontaktformular mit Serverprüfung

Optimierung und Deployment

• Code-Splitting je Route und dynamische Imports
• Preloading per data-sveltekit-preload-data, Bildoptimierung
• Adapter: adapter-node, adapter-static und Plattform-Adapter
• Deployment: statisch, Node-Server im Container, Edge
• Übung: Bundle analysieren und Produktions-Build prüfen

Migration, Bibliotheken, TypeScript und Tests

• Migration von Svelte 4 mit npx sv migrate svelte-5
• Migration auf SvelteKit 3 mit npx sv migrate sveltekit-3: #lib statt $lib, Node.js ab 22.17
• Geänderte APIs in SvelteKit 3: $app/env, refreshAll statt invalidateAll, goto-Optionen
• Legacy- und Runes-Komponenten nebeneinander
• Externe Bibliotheken für Diagramme oder Karten einbinden
• TypeScript mit lang="ts" und generierten $types
• Komponententests mit Vitest und @testing-library/svelte
• End-to-End-Tests mit Playwright
• Übung: Svelte-4-Komponente mit Slots und on: umstellen

Architektur und Produktionsreife

• Anwendung planen: Routen, Datenfluss, Server- und Clientcode
• Servercode in server-Verzeichnissen wie #lib/server kapseln, damit er nie im Browser-Bundle landet
• Review-Kriterien für Svelte-Code: wenige Effekte, typisierte Props, klare Snippets
• Barrierefreiheit: A11y-Warnungen des Compilers auswerten und beheben
• Fehlerbehandlung und Logging über handleError in den Hooks
• Weiterlernen: Tutorial auf svelte.dev, Changelogs
• Ausblick: await in Komponenten, Remote Functions (experimentell)

Svelte-Projekte mit Coding-Agenten

• Projektregeln für den Agenten: Runes statt export let, $: und on:click
• Aktuelle Svelte-Doku über llms.txt oder den offiziellen Svelte-MCP-Server bereitstellen
• svelte-check und Vitest nach jeder Agentenänderung als Feedbackschleife
• Vom Agenten erzeugte $effect-Blöcke prüfen, die eigentlich $derived sein sollten
• Load-Funktionen und Form Actions: Geheimnisse nur aus $app/env/private, Review vor Merge
• Vorgeschlagene Importe aus $lib, $app/stores oder $app/environment auf SvelteKit 3 umstellen lassen

Praxisprojekt: Leihbörse für Werkzeuge in der Nachbarschaft

• Werkzeugliste und Detailseiten als SvelteKit-Routen mit load aus einer SQLite-Datenbank
• Ausleihkalender mit Snippets für Tageszellen und animierten Statuswechseln
• Reservierung per Form Action mit Konfliktprüfung auf dem Server und use:enhance
• Playwright-Test für den Ausleihvorgang und Deployment mit adapter-node