Svelte (Framework)

Svelte ist ein Open-Source-Webframework, das es erlaubt, mithilfe deklarativer Komponenten, reaktive Single-Page-Webanwendungen zu erstellen. Anders als andere clientseitige Webframeworks fungiert Svelte als Compiler, der den Quellcode in imperativen Java Script Code umwandelt. Somit verzichtet das Framework auf das Konzept des Virtual DOM und weist eine hohe Effizienz zur Laufzeit auf.[2]

Svelte
Basisdaten
Entwickler Rich Harris
Erscheinungsjahr 2016
Aktuelle Version 3.46.4[1]
(3. Februar 2022)
Programmiersprache TypeScript
Kategorie Framework
Lizenz MIT-Lizenz
deutschsprachig nein
svelte.dev

Konzept und Besonderheiten

Im Gegensatz zu Frameworks wie React oder Vue.js greifen Svelte-Applikationen zur Laufzeit auf keine frameworkspezifischen Module zurück. Der Code wird zur Übersetzungszeit in reinen JavaScript-Code übersetzt, der von keinen externen Programmbibliotheken abhängig ist. Andere Frameworks setzen auf das Konzept des Virtual DOM, das mithilfe komplexer Algorithmen Änderungen im Zustand erkennt und den Anwendungsbaum selektiv aktualisiert. Diese rechenaufwändigen Operationen werden umgangen, indem der von Svelte zur Verfügung gestellte Compiler automatisch Hilfsfunktionen zum manuellen Manipulieren des DOM generiert.[3]

Aufbau einer Anwendung

Grundstruktur

Jede Svelte-Applikation besteht aus einer oder mehreren Komponenten, die in Dateien mit der Endung .svelte definiert werden. Der Aufbau einer Komponente funktioniert ähnlich wie bei .html Dateien. Um Javascript-Elemente in das DOM einzubinden, werden geschweifte Klammern verwendet.[4]

<script>
	let name = 'Welt';
</script>

<h1>Hallo {name}!</h1>

<style>
	h1 {
		color: blue;
	}
</style>

Reaktivität

Reaktive Variablen und Abfragen werden mit $: gekennzeichnet. Im folgenden Beispiel wird die Variable doubled immer aktualisiert, wenn sich der Wert von count verändert. Mit dem HTML-Attribut on: können Event Handler auf verschiedene DOM Events gesetzt werden.[5]

<script>
	let count = 1;

	$: doubled = count * 2;

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

<button on:click={handleClick}>
	Anzahl der Klicks: {count}
</button>

<p>{count} * 2 = {doubled}</p>

Siehe auch

Einzelnachweise
  1. github.com.
  2. Rich Harris: Svelte 3: Rethinking reactivity. Svelte Blog, 22. April 2019, abgerufen am 13. Juni 2021 (englisch).
  3. David Bardiau: Wieso Svelte? Ein Einstieg in das JavaScript-Framework. Heise Online, 20. März 2020, abgerufen am 13. Juni 2021 (englisch).
  4. Basics. Svelte, abgerufen am 13. Juni 2021 (englisch).
  5. Reactivity. Svelte Society, abgerufen am 13. Juni 2021 (englisch).
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. The authors of the article are listed here. Additional terms may apply for the media files, click on images to show image meta data.