Svelte (Framework)

Svelte

Basisdaten

EntwicklerRich Harris
Erscheinungsjahr2016
Aktuelle Version4.1.2[1]
(31. Juli 2023)
BetriebssystemPlattformunabhängig
ProgrammierspracheTypeScript
KategorieFramework
LizenzMIT-Lizenz
deutschsprachignein
svelte.dev

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

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.[4]

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[5] und 2020 von State of JS zum Frontend-Framework mit den zufriedensten Entwicklern[6] 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.[7][8]

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.[9]

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.[10]

<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.[11]

<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

Weblinks

Einzelnachweise

  1. ↑ Release 4.1.2. 31. Juli 2023 (abgerufen am 5. August 2023).
  2. ↑ A JavaScript library for building user interfaces - React. Abgerufen am 13. April 2017.
  3. ↑ Rich Harris: Svelte 3: Rethinking reactivity. Svelte Blog, 22. April 2019, abgerufen am 13. Juni 2021 (englisch).
  4. ↑ a b David Bardiau: Wieso Svelte? Ein Einstieg in das JavaScript-Framework. Heise Online, 20. März 2020, abgerufen am 13. Juni 2021 (englisch).
  5. ↑ Stack Overflow Developer Survey 2021. In: Stack Overflow. Abgerufen am 26. Oktober 2021 (englisch).
  6. ↑ State of JS 2020: Front-end Frameworks. In: 2020.stateofjs.com. Abgerufen am 26. Oktober 2021 (englisch).
  7. ↑ Websites using Svelte - Wappalyzer. In: www.wappalyzer.com. Abgerufen am 3. August 2021.Vorlage:Cite web/temporär
  8. ↑ Your Profile, Your Home Experience. In: yourhome.fb.com. Abgerufen am 1. Dezember 2021 (englisch).
  9. ↑ Svelte Society. In: sveltesociety.dev. Abgerufen am 3. August 2021 (englisch).
  10. ↑ Basics. Svelte, abgerufen am 13. Juni 2021 (englisch).
  11. ↑ Reactivity. Svelte Society, abgerufen am 13. Juni 2021 (englisch).

Auf dieser Seite verwendete Medien