Svelte: das Compiler-basierte JavaScript-Framework

Was ist Svelte?

Svelte ist ein Framework zum Bau von Benutzeroberflächen im Web. Sie schreiben Komponenten in HTML, CSS und JavaScript, und der Svelte-Compiler macht daraus zur Build-Zeit schlankes, optimiertes JavaScript. Statt einer Laufzeit, die ein virtuelles DOM vergleicht, erzeugt Svelte gezielten Update-Code. SvelteKit ist das passende Framework für komplette Anwendungen.

So funktioniert Svelte

Eine .svelte-Datei enthält Markup, auf die Komponente begrenzte Styles und ein Skript. Beim Build analysiert der Compiler sie und erzeugt Code, der genau die Teile der Seite aktualisiert, die vom geänderten Zustand abhängen. Svelte-Erfinder Rich Harris beschrieb es so: Svelte ist ein Compiler, der zur Build-Zeit weiß, wie sich Dinge in Ihrer App ändern können. Gebaut wird in der Praxis mit Vite, direkt oder über SvelteKit.

Runes in Svelte 5

Svelte 5 führte Runes ein: Symbole mit $-Präfix, die den Compiler steuern und keinen Import brauchen. $state deklariert reaktiven Zustand, $derived berechnet einen Wert aus anderem Zustand, und $effect führt Seiteneffekte aus, etwa nach dem DOM-Update. Svelte 5 unterstützt weiterhin die Syntax von Svelte 4, alte und neue Komponenten lassen sich mischen, die Migration kann also schrittweise erfolgen.

<script>
  let count = $state(0);
  let double = $derived(count * 2);
</script>

<button onclick={() => count++}>
  {count} x 2 = {double}
</button>

Der Compiler schreibt jeden Zugriff auf count in eine Signal-Operation um, Sie lesen und schreiben die Variable also ganz normal, ohne .value.

Häufige Fehler

• Alte und neue Reaktivität mischen. $:-Anweisungen und Runes verhalten sich verschieden. Eine Komponente im Runes-Modus folgt den neuen Regeln, zum Beispiel sind Props nur mit $bindable bindbar.
• Zu oft $effect nutzen. Lässt sich ein Wert aus anderem Zustand berechnen, nehmen Sie $derived. Laut Migrationsleitfaden ist das meistens richtig.
• Reaktive Klasseninstanzen erwarten. $state macht einfache Objekte und Arrays zu Proxys, keine Klasseninstanzen. Setzen Sie $state auf die Klassenfelder.
• Svelte mit SvelteKit verwechseln. Svelte rendert Komponenten. Routing, Server-Rendering und Datenladen kommen von SvelteKit.

Svelte-Apps testen und überwachen

Die Svelte-Dokumentation empfiehlt bei Vite Vitest für Unit- und Komponententests, dazu Testing Library für Komponenten, und Playwright für End-to-End-Tests, die Svelte nicht kennen und über das DOM arbeiten. Wird eine Svelte-Seite serverseitig gerendert und dann hydriert, prüfen Sie den echten Ablauf auch im Browser. Eine Einführung bietet Was ist Playwright. Vor dem Launch zeigt LoadFocus Load Testing, wie sich Server und APIs unter Last verhalten. Im Betrieb prüft LoadFocus API-Monitoring Endpunkte nach Zeitplan und führt in bezahlten Tarifen Playwright-Browser-Checks aus. Ansätze im Vergleich: Synthetic Monitoring vs. Real User Monitoring.

Häufige Fragen

Nutzt Svelte ein virtuelles DOM?

Nein. Svelte-Erfinder Rich Harris beschreibt es als Compiler, der zur Build-Zeit weiß, wie sich Dinge ändern können, und deshalb gezielten DOM-Update-Code erzeugt, statt zur Laufzeit zwei virtuelle Bäume zu vergleichen.

Was sind Svelte-Runes?

Runes sind Symbole mit $-Präfix wie $state, $derived und $effect, die den Compiler steuern. Sie kamen mit Svelte 5.

Ist Svelte dasselbe wie SvelteKit?

Nein. Svelte ist das Komponenten-Framework. SvelteKit ist das Anwendungs-Framework für Routing, Server-Rendering und Full-Stack-Apps.

Kann ich die Svelte-4-Syntax weiter nutzen?

Ja. Laut Migrationsleitfaden unterstützt Svelte 5 die alte Syntax weiterhin und erlaubt das Mischen mit Runes.

Wie teste ich eine Svelte-App Ende zu Ende?

Mit einem Browser-Werkzeug wie Playwright. Es steuert das echte DOM und funktioniert für Svelte wie für jedes andere Framework.