Seite 2: 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.