Svelte für Einsteiger - Inhouse von HECKER CONSULTING

Svelte ist die perfekte Plattform für Einsteiger: Wenn Sie daran interessiert sind, moderne, reaktive Benutzeroberflächen zu erstellen, die schnell laden und schnell laufen, ist Svelte ein Framework, das Sie nicht übersehen sollten!

Svelte - Einführung

• Grundlagen von Svelte
• Hinzufügen von Daten
• Dynamische Attribute
• Gestalten von Seiten
• Verschachtelte Komponenten
• HTML-Tags
• Eine Svelte-Anwendung erstellen

Reaktivität in Svelte verstehen

• Zuweisungen
• Deklarationen
• Anweisungen
• Aktualisieren von Arrays und Objekten

Props in Svelte verwenden

• Deklarieren von Props
• Standardwerte
• Verteilen von Props

Logik in Svelte anwenden

• If-Blöcke
• Else-Blöcke
• Else-if-Blöcke
• Each-Blöcke
• Keyed-Each-Blöcke
• Await-Blöcke

Svelte und Ereignisse

• DOM-Ereignisse
• Inline-Handler
• Ereignis-Modifikatoren
• Komponenten-Ereignisse
• Weiterleitung von Ereignissen
• DOM-Ereignisweiterleitung

Bindungen in Svelte

• Text-Eingaben
• Numerische Eingaben
• Checkbox-Eingaben
• Gruppen-Eingaben
• Textarea-Eingaben
• Bindungen auswählen
• Mehrere auswählen
• Inhaltliche Bindungen
• Blockbindung für jeden Block
• Medienelemente
• Abmessungen
• this-Schlüsselwort
• Komponentenbindung
• Bindung an Komponenteninstanzen

Der Svelte-Komponenten-Lebenszyklus

• onMount
• onDestroy
• beforeUpdate und afterUpdate
• tick

Svelte-Stores

• Beschreibbare Stores
• Auto-Abonnements
• Lesbare Stores
• Abgeleitete Stores
• Benutzerdefinierte Stores
• Store-Bindungen

Bewegungen und Übergänge in Svelte

• Tweened und Spring
• Die Übergangsdirektive
• Hinzufügen von Parametern
• Rein und raus
• Benutzerdefinierte CSS-Übergänge
• Benutzerdefinierte JS-Übergänge
• Ereignisse für Übergänge
• Lokale Übergänge
• Aufgeschobene Übergänge
• Wichtige Blöcke

Animationen und Aktionen in Svelte

• Die animate-Direktive
• Die use-Direktive
• Hinzufügen von Parametern

Fortgeschrittenes Styling in Svelte

• Die class-Direktive
• Kurzform der class-Direktive
• Inline-Stile
• Die style-Direktive

Komponentenkomposition in Svelte

• Slots
• Slot-Fallbacks
• Benannte Slots
• Prüfen auf Slot-Inhalt
• Slot-Props

Während Frameworks wie React und Vue den Großteil ihrer Arbeit im Browser des Benutzers erledigen, während die Anwendung läuft, verlagert Svelte diese Arbeit in einen Kompilierschritt, der erst beim Erstellen der Anwendung erfolgt und hochoptimiertes Vanilla-JavaScript erzeugt. Das Ergebnis dieses Ansatzes ist nicht nur kleinere Anwendungspakete und eine bessere Leistung, sondern auch eine Entwicklererfahrung, die für Menschen, die nur wenig Erfahrung mit dem modernen Tooling-Ökosystem haben, zugänglicher ist. Svelte hält sich eng an das klassische Webentwicklungsmodell von HTML, CSS und JS und fügt lediglich ein paar Erweiterungen für HTML und JavaScript hinzu. Es muss wohl weniger Konzepte und Werkzeuge erlernen als einige der anderen Framework-Optionen. JavaScript-Frameworks und -Bibliotheken werden immer größer und bringen immer mehr Abhängigkeiten mit sich. Svelte ist ein neues, leichtgewichtiges JavaScript-Komponenten-Framework. Machen Sie sich mit Svelte vertraut und erfahren Sie, wie Sie damit Anwendungen erstellen können, die Ihre Benutzer zufrieden stellen, ohne sie warten zu lassen. Lernen Sie, wie sich Svelte von Frameworks wie Angular, React sowie Vue.js unterscheidet, wie Sie Stile und Präprozessoren mit Svelte verwenden, mit Daten über mehrere Komponenten hinweg arbeiten, Lifecycle-Methoden zum Laden von Daten nutzen und vieles mehr.