Wieso Svelte? Ein Einstieg in das JavaScript-Framework

In der Frontend-Welt von JavaScript erhält das Framework Svelte als neue Technik in den letzten zwei Jahren zunehmend Aufmerksamkeit. Das ist erstaunlich, weil dieser spezielle Bereich grundsätzlich ruhiger geworden ist: Angular, React und Vue haben sich als die bekanntesten Frameworks etabliert, andere sind Nischenprodukte geblieben. Svelte scheint jedoch neue Akzente setzen zu können.

2018 gestand die Studie "The State of JavaScript" Svelte ein großes Potenzial zu. In der 2019er-Ausgabe ist Svelte eine der Top-Techniken, mit der sich Entwickler beschäftigen wollen. Das ist ein guter Anlass, einen Blick auf Svelte zu werfen und herauszufinden, welche Eigenschaften von Svelte viele Personen ansprechen.

Svelte ist besonders, weil es kein klassisches Framework ist, sondern ein Compiler. Frameworks wie Angular, Vue und React stellen ihre Funktionen in Form von zusätzlichen Framework-Modulen zur Verfügung. Entwickler müssen sie zusätzlich zum Sourcecode des Projekts einbinden. Dadurch vergrößert sich die Dateigröße der Applikation enorm – auch dann, wenn die spätere Applikation einfach und klein ist. Bei Svelte ist es stattdessen das Ziel, die Dateigröße der Applikation gering zu halten. Dazu übersetzt das Framework die Komponenten mit einem Compiler in sogenanntes Vanilla-JavaScript. Das bedeutet, dass ein Ausführen des Codes ohne zusätzliche Librarys oder Module möglich ist.

Mit klassischen Frameworks müssen Entwickler Komponenten und Templates erstellen, die nur in Verbindung mit den zusätzlichen Modulen der Frameworks funktionieren. Die Module können die Komponenten und Templates verarbeiten und erstellen daraus automatisch die Benutzeroberfläche. Das jeweilige Framework nimmt Entwicklern sämtliche Arbeiten am Document Object Model (DOM) des Browsers ab. Wenn sich Daten innerhalb der Applikation ändern, die eine Änderung der angezeigten Nutzeroberfläche bewirken sollen, erkennt das Framework das automatisch und aktualisiert die angezeigten Elemente. Zum Abgleich der Daten und der Durchführung der Änderungen laufen häufig komplexe Algorithmen ab.

Svelte liegt eine andere Idee zugrunde: Beim Kompilieren der Svelte-Komponenten fügt das Framework den größten Teil der Funktionen, die zum Erstellen und Aktualisieren der Nutzeroberfläche notwendig sind, als eigene JavaScript-Funktionen in die Komponente ein. Bei Änderung der Daten müssen keine komplexen Algorithmen den DOM aktualisieren. Die Änderungen geschehen innerhalb der Komponenten direkt im DOM. Die gesamte Logik liegt darin in Form einfacher Funktionen. Ebenso wie klassische Frameworks nimmt Svelte Entwicklern die Arbeit am DOM des Browsers ab, allerdings ohne dafür die Einbindung zusätzlicher Module zu benötigen.

Einführung in Svelte

Um mit Svelte zu starten, können Entwickler die offizielle Svelte-REPL verwenden. Dabei handelt es sich um eine webbasierte Entwicklungsumgebung für Svelte-Applikationen. Damit können Nutzer neue Projekte anlegen sowie Svelte-Dateien erstellen und direkt im Browser editieren, kompilieren und ausführen. Das Svelte-Team stellt eine eigene Cloud zur Verfügung, in der die Projekte automatisch gespeichert werden. Die wichtigsten Funktionen von Svelte können Anwender so testen, ohne lokale Installationen oder Konfigurationen durchführen zu müssen. Ein erstes "Hello World" ist mit nur einer Zeile schnell erstellt.

