Im Rahmen meines Workshops in der Masterklasse Mobile im 1. Semester des Studiengangs Interactive Technologies habe ich einen ersten Überblick über Svelte und SvelteKit gegeben. Diese Technologien bieten eine spannende Alternative, besonders wenn es um die schnelle Entwicklung von Prototypen geht. Viele Studierende haben bereits mit Frameworks wie Ionic, Angular, Vue oder React gearbeitet, weshalb ich auch den Vergleich zu diesen Ansätzen kurz beleuchtet habe. Zunächst stellte ich in einer kompakten Präsentation die zentralen Punkte vor, bevor wir im praktischen Teil des Workshops gemeinsam eine kleine Anwendung entwickelten, um den direkten Nutzen von SvelteKit zu demonstrieren.

Was ist Svelte?

Svelte ist ein modernes Frontend-Framework, das anders arbeitet als traditionelle Webentwicklungs-Bibliotheken. Der große Unterschied: Während viele andere Frameworks während der Ausführung im Browser mit einer virtuellen DOM-Struktur arbeiten, verwandelt Svelte den Code bereits beim Erstellen (dem sogenannten Build-Prozess) in reines JavaScript. Dadurch entstehen Webseiten, die meistens schneller und effizienter funktionieren, weil sie unnötigen Zusatzaufwand vermeiden.

Was ist SvelteKit?

SvelteKit baut auf dieser Grundlage von Svelte auf und ist ein umfassendes Application Framework, das die Webentwicklung noch leichter macht. Mit SvelteKit kann man moderne Webanwendungen schneller umsetzen, da es bereits nützliche Funktionen mitbringt: ein durchdachtes Routing-System für die Navigation zwischen Seiten, serverseitiges Rendering (die Seite wird schon auf dem Server zusammengebaut) und die Möglichkeit, statische Seiten zu erzeugen.

Entstehung und Versionen

Die Geschichte von Svelte begann 2016 mit der ersten Version, die schon damals einen neuen, einfacheren Ansatz für Webentwicklung bot. Im Laufe der Zeit wurden mit jeder neuen Version die Komponenten und die Programmiersprache immer besser. Besonders mit Version 3 im Jahr 2019 schaffte Svelte den Durchbruch, indem es eine komplett neue Art der Reaktivität (wie Elemente auf Änderungen reagieren) einführte. Die Einführung von SvelteKit im Jahr 2020 und die neuesten Entwicklungen in Svelte 5 (2024) zeigen, dass sich das Framework ständig weiterentwickelt und immer neue Funktionen und Verbesserungen bekommt.

Warum Svelte?

Im Vergleich zu Frameworks wie React und Vue hat Svelte den Vorteil, dass es direkter und einfacher zu nutzen ist. Während du bei React und Vue oft komplizierte Lösungen für die Zustandsverwaltung (State Management) und man zusätzliche Bibliotheken braucht, bietet Svelte eine unkomplizierte und sofortige Reaktivität. Das bedeutet weniger „Füllcode“ (Boilerplate-Code), was den Einstieg und die tägliche Arbeit deutlich vereinfacht. Auch die in SvelteKit eingebaute Navigation zwischen Seiten hilft dabei, den Entwicklungsaufwand gering zu halten.

Einsatzbereiche:

Svelte kann in verschiedenen Bereichen eingesetzt werden: für Single Page Applications, für serverseitig gerenderte Anwendungen, für statische Websites sowie für mobile Anwendungen und Progressive Web Apps. Die Vielseitigkeit und Einfachheit dieser Technologien machen sie zu einem idealen Werkzeug für schnelle Prototypen oder innovative Webprojekte.

Vor- und Nachteile:

Natürlich hat jedes Framework seine Stärken und Schwächen. Zu den Vorteilen von Svelte gehören die einfache und intuitive Programmiersprache sowie der reduzierte Füllcode, was zu schnelleren Ladezeiten und einer besseren Performance führt. Auf der anderen Seite ist das Ökosystem um Svelte noch nicht so groß wie bei etablierten Frameworks wie React oder Vue. Das bedeutet, dass es weniger Community-Ressourcen und verfügbare Erweiterungen gibt. Bei sehr komplexen Anwendungen könnte es außerdem nötig sein, zusätzliche Werkzeuge einzusetzen, um alle Anforderungen zu erfüllen.

