Svelte Lernen: Programmieren
Svelte Lernen: Programmieren — Lerne Svelte und SvelteKit mit einem Live-Editor und der kompilierten Ausgabe direkt daneben
Svelte Lernen: Programmieren ist eine kostenlose iOS- und Android-App, mit der du auf deinem Smartphone Svelte und SvelteKit lernst. Schreibe Komponenten in einem Live-Editor mit Vorschau, sieh dir das JavaScript an, in das der Compiler sie umwandelt, und absolviere 41 Kurse – von deinem ersten reaktiven Wert bis zu einer bereitgestellten Full-Stack-App, begleitet von einem KI-Mentor.
- Preis
- Kostenlos, Upgrade auf Pro
- Plattformen
- iOS und Android
- Sprachen
- 22
- Altersfreigabe
- 4+
- Erfordert
- iOS 15.1 oder neuer
Auf diesem Bildschirm läuft nichts mit Svelte. Hier läuft das, was Svelte geschrieben hat.
Die erste Lektion der App zeigt eine neunzeilige Komponente direkt neben dem JavaScript, das der Compiler dafür erzeugt hat. Tippe auf +1, und die betroffenen Zeilen leuchten auf: eine Invalidierung, ein neu berechneter Wert, zwei geänderte Textknoten, alles andere bleibt unberührt. Das ist die Idee hinter dem Framework – gezeigt, bevor sie erklärt wird.
Was es ist
Svelte Lernen: Programmieren ist eine kostenlose iOS- und Android-App, die Svelte und SvelteKit in 41 Kursen und 163 Lektionen vermittelt – vom Anfänger- bis zum fortgeschrittenen Niveau. Sie beginnt mit einer Demo, die eine Komponente neben ihrem kompilierten JavaScript zeigt, und behandelt anschließend Reaktivität, Props, Stores, Transitions, Svelte 5 Runes und SvelteKit-Routing, Datenladen, Form-Actions und Deployment. Ein Live-Editor mit Vorschau und ein KI-Mentor sind integriert.
In der App
So sieht es aus
Der Kurs
Das deckt der Svelte-Kurs ab
41 Kurse und 163 Lektionen aus der kurseigenen Liste der App, eingestuft von A1 bis C1 und abschließend mit einem vollständigen Full-Stack-SvelteKit-Projekt.
Erste Komponenten
Was Svelte ist und warum es einen anderen Ansatz verfolgt, wie du ein Projekt einrichtest und deine erste Komponente mit reaktiven Variablen schreibst.
Props, Templates, Events und Binding
Props übergeben, Bedingungen und each-Schleifen im Markup, DOM-Events und benutzerdefinierte Events sowie Two-Way-Binding mit bind:-Direktiven.
Lebenszyklus, Stores und Context
onMount und onDestroy, writable-, readable-, derived- und benutzerdefinierte Stores, Slots und Komposition sowie die Context API.
Transitions, Animationen und Actions
Transition-Direktiven, die animate-Direktive, Actions für wiederverwendbares DOM-Verhalten, benutzerdefinierte Transitions sowie die spring- und tweened-Motion-Stores.
SvelteKit-Grundlagen
Dateibasierte Routen und Seiten, load-Funktionen, erweiterte Layouts, Form Actions, API-Routen, Server-Hooks und Fehlerseiten.
Svelte 5 Runes
Eine Einführung in Runes, Props und Snippets, fortgeschrittene Runes sowie ein tieferer Einblick in die Funktionsweise der Reaktivität von Svelte.
SvelteKit in der Produktion
SSR und Prerendering, Streaming, Performance, SEO und Meta-Tags, Sicherheit, Authentifizierungsmuster, Adapter und Deployment.
Testing und Full-Stack
Unit-Tests mit Vitest, End-to-End-Tests mit Playwright, Bibliotheken von Drittanbietern, State Management im großen Maßstab und eine Full-Stack-SvelteKit-App.
So funktioniert es
So funktioniert eine Lernsession
Die App ist entlang eines Weges von einem reaktiven Wert bis zu einer bereitstellbaren App aufgebaut, und an jeder Station wechseln sich Lesen und praktische Aufgaben ab.
Sieh dir zuerst die Ausgabe des Compilers an
Die Einstiegsdemo zeigt eine kleine Komponente direkt neben dem JavaScript, in das sie kompiliert wird. Die kompilierte Hälfte wurde vorab erzeugt und ist in der App enthalten, daher läuft die Demo ohne Verbindung.
Bearbeite eine Komponente und sieh dir die Vorschau an
Die Lektionen öffnen einen Editor mit Tabs für HTML, CSS und JavaScript sowie einer Ausführen-Schaltfläche, die die Komponente in einer Vorschau rendert. Die Vorschau lädt den Svelte-Compiler über das Netzwerk und benötigt daher eine Verbindung.
Prüfe, ob du es verstanden hast
Auf jedes Thema folgen ein Quiz und Programmieraufgaben. Der KI-Mentor kann ein Konzept erklären, eine Lern-Roadmap vorschlagen oder dich zu einem Kurs abfragen. Die Weekly Code Challenge ergänzt das Ganze um eine Wettbewerbsrunde.
Was steckt drin
Das bietet die App
41
Kurse, A1 bis C1
163 Lektionen in 41 Kursen – von der Einrichtung von Svelte und deiner ersten Komponente über Stores, Transitions, SvelteKit-Routing und Hooks, Svelte 5 Runes und Testing bis hin zu einem Full-Stack-Abschlussprojekt.
Kompiliert
Komponente neben ihrem kompilierten Code
Die Demo beim ersten Start zeigt Quellcode und erzeugtes JavaScript gemeinsam und zählt aktualisierte Textknoten im Vergleich zu neu erstellten Elementen. So kannst du direkt auf dem Bildschirm ablesen, wie viel ein Update kostet.
Vorschau
Live-Editor mit Vorschau
Schreibe Markup, Styles und Script in separaten Tabs und rendere die Komponente auf deinem Smartphone. Die Vorschau verwendet den Svelte 4.2.19-Compiler. Mit Svelte 5 Runes geschriebener Code wird daher möglicherweise nicht in der Vorschau angezeigt und sollte besser gelesen und nachvollzogen werden.
KI
KI-Mentor
Frage im Chat-Tab nach den wichtigsten Konzepten eines Kurses, Tipps zum schnelleren Lernen, einem Quiz oder einer persönlichen Roadmap. Du kannst auch nach einem Fehler fragen, den du nicht lesen kannst.
Wöchentlich
Weekly Code Challenge
Eine regelmäßige Herausforderungsrunde, an der du parallel zu den Lektionen teilnehmen kannst – mit Streaks, Fortschrittsverfolgung und Erinnerungen, damit du deine Routine beibehältst.
Prüfung
Abschlusszertifikat
Bestehe die Abschlussprüfung, und das Zertifikat trägt deinen Namen. Es belegt deine geleistete Arbeit, ist aber kein anerkanntes Berufs- oder Bildungszertifikat.
Hintergrund
Was ist Svelte, und worin unterscheidet es sich von anderen Methoden zum Erstellen einer Weboberfläche?
Svelte ist ein Framework zum Erstellen von Benutzeroberflächen, bei dem Komponenten vorab in einfaches JavaScript kompiliert werden, das die Seite direkt aktualisiert. Dadurch muss keine große Runtime ausgeliefert werden, die die Änderungen im Browser ermittelt. Eine Komponente ist eine einzelne Datei mit Markup, Styles und Script, und eine Zuweisung wie count += 1 reicht aus, um den Bildschirm zu aktualisieren. SvelteKit ist das darauf aufbauende Anwendungs-Framework und ergänzt dateibasiertes Routing, serverseitiges Datenladen, Formularverarbeitung und Adapter für das Deployment. Für Lernende bedeutet das in der Praxis weniger Boilerplate und eine kürzere Strecke zwischen dem Code und dem, was auf der Seite erscheint.
Reaktivität zur Compile-ZeitEine Zuweisung ist der State
In Svelte wandelt der Compiler eine gewöhnliche Zuweisung in den Code um, der die betroffenen Teile der Seite aktualisiert. Eine mit $: beginnende Label-Anweisung berechnet einen Wert neu, sobald sich die von ihr gelesenen Werte ändern. Für abgeleitete Daten sind daher keine Hilfsfunktionen nötig.
StoresGemeinsamer State über mehrere Komponenten hinweg
Ein beschreibbarer Store enthält einen Wert, den viele Komponenten abonnieren können. Ein vorangestelltes $ vor seinem Namen aktiviert das automatische Abonnement. Darauf bauen Derived Stores und Custom Stores auf, wenn State berechnet oder gekapselt werden muss.
RunesDie Svelte 5-Syntax
Svelte 5 ersetzt einen großen Teil der früheren Compiler-Magie durch explizite Funktionen wie $state, $derived und $props sowie durch Snippets für wiederverwendbares Markup. Beide Stile werden in echten Projekten verwendet. Deshalb vermittelt die App das ursprüngliche Modell und das Runes-Modell in separaten Kursen.
SvelteKitRouting, Daten und Deployment
Eine Datei wie +page.svelte wird zu einer Route, eine Load-Funktion ruft Daten ab, bevor die Seite gerendert wird, Form-Actions verarbeiten Übermittlungen auf dem Server, und ein Adapter verpackt das Ergebnis für einen statischen Host, einen Node-Server oder eine serverlose Plattform.
Passend
Für wen es geeignet ist – und für wen nicht
Es passt zu dir, wenn du
- Möchtest du Svelte oder SvelteKit in kurzen Einheiten statt in langen Videokursen lernen
- Kennst du etwas HTML und JavaScript und möchtest sehen, was ein Compiler-First-Framework verändert
- Möchtest du verstehen, wie reaktive Aktualisierungen funktionieren, und liest du lieber den generierten Code, statt ihn einfach darauf zu vertrauen
- Möchtest du einen Lernpfad, der Routing, Datenladen, Authentifizierung und Deployment umfasst – nicht nur Komponenten
- Möchtest du einen KI-Mentor fragen, warum sich ein Stück Code so verhält, wie es sich verhält
Du bist hier nicht richtig, wenn du
- Möchtest du Svelte 5 Runes-Code in der Vorschau ausführen, die den Svelte 4.2.19-Compiler verwendet
- Musst du ein vollständiges SvelteKit-Projekt auf dem Smartphone erstellen und deployen, wofür du weiterhin einen Laptop brauchst
- Erwartest du, dass alles kostenlos ist: Der erste Kurs ist kostenlos und Pro schaltet den Rest frei
- Hast du noch nie HTML oder JavaScript gesehen und möchtest vor einem Framework einen allgemeinen Programmierkurs absolvieren
Fragen
Häufig gestellte Fragen
Wie kann ich Svelte auf einem Smartphone lernen?
Wähle einen Lernpfad, der Lesen und das Ausführen von Code verbindet, denn Svelte lässt sich am einfachsten verstehen, wenn du einen Wert änderst und beobachtest, wie die Seite darauf reagiert. Svelte Lernen: Programmieren beginnt mit einer Demo der kompilierten Ausgabe und bietet dir anschließend Lektionen mit einem HTML-, CSS- und JavaScript-Editor, einer Vorschau und einem KI-Mentor. Der Einstieg ist auf iOS und Android kostenlos.
Ist Svelte für Anfänger schwer zu lernen?
Svelte gilt oft als zugänglich, weil Komponenten wie gewöhnliches HTML, CSS und JavaScript aussehen und eine Zuweisung den Bildschirm aktualisiert. Die schwierigeren Themen kommen später: Stores, der Lebenszyklus, die Aufteilung von SvelteKit in Server und Client sowie der Wechsel zu Svelte 5 Runes. Svelte Lernen: Programmieren stuft seine 41 Kurse von A1 bis C1 ein, sodass diese Themen in der richtigen Reihenfolge behandelt werden.
Was ist SvelteKit und wird es in der App behandelt?
SvelteKit ist das Anwendungs-Framework für Svelte und ergänzt es um dateibasierte Routen, serverseitiges Datenladen, Form Actions, Hooks und Deployment-Adapter. Svelte Lernen: Programmieren bietet eigene Kurse zu SvelteKit-Routing und -Seiten, Datenladen, Form Actions, API-Routen, Hooks, Fehlerbehandlung, SSR und Prerendering, Streaming, Sicherheit und Adaptern.
Behandelt die App Svelte 5 Runes?
Ja. Svelte Lernen: Programmieren umfasst Kurse zu einer Einführung in Runes, Props und Snippets sowie zu fortgeschrittenen Runes. Die Vorschau des Editors kompiliert derzeit mit Svelte 4.2.19, daher wird Runes-Code möglicherweise nicht in der Vorschau angezeigt und sollte am besten anhand des Lektionstexts nachvollzogen werden.
Kann ich Svelte-Code auf meinem Smartphone ausführen?
Du kannst eine Komponente im Editor schreiben und sie in einer Vorschau rendern. Die Vorschau von Svelte Lernen: Programmieren lädt den Svelte-Compiler, um die Komponente zu erstellen, und benötigt daher eine Verbindung. Die einleitende Demo der kompilierten Ausgabe ist anders: Ihr kompilierter Code ist in der App enthalten und läuft ohne Netzwerkverbindung.
Ist Svelte Lernen: Programmieren kostenlos?
Die App kann kostenlos heruntergeladen werden. Der erste Kurs ist kostenlos und umfasst ein tägliches KI-Mentor-Kontingent; Pro schaltet alle Kurse frei, entfernt Werbung und bietet unbegrenzten KI-Mentor-Zugriff. Du kannst echte Lektionen durcharbeiten, bevor du entscheidest, ob du upgraden möchtest.
Muss ich zuerst JavaScript können?
Einige Kenntnisse in HTML und JavaScript erleichtern die ersten Kurse, da eine Svelte-Komponente einfach aus diesen Sprachen in einer Datei besteht. Svelte Lernen: Programmieren beginnt mit einer Erklärung, was Svelte ist und wie du es einrichtest, und erläutert jedes Konzept in verständlicher Sprache. Es handelt sich jedoch um einen Framework-Kurs und nicht um einen ersten Programmierkurs.
Welche Plattformen und Sprachen werden unterstützt?
Svelte Lernen: Programmieren läuft auf iOS über den App Store und auf Android über Google Play. Die Benutzeroberfläche ist in 22 Sprachen verfügbar. Die App ist ab 4 Jahren freigegeben, daher sind die Inhalte nicht altersbeschränkt.
Loslegen
Kompiliere heute deine erste Komponente
Kostenloser Einstieg auf iOS und Android in 22 Sprachen.
Mehr von CoddyKit
Verfügbar auf iOS und Android.