Svelte - Grundlagen

Ziele der Schulung

In dieser 3-tägigen Schulung "Svelte - Grundlagen" lernen Sie die Grundlagen von Svelte, einem modernen JavaScript-Framework, kennen. Sie werden lernen, wie Sie ein neues Svelte-Projekt einrichten und die Projektstruktur verstehen. Das Seminar deckt die Erstellung von Svelte-Komponenten ab, einschließlich der Template-Syntax und Svelte-spezifischer Anweisungen. Sie werden die Verwendung reaktiver Variablen zur effizienten Zustandsverwaltung kennenlernen und Benutzerinteraktionen in Svelte-Komponenten erfassen und darauf reagieren können. Die Kommunikation zwischen Komponenten mittels Props und benutzerdefinierter Events wird behandelt, und Sie werden ein einfaches Routing-System in Svelte implementieren können. Styling-Techniken wie Inline-Styling und die Verwendung von CSS-Klassen werden ebenfalls behandelt. Am Ende des Seminars lernen Sie, wie Sie Ihre Svelte-Anwendung für die Produktion optimieren und bereitstellen können. Durch praktische Übungen werden Sie Ihre Fähigkeiten in der Entwicklung von Svelte-Anwendungen festigen. Das Seminar legt den Grundstein für Ihre Weiterentwicklung in der Svelte-Entwicklung und gibt Ihnen das Vertrauen, moderne und reaktive Webanwendungen mit Svelte zu erstellen.

Zielgruppe Seminar

• Webentwickler

Voraussetzungen

Für eine optimale Teilnahme am Kurs empfehlen wir folgende Vorkenntnisse:

• Kenntnisse in HTML, CSS und JavaScript
• Erfahrung in der clientseitigen Webentwicklung

Seminarinhalt

Einführung in Svelte

• Was ist Svelte und wie unterscheidet es sich von anderen Frameworks?
• Das Svelte-Ökosystem im Überblick
• Warum Svelte? Vorteile & Einsatzgebiete

Projektsetup & Struktur

• Installation von Node.js und npm
• Einrichtung eines neuen Projekts mit npm create svelte@latest
• Überblick über die Projektstruktur
• Hauptdateien einer Svelte-Anwendung (App.svelte, main.js, +page.svelte etc.)

Grundlagen von Svelte-Komponenten

• Erstellung und Verwendung einfacher Komponenten
• Mustache-Tags ({}) zur Datenausgabe
• Svelte-Anweisungen: {#if}, {#each}, {#await}
• Props und Wiederverwendung von Komponenten

Reaktive Variablen & State Management

• Einführung in reaktive Variablen
• Verwendung der $:-Syntax für Reaktivität
• Zustandsverwaltung mit let
• Globale Zustände mit writable, readable und derived Stores
• Vergleich: lokale Reaktivität vs. globale Stores

Event-Handling & Benutzerinteraktionen

• Benutzerinteraktionen in Svelte-Komponenten
• Event-Handler (on:click, on:input, ...)
• Custom Events mit createEventDispatcher
• Zwei-Wege-Datenbindung mit bind:value

Kommunikation zwischen Komponenten

• Datenfluss: Parent → Child mit Props
• Child → Parent mit Events
• Nutzung der Kontext-API (setContext, getContext)

SvelteKit – Einführung & Architektur

• Was ist SvelteKit?
• Architektur und Vorteile gegenüber reinem Svelte
• Installation & Setup mit npm create svelte@latest my-app
• Projektstruktur (+page.svelte, +layout.svelte, +page.server.js)

Routing & Navigation

• File-based Routing in SvelteKit
• Layouts & Nested Routes
• Dynamische Routen ([id].svelte)
• Navigation mit <a> und goto()
• Daten laden mit load() (Client & Server)

State & Datenmanagement in SvelteKit

• Laden und Verwenden von Daten mit load-Funktionen
• Nutzung der Fetch API
• Globale Stores über mehrere Seiten hinweg
• Session Handling und Datenpersistenz

Styling in Svelte

• Inline-Styling und scoped CSS
• Globale und lokale Styles (:global, :local)
• Bedingtes Styling
• Nutzung von TailwindCSS (optional)

Debugging & Optimierung

• Debugging mit Svelte DevTools
• Performance-Optimierung
• SSR vs. CSR (Server-Side Rendering vs. Client-Side Rendering)
• Umgang mit Fehlermeldungen und Logging

Deployment & Veröffentlichung

• Produktions-Build mit npm run build
• Adapter für verschiedene Deployments (adapter-static, adapter-node, etc.)
• Hosting auf Vercel, Netlify oder eigenem Server
• SEO & Meta-Tags in SvelteKit

Abschlussprojekt

• Entwicklung einer kleinen SvelteKit-App mit Routing, State, API-Fetch und Styling
• Beispielprojekte: Task Manager, Weather Dashboard oder Blog-App

Open Badge für dieses Seminar - Ihr digitaler Kompetenznachweis

Durch die erfolgreiche Teilnahme an einem Kurs bei IT-Schulungen.com erhalten Sie zusätzlich zu Ihrem Teilnehmerzertifikat ein digitales Open Badge (Zertifikat) – Ihren modernen Nachweis für erworbene Kompetenzen.

Ihr Open Badge ist jederzeit in Ihrem persönlichen und kostenfreien Mein IT-Schulungen.com-Konto verfügbar. Mit wenigen Klicks können Sie diesen digitalen Nachweis in sozialen Netzwerken teilen, um Ihre Expertise sichtbar zu machen und Ihr berufliches Profil gezielt zu stärken.

Übersicht: Svelte Schulungen Portfolio

Mehr zu den Vorteilen von Badges

Seminare kurz vor der Durchführung