Svelte - Kompaktkurs

Ziele

In dieser 5-tägigen "Svelte - Kompaktkurs" Schulung lernen Sie umfassend Svelte von den Grundlagen bis hin zu fortgeschrittenen Techniken. Sie erhalten eine Einführung in Svelte, verstehen die Unterschiede zu anderen Frameworks und lernen die Projektstruktur kennen.

Sie erfahren, wie Sie reaktive Variablen und Zustandsverwaltung nutzen, um den Anwendungsstatus effizient zu verwalten und auf Benutzerinteraktionen zu reagieren. Es werden zusätzlich Komponenten-Interaktionen und die Navigation in Svelte behandelt. Im weiteren Verlauf erlernen Sie Techniken wie die Nutzung von context und stores für das Zustandsmanagement sowie die Implementierung von Server-Side Rendering (SSR) für verbesserte Ladezeiten und Suchmaschinenoptimierung (SEO).

Sie erstellen dynamische Komponenten und nutzen Lazy Loading für effiziente Ressourcennutzung. Data Fetching und Datenverarbeitung ermöglichen die Integration von externen Datenquellen und die optimale Datenpräsentation. Die Erstellung von Animationen und Übergangseffekten bringt Ihre Svelte-Anwendungen zum Leben. Sie lernen, Svelte-Anwendungen zu testen, die Leistung zu optimieren und Svelte mit externen Frameworks und Libraries zu integrieren.

Zielgruppe

• Webentwickler

Voraussetzungen

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

Agenda

Einführung in Svelte

• Was ist Svelte und wie unterscheidet es sich von anderen Frameworks?
• Einblick in die Svelte-Ökosystem

Installation und Projektsetup

• Installation von Node.js und npm (Node Package Manager)
• Einrichtung eines neuen Svelte-Projekts mit dem Svelte-CLI
• Überblick über die Projektstruktur und die Hauptdateien einer Svelte-Anwendung

Grundlagen von Svelte-Komponenten

• Erstellung und Verwendung von einfachen Svelte-Komponenten
• Verwendung von Mustache-Tags
• Verwendung von Svelte-Anweisungen wie if, each und await

Reaktive Variablen und Zustandsverwaltung

• Einführung in reaktive Variablen und ihre Bedeutung
• Verwendung des $-Syntax für reaktive Zuweisungen und Abfragen
• Zustandsverwaltung mit dem let-Syntax

Event-Handling und Benutzerinteraktionen

• Benutzerinteraktionen in Svelte-Komponenten
• Verwendung von Event-Handlern
• Umsetzung von interaktiven Funktionen in Svelte-Anwendungen

SvelteKit

• Einführung in SvelteKit
• Installation und Projekteinrichtung
• Erstellung von SvelteKit-Anwendungen
• Verwendung von SvelteKit-Routen
• Verwendung von SvelteKit-State-Management
• Verwendung von SvelteKit-Internationalisierung
• Debugging von SvelteKit-Anwendungen

Kommunikation zwischen Komponenten

• Verwendung von Props (Eigenschaften)
• Auslösen und Abfangen von benutzerdefinierten Events
• Datenfluss in der Komponentenhierarchie

Routing und Navigation in Svelte

• Implementierung eines einfachen Routers mit der svelte-routing-Bibliothek
• Erstellung von Routen und Verknüpfung von URLs mit Svelte-Komponenten
• Navigation zwischen verschiedenen Seiten in einer Svelte-Anwendung

Styling in Svelte

• Verwendung von Inline-Styling mit Svelte-Komponenten
• Kombination von Styles mit globalen und lokal definierten CSS-Klassen
• Svelte-spezifische Styling-Funktionen wie :global und :local

Deployment und Veröffentlichung

• Optimierung von Svelte-Anwendungen
• Verwendung des npm run build-Befehls
• Bereitstellung einer Svelte-Anwendung

Komponenten-Interaktionen und Zustandsmanagement

• Verwendung von context und stores
• Optimierung des Zustandsmanagements
• Implementierung von Zustandsverwaltung mit Stores für globale Daten

Server-Side Rendering (SSR) mit Svelte

• Implementierung von SSR in Svelte-Anwendungen
• Verbesserung der Suchmaschinenoptimierung (SEO) durch SSR
• Anpassung von SSR und Client-Side Rendering

Dynamische Komponenten und Lazy Loading

• Erstellung dynamischer Komponenten
• Lazy Loading
• Code Splitting
• Implementierung von Routen-basiertem Lazy Loading

Data Fetching und Datenverarbeitung

• Datenabruf aus API's und externen Quellen
• Datenverarbeitung mit Svelte
• Fehlerbehandlung und Ladezustände bei Datenabrufen für bessere Benutzererfahrung

Testing in Svelte-Anwendungen

• Implementierung von Unit-Tests
• Integration von Testbibliotheken und Testframeworks
• End-to-End-Tests

Optimierung und Performance in Svelte

• Analyse und Profiling
• Code-Optimierung und Reduzierung der Bundle-Größe
• Leistungsoptimierung
• Vermeidung von Engpässen

Einsatz von Svelte mit externen Frameworks und Libraries

• Integration in bestehende Projekte und Frameworks
• Verwendung von Svelte mit beliebten Libraries
• Synergien zwischen Svelte und anderen Frameworks

Open Badge - Ihr digitaler Kompetenznachweis

Durch die erfolgreiche Teilnahme an einem Kurs bei IT-Schulungen.com erlangen Sie nicht nur Fachkenntnisse und Fähigkeiten, sondern bekommen zusätzlich zu Ihrem Teilnahmezertifikat ein Open Badge als digitalen Nachweis Ihrer Kompetenz.

Sie können diesen in Ihrem persönlichen und kostenfreien Mein IT-Schulungen.com Konto abrufen. Ihre verdienten Badges lassen sich problemlos in sozialen Netzwerken integrieren und weitergeben.

Mehr zu den Vorteilen von Badges

Kurz vor Durchführung