Svelte (Framework)

Svelte ist eine freie JavaScript-Softwarebibliothek, die ein Grundgerüst für die Ausgabe von User-Interface-Komponenten von Webseiten zur Verfügung stellt (Webframework). Mit Svelte lassen sich reaktive Single-Page-Webanwendungen erstellen.

Svelte
Basisdaten
Entwickler	Rich Harris
Erscheinungsjahr	26. November 2016
Aktuelle Version	5.0.0 (19. Oktober 2024)
Betriebssystem	Plattformunabhängig
Programmier­sprache	JavaScript, 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 vom Svelte-Compiler in JavaScript-Code übersetzt, der von keinen externen Programmbibliotheken abhängig ist.

Andere Frameworks setzen auf das Konzept des Virtual DOM, das Änderungen im Zustand mithilfe komplexer Algorithmen 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.

Verbreitung

Svelte wird von Entwicklern allgemein gelobt. In mehreren großen Umfragen unter Entwicklern belegte es den ersten Platz und wurde von Stack Overflow 2021 zum beliebtesten Web-Framework und 2020 von State of JS zum Frontend-Framework mit den zufriedensten Entwicklern gewählt.

Svelte wurde von einer Reihe namhafter Web-Unternehmen übernommen, darunter The New York Times, Apple, Spotify, Square, Yahoo, ByteDance, Rakuten, Bloomberg, Reuters, IKEA, Facebook und Brave.

Eine Community-Gruppe Svelte Society veranstaltet die Svelte Summit-Konferenz, schreibt einen Svelte-Newsletter, hostet einen Svelte-Podcast und führt ein Verzeichnis von Svelte-Tools, -Komponenten und -Vorlagen.

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.

<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.

<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

• Angular
• React
• Vue.js

Weblinks

• Offizielle Webpräsenz (englisch)
• Svelte auf GitHub
• Offizielles Tutorial (englisch)