Svelte Grundkurs

Grundlagen und Projekt-Setup

• Svelte als compilerbasiertes Framework
• Einordnung im Frontend-Ökosystem
• Projektstart mit aktuellem Tooling
• Vite-Entwicklungsserver und Build-Prozess
• Struktur typischer Svelte-Projekte

Komponenten und Template-Syntax

• Aufbau von Svelte-Komponenten
• Markup, Script und Styles
• Ausdrücke mit geschweiften Klammern
• Bedingte Darstellung mit if-Blöcken
• Listenrendering mit each-Blöcken
• Asynchrone Inhalte mit await-Blöcken

Reaktivität und State-Management

• Reaktiver State mit $state
• Abgeleitete Werte mit $derived
• Nebenwirkungen mit $effect
• Komponentenübergreifender Zustand
• Einsatz von Stores einordnen

Interaktion und Komponentenkommunikation

• DOM-Events und Event-Attribute
• Formulareingaben und Bindings
• Props mit $props
• Datenfluss zwischen Komponenten
• Callback-Props für Ereignisse

Routing, Styling und Struktur

• Routing-Grundlagen mit SvelteKit
• Navigation zwischen Ansichten
• Komponentenlokales CSS
• Globale Styles mit :global
• Dynamische Klassen und Inline-Styles

Build, Optimierung und Deployment

• Produktionsbuild mit npm-Skripten
• Bundle-Grundlagen und Assets
• Fehlersuche im Entwicklungsprozess
• Deployment statischer Anwendungen
• Projektstruktur für Wartbarkeit

• Sichere Grundkenntnisse in HTML, CSS und JavaScript
• Erfahrung mit clientseitiger Webentwicklung und Browser-Entwicklertools
• Grundverständnis von npm, Node.js und modularen JavaScript-Projekten
• Für den Einstieg passende Vorbereitung: HTML5 Workshop mit CSS3 und JavaScript oder JavaScript Grundkurs
• Optional hilfreich: TypeScript Grundkurs für typisierte Frontend-Projekte

• Frontend-Entwicklerinnen und Frontend-Entwickler mit JavaScript-Erfahrung
• Webentwicklerinnen und Webentwickler, die Svelte als Alternative zu React, Angular oder Vue bewerten
• Fullstack-Entwicklerinnen und Fullstack-Entwickler mit Bedarf an schlanken Benutzeroberflächen
• Projektteams, die interaktive Webanwendungen mit komponentenbasierter Architektur entwickeln