Schöner wird es mit CSS: Style-Definitionen können Entwickler ähnlich wie in einer HTML-Datei innerhalb der Komponente in ein <style>-Tag schreiben. Das Besondere bei Svelte ist dabei, dass alle Style-Definitionen innerhalb des <style>-Tags nur für die Komponente gelten, in der man sie definiert. Das Konzept bezeichnet das Svelte-Team als "component-scoped-styles". Es verhindert CSS-Konflikte zwischen verschiedenen Komponenten. Die Templates benötigen keine eigene Tag-Kennzeichnungen.

<style>
	p {
		color: blue;
		font-size: 15px;
	}
</style>

<h1>Hello styled world</h1>

Als dritter Bestandteil der Komponente fehlt jetzt noch JavaScript, das Entwickler (ebenfalls ähnlich wie in einer HTML-Datei) in ein <script>-Tag schreiben können. Variablen und Funktionen, deren Definition im Skript-Teil erfolgt, sind im Template sichtbar und können dort zum Einsatz kommen. Dadurch können Anwender Daten und Event-Handler einfach im Template einbinden. Die Verwendung der Variable im Template bindet außerdem die Variable reaktiv an die Nutzeroberfläche. Das bedeutet, dass die angezeigte Nutzeroberfläche automatisch mit den neuen Daten aktualisiert wird, wenn sich der Wert der Variable ändert. Ähnlich wie bei React müssen Entwickler JavaScript-Ausdrücke im Template in geschweiften Klammern schreiben.

<script>
	let count = 0;

	function handleClick() {
		count += 1;
	}
</script>

<div>Click count: {count}</div>
<button on:click={handleClick}>Click</button>

Der Script-Teil definiert eine Variable count und eine Funktion handleClick. Ein div-Element bindet die Variable im Template ein und zeigt ihren Wert an. Die Funktion handleClick ist im Template als Click-Handler an einen Button gebunden. Beim Klick auf den Button ändert die Funktion handleClick die Variable count. Aufgrund der reaktiven Bindung der Variable erkennt die Applikation die Änderung und die angezeigte Komponente aktualisiert sich mit dem neuen Wert von count.

Svelte-Komponenten haben folglich drei Abschnitte: JavaScript, CSS und Templates. Die Struktur erinnert grundsätzlich an Vue und Angular. Es ist allerdings wichtig zu verstehen, dass der Skript-Teil einer Svelte-Komponente kein normales JavaScript darstellt, sondern ebenfalls beim Kompilieren der Komponente verändert wird. Dadurch verhalten sich die JavaScript-Ausdrücke teilweise anders, als man von reinem JavaScript gewohnt ist.

Das fällt besonders auf, wenn die im Template eingebundenen Daten von mehreren Variablen abhängig sind. Dazu ändert sich das Counter-Beispiel. Anstatt die Variable count direkt in das Template im Text Click count: des div-Elements einzubinden, definiert man eine neue Variable mit der Bezeichnung msg als Zeichenkette. Der Variable weisen Entwickler den Wert Click count: als Zeichenkette zu und fügen den Wert der Variable count an. Abschließend bindet man die Variable als anzuzeigenden Text im div-Element ein:

<script>
	let count = 0;
	let msg = "Click count: " + count;
 
	function handleClick() {
		count += 1;
	}
</script>

<div>{msg}</div>
<button on:click={handleClick}>Click</button>

Beim Klick auf den Button ist nun zu sehen, dass der angezeigte Text keine Aktualisierung erhält. Der Text ist abhängig von der Variable msg und Änderungen davon führen automatisch (reaktiv) zu einer Aktualisierung des Texts. Die Funktion handleClick ändert direkt aber nur den Wert der Variable count und nicht von msg. Svelte erkennt die Abhängigkeit zwischen den beiden Variablen nicht automatisch. Es kommt also nicht zur gewünschten Aktualisierung.

Glücklicherweise gibt es eine Möglichkeit, dem Compiler mitzuteilen, dass der Wert einer Variable abhängig von dem Wert einer anderen Variable ist und die Anzeige sich aktualisieren soll, wenn der Wert der Variable nicht direkt, sondern indirekt über den Wert einer anderen Variable ändert. Das können Entwickler erreichen, indem sie den Ausdruck let bei der Initialisierung der Variable gegen $: austauschen. Das ist kein Bestandteil von reinem JavaScript, sondern Svelte fügt es zur Syntax hinzu. Hier wird deutlich, dass der Svelte-Compiler in den Programmfluss eingreift und einige Logik zum Erfassen der reaktiven Änderungen einbaut. Folgendes Beispiel aktualisiert den angezeigten Text nach einem Klick:

