Svelte und SvelteKit - Intensiv-Schulung für Einsteiger - Inhouse von HECKER CONSULTING

Svelte ist ein radikal neuer Ansatz für die Erstellung von Benutzeroberflächen. Schreiben Sie deutlich weniger Code mit dem Svelte-Framework und lernen Sie, wie Sie mit SvelteKit extrem leistungsstarke Webanwendungen erstellen.

Svelte - Erste Schritte

• Einführung in Svelte
• Warum Svelte?
• Was ist Svelte?
• Svelte versus React versus Angular versus Vue.js
• Erstellen einer ersten App
• Der erste Svelte-Code: Hello World!

Svelte - Syntax und Basismerkmale

• Verwendung von geschweiften Klammern
• Verstehen der Svelte-Syntax
• Reaktive Variablen verwenden
• Reaktivität verstehen und anwenden
• Datenbindung an Element-Eigenschaften
• Zwei-Wege-Bindung-Abkürzung
• Verwendung mehrerer Komponenten
• Komponentenkommunikation über Props
• Weitere Details zu Datenbindungen
• Selbst-erweiternde Eigenschaften verwenden
• HTML-Inhalt ausgeben
• Dynamische CSS-Klassen festlegen

Svelte - Dynamische Ausgaben

• Arbeiten mit Bedingungen und Schleifen
• Verwendung von if, else und else-if-Anweisungen in HTML
• Listen mit each ausgeben
• each, else und der Listenindex
• Listen und Schlüssel

Svelte - Reaktivität

• Ein genauerer Blick auf die Reaktivität
• Unveränderliche Aktualisierung von Arrays und Objekten
• Ereignis-Modifikatoren verstehen
• Verwendung von Inline-Funktionen

Svelte - Komponentendetails

• Tiefer in Komponenten eintauchen
• Verstehen der verschiedenen Komponententypen
• Überblick über die Komponentenkommunikation
• Ereignis-Weiterleitung
• Benutzerdefinierte Ereignisse ausgeben
• Wie man Ereignisdaten extrahiert
• Verwendung von Spread-Props und Standard-Props
• Arbeiten mit Slots, Benannte und Standard-Slots
• Verwendung von Slot-Props
• Der Komponenten-Lebenszyklus
• Verwendung von tick()

Svelte - Formulare

• Arbeiten mit Bindungen und Formularen
• Die Zwei-Wege-Bindungen
• Verstehen von benutzerdefinierten Komponentenbindungen
• Bindung von Checkboxen und Radio Buttons
• Bindung von Dropdowns
• Bindung an Element-Referenzen
• Bindung an Komponentenreferenzen
• Validieren von Formularen und Eingaben

Svelte - Zustandsverwaltung

• Zustand und Daten mit Stores verwalten
• Das Problem der clientseitigen Zustandsverwaltung
• Erstellen eines beschreibbaren Stores
• Abonnieren eines Stores
• Aktualisierung von Store-Daten
• Stores und Komponenten
• Verwaltung von Store-Abonnements
• Verwenden von automatischen Abonnements
• Benutzerdefinierte Stores verwenden
• Abgeleitete Store und Store Bindungen

Svelte - Bewegung, Übergänge und Animationen

• Animation mit einem Tweened-Speicher
• Verwendung eines Spring Store
• Element-Übergänge verstehen und anwenden
• Verwendung unterschiedlicher "Ein"- und "Aus"-Übergänge
• Animieren passiver Elemente
• Verzögerte Übergänge

Svelte - Netzwerk-Kommunikation über Http

• Hinzufügen einer REST-API
• Senden von Daten über eine POST-Anforderung
• Anzeigen eines Ladeindikators
• Senden validierter Daten
• Abrufen und Transformieren von Daten
• Verwendung von async/await
• Http-Zugriffe und Zustandsverwaltung mit Stores

Svelte - Routing und Server-seitiges Rendering mit SvelteKit

• Was und warum?
• Die Ordnerstruktur verstehen
• Überprüfung der Webseite
• Dateinamen und Routen
• Fehler- und Layout-Seiten definieren
• Vorladen von Komponenten
• Vorladen von Daten
• Abrufen von Daten auf der Client-Seite
• Vorladen von Daten auf dem Server
• Synchronisieren geholter Daten und des Speichers

Svelte - Bereitstellung

• Verschiedene Anwendungstypen und Einsatzoptionen
• Erstellung einer App
• Korrektes Rendern von Inhalten auf dem Server
• Bereitstellen einer SSR-Anwendung
• Hosting einer statischen Website

Während Svelte allein eine sehr gute Entwicklungserfahrung bietet, müssen Sie immer noch entscheiden, wie Sie Ihre Anwendung an den Benutzer ausliefern wollen. Der klassische Ansatz wäre, Ihren bevorzugten Modul-Bundler wie Webpack oder Rollup zu nehmen und Ihren Code in einer großen JavaScript-Datei zu bündeln.SvelteKit basiert auf Svelte und ist ein Framework für die Entwicklung extrem leistungsstarker Webanwendungen. Die Erstellung einer Anwendung mit allen modernen Best Practices ist verteufelt kompliziert. Zu diesen Praktiken gehören Build-Optimierungen, so dass nur der minimal erforderliche Code geladen wird, Offline-Unterstützung, Prefetching von Seiten, bevor der Benutzer die Navigation startet, und konfigurierbares Rendering, das es Ihnen ermöglicht, HTML auf dem Server oder im Browser zur Laufzeit oder zur Build-Zeit zu erzeugen. SvelteKit erledigt all die langweiligen Dinge für Sie, damit Sie sich auf den kreativen Teil konzentrieren können. SvelteKit verwendet Vite mit einem Svelte-Plugin, um eine blitzschnelle und funktionsreiche Entwicklungserfahrung mit Hot Module Replacement (HMR) zu bieten, bei den Änderungen an Ihrem Code sofort im Browser wiedergegeben werden.