Svelte ist eine freie JavaScript-Softwarebibliothek[6], die ein Grundgerüst für die Ausgabe von User-Interface-Komponenten von Webseiten zur Verfügung stellt (Webframework).[7][8] 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.[8]
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[9] und 2020 von State of JS zum Frontend-Framework mit den zufriedensten Entwicklern[10] 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.[11][12]
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.[13]
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.[14]
<script>
let name = 'Welt';
</script>
<h1>Hallo {name}!</h1>
<style>
h1 {
color: blue;
}
</style>
Reaktivität
Reaktive Variablen und Abfragen werden seit Svelte 5 mit sogenannten „Runen“ gekennzeichnet.[15] Diese starten mit $ und sehen Funktionen ähnlich, beinhalten jedoch Informationen für den Compiler.[16] Im folgenden Beispiel wird die Variable count mithilfe der $state-Rune deklariert. Das bedeutet, dass die UI immer darauf reagiert, wenn sich der Wert (Zustand) von count verändert.[17] Die $derived-Rune deklariert eine Variable, deren Wert (Zustand) sich von einer anderen Variable ableitet.[18] Im Beispiel wird der Wert der Variable doubled immer aktualisiert, sobald sich der Wert von count verändert. Um auf DOM-Events zu reagieren, nutzt Svelte HTML-Event‑Handler.[19][20] Im Beispiel wird onclick genutzt, um auf das Click-Event zu reagieren.
<script>
let count = $state(0);
let doubled = $derived(count * 2);
</script>
<button onclick={() => count++}>
Anzahl der Klicks: {count}
</button>
<p>{count} * 2 = {doubled}</p>
Siehe auch
Weblinks
- Offizielle Webpräsenz (englisch)
- Svelte auf GitHub
- Offizielles Tutorial (englisch)
Einzelnachweise
- ↑ a b c d e f g github.com. In: GitHub.
- ↑ svelte.dev.
- ↑ svelte@5.38.3 - Github. 23. August 2025.
- ↑ github.com. 6. Juli 2025.
- ↑ github.com. 9. Mai 2023 (abgerufen am 6. November 2025).
- ↑ A JavaScript library for building user interfaces - React. Abgerufen am 13. April 2017.
- ↑ Rich Harris: Svelte 3: Rethinking reactivity. Svelte Blog, 22. April 2019, abgerufen am 13. Juni 2021 (englisch).
- ↑ a b David Bardiau: Wieso Svelte? Ein Einstieg in das JavaScript-Framework. Heise Online, 20. März 2020, abgerufen am 13. Juni 2021 (englisch).
- ↑ Stack Overflow Developer Survey 2021. In: Stack Overflow. Abgerufen am 26. Oktober 2021 (englisch).
- ↑ State of JS 2020: Front-end Frameworks. In: 2020.stateofjs.com. Abgerufen am 26. Oktober 2021 (englisch).
- ↑ Websites using Svelte - Wappalyzer. In: www.wappalyzer.com. Abgerufen am 3. August 2021.
- ↑ Your Profile, Your Home Experience. In: yourhome.fb.com. Abgerufen am 1. Dezember 2021 (englisch).
- ↑ Svelte Society. In: sveltesociety.dev. Abgerufen am 3. August 2021 (englisch).
- ↑ Basics. Svelte, abgerufen am 13. Juni 2021 (englisch).
- ↑ The Svelte team: Svelte 5 is alive. 22. Oktober 2024, abgerufen am 1. Mai 2025 (englisch).
- ↑ What are runes? • Docs • Svelte. Abgerufen am 1. Mai 2025 (englisch).
- ↑ $state • Docs • Svelte. Abgerufen am 1. Mai 2025 (englisch).
- ↑ $derived • Docs • Svelte. Abgerufen am 1. Mai 2025 (englisch).
- ↑ svelte/events • Docs • Svelte. Abgerufen am 1. Mai 2025 (englisch).
- ↑ DOM events • Svelte Tutorial. Abgerufen am 2. Mai 2025 (englisch).