<script>
	let count = 0;
	$: msg = "Click count: " + count;
 
	function handleClick() {
		count += 1;
	}
</script>

<div>{msg}</div>
<button on:click={handleClick}>Click</button>

Innerhalb von Svelte-Templates können Entwickler verschiedene logische Ausdrücke verwenden, die auch aus den Template-Engines anderer Frameworks bekannt sind. Sie können beispielsweise ausdrücken, dass Teile des Templates nur auftauchen, wenn bestimmte Bedingungen im Skript-Teil der Komponente erfüllt sind. Dazu können sie Logikblöcke nutzen, die in geschweifte Klammern geschrieben und die ein "#" einleitet. Folgendes Beispiel zeigt den Begrüßungstext erst nach einem Klick auf den Button an:

<script>
	let isGreetingShown = false;

	function handleClick() {
		isGreetingShown = true;
	}
</script>

{#if isGreetingShown }
 	<p>
		Welcome visitor!
	</p>
{/if}

<button on:click={handleClick}>
	Show greeting
</button>

Der Ausdruck {#if isGreetingShown} fragt ab, ob der Wert der Variable isGreetingShown true ist, also nicht etwa false, undefined oder 0. Nur wenn die Bedingung erfüllt ist, kommt es zur Anzeige des Inhalt des if-Blocks. Änderungen des Werts der Variable isGreetingShown durch die Funktion handleClick erkennt Svelte und aktualisiert die Anzeige.

Svelte-Projekte können Entwickler aus der REPL als ZIP-Datei herunterladen und ausführen. Dazu entpackt man den Inhalt der ZIP-Datei in einen beliebigen Ordner und navigiert mit einer Konsole in diesen Pfad. Eine bestehende Installation von Node.js ist Voraussetzung. Auf der Konsole müssen Entwickler dann folgende Befehle ausführen:

npm install
npm run dev

Danach startet ein vorkonfigurierter Webserver und Anwender können die Applikation über die angezeigte URL aufrufen. Zur Konfiguration gehört ein Live-Reload-Plug-in, das den Browser die Seite automatisch aktualisieren lässt, wenn es Änderungen an der Source gibt.

Wenn man die Datei "package.json" öffnet, kann man erkennen, dass Svelte-Projekte mit dem Modul-Packer "rollup" vorkonfiguriert sind. Svelte bietet jedoch auch Konfigurationen anderer Modul-Packer wie webpack an. Die Arbeitsschritte, um ein Svelte-Projekt aus der REPL auf einem lokalen System zu installieren, erinnern an die Build-Tools anderer Frameworks wie create-react-app. Schön ist, dass bereits alle Dateien enthalten sind, die in der REPL erstellt wurden.

Bewertung von Svelte

Svelte ist erstmals im November 2016 erschienen. Die Entwickler haben es 2018 mit Version 2 nochmals stark überarbeitet. Damit ist Svelte eine vergleichsweise neue Technik, was Vorteile und Nachteile bedeuten kann. Auf der einen Seite konnten viele Best Practices sowie Erfahrungen mit anderen Frameworks in die Entwicklung von Svelte einfließen und es scheint fast, als könnte Svelte das Beste vieler Frameworks vereinen. Sveltes <script>-Bereiche mit reaktiven Variablen erinnern an Render-Functions mit Hooks aus der React-Welt; die Komponentenstruktur an Vue und Angular; CSS mit Komponenten-Scope an Vue und Angular; Slots mit DOM-API an Portals aus der React-Welt. Svelte ist zeitgemäß und bietet viele Features, die momentan in der JavaScript-Welt im Trend liegen. Mit der Idee, Svelte-Komponenten in reine JavaScript-Komponenten zu übersetzen, die keine zusätzlichen Module zur Ausführung benötigen, verspricht Svelte zusätzlich, schlanke Ergebnisse mit einer guten Laufzeit zu liefern.

Auf der anderen Seite haben bekannte Frameworks aufgrund der längeren Lebenszeit deutliche Vorteile: Das Ökosystem von Angular, React und Vue ist gefüllt mit frei verfügbaren Librarys, Komponenten und Mobile-Frameworks wie Ionic und React Native. Insgesamt findet man für Svelte im Internet bei Problemen viel weniger Lösungen als mit anderen etablierten Frameworks. Das Svelte-Team hat das erkannt und plant, das Ökosystem rund um Svelte zu fördern und mit eigenen Entwicklungen zu bereichern.

Im Bereich Tooling bietet Svelte keinen Vorteil im Vergleich zu anderen Frameworks, denn mit Svelte müssen Entwickler einen Modul-Packer mit korrekter Installation und Konfiguration verwenden. Ähnlich wie bei anderen Frameworks gibt es vorkonfigurierte Projekt-Templates, die Entwickler beispielsweise aus der REPL herunterladen und verwenden können. Die Konfiguration ist aber komplexer, wenn Anwender von der Standardkonfiguration abweichen wollen. Das NPM-Modul "svelte-preprocess" bietet Hilfe bei vielen weiteren Konfigurationsvarianten wie der Verwendung von CSS-Präprozessoren. Erfahrene JavaScript-Entwickler sind an die Verwendung solcher Tools gewöhnt, für Anfänger können sie eine Hürde darstellen.

Ausblick

Svelte bietet eine zeitgemäße Architektur mit vielen Features und ist damit für Entwickler interessant, die über den Tellerrand der großen Frameworks blicken und andere elegante Varianten ausprobieren wollen. Svelte-Applikationen haben eine vergleichsweise kleine Dateigröße. Deshalb könnte Svelte eine gute Alternative für Entwickler sein, die auf die Verwendung eines Frameworks verzichten (oder Probleme damit haben), um die Dateigröße der Applikation möglichst gering zu halten. Neben Svelte gibt es aber auch andere Frameworks wie Preact, die mit geringer Dateigröße punkten wollen. Der Vorteil ist daher kein Alleinstellungsmerkmal (bei näherem Interesse zu Benchmarks verschiedener Frameworks ist der vergleichende Test von freecodecamps.org empfehlenswert.

Der Einsatz von Svelte kommt aber auch mit einem Preis, weil kein Ökosystem zur Verfügung steht, das mit einem der größeren Frameworks vergleichbar wäre. Es gibt weniger Beispiele, Erklärungen, Tutorials, vorgefertigte Bibliotheken und Tools aller Art. Für Entwickler, die schon ein Framework nutzen und beherrschen, stellt sich die Frage, ob sich der Umstieg auf Svelte lohnt. Neben der Frage nach dem eigenen Geschmack und persönlichen Prioritäten sollte man dabei beachten, dass Svelte zwar eine innovative Alternative zu den großen Frameworks darstellt, aber nicht einfach an ihnen vorbei zieht.

Wenn die Dateigröße der Applikationen bei der Entscheidungsfindung keine wichtige Rolle spielt, bietet Svelte bis jetzt keine eindeutigen Vorteile gegenüber den großen Frameworks, die klar für einen Umstieg sprechen. Darüber hinaus zeigt Svelte, dass der konzeptionelle Ansatz der Verwendung eines Compilers statt eines klassischen Frameworks vielversprechend ist und noch mehr Potenzial haben kann. Es bleibt abzuwarten, ob aus der Compiler-Architektur von Svelte in Zukunft weitere Vorteile gegenüber anderen Frameworks entstehen. Es könnte sein, dass Svelte damit einen innovativen Beitrag zur Zukunft der Frontend-Welt leistet.

David Bardiau
ist Software Engineer und Trainer für JavaScript und CSS. Er engagiert sich als Organisator und Speaker für Meetups und schreibt Artikel rund um die Webentwicklung. (bbo)