Übungsbeispiel: Mini Quiz App

Da wir in der Masterklasse eine Quiz-App mithilfe von Ionic und Angular umsetzten, entschied ich mich, eine vereinfachte Version dieses Projekts mit Svelte zu realisieren – so konnten die besonderen Vorzüge dieser Alternative klar hervorgehoben werden. Um den Aufwand nicht unnötig zu steigern, wurde auf ein detailliertes Styling verzichtet, da der Unterschied lediglich darin liegt, dass das CSS direkt in der jeweiligen Komponente definiert wird, während die Syntax ansonsten identisch bleibt.

Zu Beginn wurde ein neues Projekt erstellt und konfiguriert. Mit wenigen Befehlen wie:

npx sv create new-quiz-app 
cd my-quiz-app 
npm install 
npm run dev -- --open 

konnte das Grundgerüst der App schnell aufgesetzt werden. Im Anschluss erklärte ich die grundlegende Verzeichnisstruktur des Projekts und was beim Routing zu beachten ist.

• Fragen-Daten erstellen

Nachdem die Struktur klar war, zeigte ich, wie man in der Datei src/lib/data.js die Quiz-Daten anlegt. Hier wurden die Fragen und Antwortoptionen direkt als Export definiert – ein Ansatz, der den Verzicht auf zusätzliche Services oder Dependency Injection ermöglicht und somit die einfache Handhabung unterstreicht.

• Landing-Page erstellen

Die nächste Etappe war die Erstellung der Landing Page in src/routes/+page.svelte. Diese Startseite enthält einen Button, der über die eingebaute goto()-Funktion den Nutzer zur Quiz-Seite weiterleitet – ein Beispiel für die unkomplizierte Navigation in SvelteKit.

• Quiz-Seite erstellen

Auf der eigentlichen Quiz-Seite, realisiert in src/routes/quiz/+page.svelte, wurden die Fragen dynamisch dargestellt. Mittels einer Schleife wurden die Antwortoptionen gerendert und durch reaktive Variablen konnte das UI sofort auf Nutzereingaben reagieren. Nach Beantwortung der letzten Frage wurde der Punktestand an die Ergebnis-Seite übergeben, was durch die Reaktivität ermöglicht wird.

• Ergebnis Seite erstellen

Auf der Ergebnis-Seite in src/routes/result/+page.svelte wird abschließend der finale Punktestand angezeigt. Durch den Einsatz von optionalem Chaining wird sichergestellt, dass bei fehlenden Daten ein Standardwert genutzt wird. Zudem gibt es hier einen Button, der es ermöglicht, das Quiz neu zu starten.

• Einsatz eines Stores

Als Erweiterung zur Datenübergabe zwischen den Seiten habe ich einen zentralen Store in src/lib/stores.jseingerichtet. Dieser speichert den Score und stellt sicher, dass der Punktestand auch bei Navigationen zwischen den Komponenten erhalten bleibt – ein klarer Vorteil gegenüber Frameworks, die häufig komplexere Lösungen erfordern.

Fazit

Das Übungsbeispiel wurde gut umgesetzt – die Mitwirkenden waren sehr aufmerksam und haben eine eingebaute Challenge zügig gelöst. Es hat mich positiv überrascht, wie reibungslos die Zeit genutzt werden konnte. Durch Beobachtungen aus früheren Workshops habe ich gelernt, das Tempo den Bedürfnissen der Teilnehmer anzupassen. Daher habe ich den praktischen Teil bewusst einfacher gehalten und zusätzliche Aufgaben vorbereitet, falls mehr Zeit zur Verfügung gestanden hätte. Insgesamt konnten wir den Ablauf in einem ruhigen und strukturierten Rahmen durchgehen.

Es hat mir viel Freude bereitet und war zugleich sehr lehrreich. Ich hoffe, ich konnte einen guten Einblick in Svelte vermitteln, der uns als wertvoller Anstoß für unsere künftigen Entscheidungen bei der Framework-Auswahl dient. Im Folgenden finden sich die Folien, die während der theoretischen Einführung im Workshop verwendet wurden:

Weitere Informationen und praxisnahe Einblicke in Svelte finden sich auf der offiziellen Svelte Homepage. Besonders empfehlenswert ist das interaktive Svelte Tutorial, das einen gut strukturierten Einstieg in das Framework bietet.