Ein neues Framework für das Web

Als das JavaScript-Framework Svelte das Licht der Welt erblickte, wurde es von der Community alsbald als „new kid on the block“ bezeichnet. Der „block“ (wenn man so will) waren die etablierten Frontend-Frameworks, also insbesondere Angular, Vue und React. Und nun also ein weiteres Framework. Lohnt sich denn ein Blick darauf?

Batdelger Davaajav hat sich dieser Frage angenommen und Svelte in ihrer Projektarbeit näher unter die Lupe genommen. Um das Framework auch praktisch zu testen, hat sie eine Beispielanwendung implementiert. Spannend ist zu Beginn vor allem die Frage, wie genau sich die Funktionsweise von Svelte zu anderen Frameworks unterscheidet.

Compiler statt Virtueller DOM

Frontend-Frameworks bringen dem Programmierer viele Vereinfachungen beim Erstellen des Quelltextes, jedoch müssen diese Vereinfachungen an anderer Stelle wieder auf die vom Browser verständlichen Sprachen HTML, CSS und JavaScript abgebildet werden. Bei den meisten bekannten Frameworks passiert dies im Browser selbst während der Nutzung der Anwendung. Das Framework wird dabei üblicherweise in einer zusätzlichen Bibliothek an den Browser ausgeliefert.
Um Zustandsänderungen im JavaScript-Code mit dem DOM zu synchronisieren, behelfen sich einige Frameworks mit einem virtuellen DOM. Das echte DOM wird dabei auf JavaScript-Objekte abgebildet und nur diese werden vom Programmierer manipuliert. Das virtuelle DOM merkt sich dabei, welche Elemente beim nächsten Update im echten DOM aktualisiert werden müssen. Es wird dann nur der Teil aktualisiert, der im virtuellen DOM auch geändert worden ist.

Svelte geht dabei einen anderen Weg. Anstatt während der Laufzeit über ein virtuelles DOM herauszufinden, welche echten DOM-Elemente manipuliert werden müssen, untersucht dies bei Svelte ein Compiler. Der Compiler übersetzt die Syntax von Svelte in reinen JavaScript-Code. Für notwendige DOM-Aktualisierungen wird dann vom Compiler entsprechender Programmcode ergänzt. Bis auf ein paar wenige Zusatzfunktionen muss keine zusätzliche Bibliothek vom Browser ausgeliefert werden. Es entsteht weder beim Starten der Anwendung noch während der Laufzeit ein zusätzlicher Aufwand. [1]

Syntax

Ein Blick in den Code sagt oft mehr als tausend Worte. Und so wollen wir uns eine Beispielkomponente des Frameworks näher ansehen:

<script>
	import Rating from './Rating.svelte';
	import { createEventDispatcher } from 'svelte';
	const dispatch = createEventDispatcher();
	
	let entry = {
		name: "",
		rating: 0
	};

	let addEntry = () => {
		// create new entry
		let newEntry = {
			name: entry.name, 
			rating: entry.rating
		}

		// send to parent component
		dispatch('addentry', newEntry);
		entry.name = "";
		entry.rating = 0;
	};

	let onRating = (event) => {
		entry.rating = event.detail;
		console.log("rated " + event.detail + " stars.");
	};
</script>

<div class="container">
	<input type="text" placeholder="Name of professor" bind:value={entry.name}/>
	<Rating on:rating={onRating} rating={entry.rating}/>
	<button on:click={addEntry}>Add</button>
</div>

<style>
	.container {
		display: grid;
		grid-template-columns: 50% 30% 20%;
		margin-top: 16px;
		margin-bottom: 32px;
	}
</style>

Vue-Enthusiasten fällt sofort die syntaktische Nähe zu „ihren“ Komponenten auf: die Dreiteilung in Logik, Struktur und Gestaltung innerhalb einer Datei sowie die Möglichkeit, zwischen Komponenten mit Events zu kommunizieren. Und so ist in der Dokumentation eben auch die Rede von bewährten Konzepten wie Kindkomponenten, Reaktivität, Props, Events, Bindings oder Slots.

Beispielanwendung und Projektarbeit

Der erstellte Sourcecode ist auf GitHub [2,3] einsehbar. Da eine Beispielapplikation analog zu unserem Tutorial ausgearbeitet wurde, lässt sich ein Codevergleich zu Vue sehr gut durchführen.

Interessierte, die nun mehr über Svelte erfahren möchten, finden die Projektarbeit im Folgenden zum Download.

Was wäre die Welt also ohne Svelte? Auf jedenfall weniger innovativ 😉

[1] R. Harris: „Virtual DOM is pure overhead“, https://svelte.dev/blog/virtual-dom-is-pure-overhead
[2] Beispielanwendung: https://github.com/Bagi5512/svelte-rating-app
[3] Beispielanwendung mit Node.js-Backend https://github.com/Bagi5512/svelte-rating-app-with-backend