Top-Fragen
Zeitleiste
Chat
Kontext
Svelte (Framework)
freie JavaScript-Softwarebibliothek Aus Wikipedia, der freien Enzyklopädie
Remove ads
Svelte ist eine freie JavaScript-Softwarebibliothek[5], die ein Grundgerüst für die Ausgabe von User-Interface-Komponenten von Webseiten zur Verfügung stellt (Webframework).[6][7] Mit Svelte lassen sich reaktive Single-Page-Webanwendungen erstellen.
Remove ads
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.[7]
Remove ads
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[8] und 2020 von State of JS zum Frontend-Framework mit den zufriedensten Entwicklern[9] 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.[10][11]
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.[12]
Remove ads
Aufbau einer Anwendung
Zusammenfassung
Kontext
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.[13]
<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.[14] Diese starten mit $ und sehen Funktionen ähnlich, beinhalten jedoch Informationen für den Compiler.[15] 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.[16] Die $derived-Rune deklariert eine Variable, deren Wert (Zustand) sich von einer anderen Variable ableitet.[17] 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.[18][19] 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
Wikiwand - on
Seamless Wikipedia browsing. On steroids.
Remove ads