Svelte

Eintrag zuletzt aktualisiert am: 16.01.2023

Svelte [https://svelte.dev] ist ein JavaScript-Framework zur Erstellung von modernen Web- und Cross-Platform-Oberflächen mit HTML und CSS. Das englische Wort svelte heißt auf Deutsch übersetzt schlank, aber auch anmutig.

Svelte bietet Basisfunktionen für Single-Page-Web-Applications wie Komponentenbildung, Templates mit Datenbindung, Formulare und Ereignisse. mitgelieferte Module kann man eine Zustandsverwaltung (svelte/store und svelte/motion), Animationen und Transitionen (svelte/transition und svelte/animate sowie svelte/easing) einbauen.

Die erste Version von Svelte wurde von Rich Harris bereits am 29. November 2016 veröffentlicht, nachdem Harris zuvor am Projekt Ractive.js [https://github.com/ractivejs/ractive] gearbeitet hat, welches sowohl Svelte als auch Vue.js beeinflusst hat. Die zweite Version von Svelte folgte am 19. April 2018. Erst seit der Version 3, die am 21. April 2019 erschienen ist, findet Svelte große Beachtung in der Entwicklergemeinde, denn erst mit dieser Version wurde ein innovatives Konzept für die Reaktivität eingeführt (dazu später mehr). Zudem wird erst seit Version 3 TypeScript verwendet. Eine vierte Hauptversion von Svelte soll 2023 erscheinen [https://github.com/sveltejs/svelte/milestone/6].

Ergänzend zu Svelte gibt es vom gleichen Entwicklungsteam seit dem 14. Dezember 2022 [https://svelte.dev/blog/announcing-sveltekit-1.0] die Version 1.0 von SvelteKit [https://kit.svelte.dev]. SvelteKit ist ein Anwendungsframework auf Basis von Svelte, dass ergänzend Funktionen wie Routing, Server-Side-Pre-Rendering und Static-Side-Generation bietet. SvelteKit wird Thema des zweiten Teils dieser Mini-Serie sein, die in der nächsten Ausgabe von windows developer erscheinen wird.

Sehr gute Performance

Im Gegensatz zu Frameworks wie Angular, React oder Vue.js nutzen Svelte 3-basierte Anwendungen zur Laufzeit der Webanwendung keine frameworkspezifischen Module. Der gesamte Programmcode wird zur Übersetzungszeit vom Svelte-Compiler in reinen JavaScript-Code übersetzt, sodass der Code von keinen externen Programmbibliotheken mehr abhängig ist. Das Counter-Beispiel in der Projektvorlage führt gerade mal zu rund 5500 Zeichen JavaScript-Code.

Zudem gibt es bei Svelte kein Virtual Document Object Model (Virtual DOM oder auch VDOM). Das Virtual DOM ist ein Konzept vieler moderner Webfrontendframeworks (z.B. React und Vue.js sowie Blazor) bei dem Änderungen in der durch Templates gerenderten Oberfläche zunächst in einem JavaScript-Objektmodell zwischengespeichert werden. Erst wenn der Bedarf besteht, eine aktuelle Oberfläche anzuzeigen, werden die Änderungen auf das echte Document Object Model (DOM) übertragen werden. Dies reduziert die Anzahl der Operationen, die auf das tatsächliche DOM ausgeführt werden müssen, und verbessert dadurch die Leistung der Anwendung.

Allerdings führt der ständige Abgleich zwischen Virtual DOM und DOM auch zu einem gehörigen Rechenaufwand. Svelte-Anwendungen greifen direkt auf das echte Document Object Model (DOM) zu. Diese Strategie wird auch von anderen Webframeworks wie SolidJS [https://www.solidjs.com] verwendet.

Die Übersetzung zu JavaScript und der Verzicht auf das Virtual DOM führen dazu, dass Svelte-Anwendungen beim Anwendungsstart nicht viel in den Browser laden müssen und dann sehr performant ausgeführt werden.

Svelte hatte in Version 2 noch den dieses Konzept gut erklärenden Werbeslogan 'The magical disappearing UI framework'. Seit Version 3 verwendet man etwas hochtrabend den Werbeslogan 'Cybernetically enhanced web apps'.

Einige Autoren, z.B. bei Heise [https://www.heise.de/select/ix/2020/13/2009315441946702909] bezeichnen Svelte als einen "JavaScript-Compiler". Der Ausdruck "JavaScript-Compiler" ist aber unnötig irreführend, denn er suggeriert, dass Svelte ein Ersatz für TypeScript wäre, also eine Programmiersprache, die nach JavaScript übersetzt wird. Das ist aber Svelte ganz und gar nicht: Svelte programmiert man mit TypeScript (oder JavaScript, wenn man denn es unbedingt will), lediglich die Abhängigkeit von einer Runtime wird durch das Kompilieren in Svelte entfernt.