Svelte und SvelteKit - Intensiv-Schulung für Einsteiger

Institut: HECKER CONSULTING
Bereich: Technik, EDV, Telekommunikation

Kurs merken

Anmelden

Kursbeschreibung

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 erfreut sich zunehmender Beliebtheit, und das hat einen guten Grund. Die Entwicklung von Anwendungen mit Svelte basiert auf dem Schreiben wiederverwendbarer und in sich geschlossener Komponenten - ähnlich wie bei anderen beliebten JavaScript-Frameworks wie Angular, React und Vue.

Der große Unterschied liegt in der Kompilierung zur Build-Zeit - im Gegensatz zu einer Interpretation des Codes zur Laufzeit. Mit anderen Worten: Svelte kompiliert Ihren Code bereits während des Build-Prozesses und das endgültige Bundle enthält nur JavaScript, das Ihre Anwendung tatsächlich benötigt. Das Ergebnis sind schnelle Webanwendungen mit kleinen Paketgrößen. Andere Frameworks parsen und bündeln nur den von Ihnen geschriebenen Code, wobei sie den Komponentenbaum im Wesentlichen unverändert übernehmen und an den Client weitergeben. Damit der Browser in der Lage ist, diesen zu interpretieren und die Benutzeroberfläche zu aktualisieren, muss viel mehr Code ausgeliefert werden und auf der Client-Seite wird zusätzliche Arbeit geleistet. Abgesehen davon ist Svelte ein ideales Framework für Einsteiger. Jeder, der weiß, wie man HTML schreibt und wie man <style>- und <script>-Tags mit grundlegendem JavaScript und CSS einfügt, kann bereits mit dem Schreiben von Svelte-Komponenten beginnen.

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

Svelte erfreut sich zunehmender Beliebtheit, und das hat einen guten Grund. Die Entwicklung von Anwendungen mit Svelte basiert auf dem Schreiben wiederverwendbarer und in sich geschlossener Komponenten - ähnlich wie bei anderen beliebten JavaScript-Frameworks wie Angular, React und Vue.

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…

mehrweniger lesen

Wann & Wo

Website

https://www.hco.de

Datum

auf Anfrage

Uhrzeit

09:00

Dauer

ab 1 Tag nach Vereinbarung

Ort

Virtuelles Klassenzimmer, Live-Online-Seminar

Kontakt

E-Mail

info@hco.de

Kontakt

Peter Hecker

Straße

Erkrather Str. 401

PLZ

40231

Ort

Düsseldorf

Land

Deutschland

Bundesland

---

Tel

+49 211 542 480 40

Voraussetzungen

Keine besonderen Anforderungen.

Ziele

Zielgruppe

Interessenten mit abgeschlossener Berufsausbildung oder Berufserfahrungen im Medienbereich, Kommunikationsbereich oder kaufmännischen Bereich, die sicher im Umgang mit dem PC sind sowie eine Affinität zum Internet und digitalen Medien haben und eineSvelte und SvelteKit - Beratung, Coaching, Workshop, Training suchen!

Weitere Daten

Kursnummer

5fdb696b74014e33b29f

Plätze