Svelte für Einsteiger

Svelte ist die perfekte Plattform für Einsteiger, die noch keine Erfahrungen mit dem Programmieren haben.

Mit einfachen HTML/CSS- und JavaScript-Kenntnissen können Sie Ihre erste Website von Grund auf erstellen, ohne dass Sie zusätzliche Kenntnisse benötigen.

Svelte ist ein Werkzeug für die Erstellung schneller Webanwendungen und vergleichbar mit JavaScript-Frameworks wie Angular, React sowie Vue, deren gemeinsames Ziel es ist, elegante interaktive Benutzeroberflächen einfach zu erstellen.

Aber es gibt einen entscheidenden Unterschied: Svelte konvertiert Ihre Anwendung zur Erstellungszeit in ideales JavaScript, anstatt Ihren Anwendungscode zur Laufzeit zu interpretieren. Das bedeutet, dass Sie nicht für die Leistungskosten der Abstraktionen des Frameworks aufkommen müssen und dass Sie beim ersten Laden Ihrer Anwendung nicht benachteiligt werden.

In Svelte wird eine Anwendung aus einer oder mehreren Komponenten zusammengesetzt. Eine Komponente ist ein wiederverwendbarer, in sich geschlossener Codeblock, der HTML, CSS und JavaScript kapselt, die zusammengehören und in eine Datei geschrieben werden.

Sie können Ihre gesamte Anwendung mit Svelte erstellen oder es schrittweise zu einer bestehenden Codebasis hinzufügen. Sie können auch Komponenten als eigenständige Pakete ausliefern, die überall funktionieren, ohne den Overhead einer Abhängigkeit von einem herkömmlichen Framework.

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.

Die Weiterbildung "Svelte für Einsteiger" bieten wir Ihnen als Firmenseminar sowie Inhouse-Schulung Live-Online und Vor-Ort an!