Svelte Tutorial — Compile-Time Framework

Svelte kompiliert Komponenten zu Vanilla-JavaScript — kein Virtual DOM, minimale Bundle-Groesse, intuitive Syntax. Im Gegensatz zu React und Vue, die ein Runtime-Framework an den Browser senden, verlagert Svelte die Arbeit in den Build-Schritt. Das Ergebnis ist ein kleineres Bundle, schnelleres Rendering und einfacherer Code. Reaktivitaet ist unkompliziert — eine Zuweisung an eine Variable aktualisiert automatisch das DOM.

Grundlegende Komponente¶

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Clicked {count} times
</button>

Svelte 5 fuehrt Runes ein — ein neues Reaktivitaetssystem mit explizitem $state(), $derived() und $effect(). Im Vergleich zur frueheren impliziten $:-Syntax sind Runes uebersichtlicher und arbeiten besser mit TypeScript. Komponenten sind einfache .svelte-Dateien, die HTML, CSS und JavaScript mit automatischem Style-Scoping kombinieren.

SvelteKit¶

// src/routes/+page.server.ts -- Server Load
export async function load({ fetch }) {
  const posts = await fetch('/api/posts').then(r => r.json());
  return { posts };
}

<!-- src/routes/+page.svelte -->
{#each data.posts as post}
  <h2>{post.title}</h2>
{/each}

SvelteKit ist das Fullstack-Framework fuer Svelte — Server-Side Rendering, API-Routes, dateibasiertes Routing und Deployment an die Edge (Cloudflare Workers, Vercel Edge). Load-Funktionen laufen auf dem Server und uebergeben Daten an Komponenten. Form Actions ermoeglichen progressive Verbesserung von Formularen ohne clientseitiges JavaScript.

Warum Svelte¶

Hauptvorteile gegenueber React/Vue: kleinere Bundle-Groesse (kein Runtime), schnellere DOM-Operationen (direkte Manipulation ohne Diffing), einfacheres State Management (Stores statt Redux/Pinia) und weniger Boilerplate-Code. Svelte hat ein wachsendes Oekosystem und eine starke Community, wenn auch kleiner als React.

Wichtigste Erkenntnis¶

Svelte 5 mit Runes bringt einfachere Reaktivitaet. SvelteKit fuer Fullstack-Anwendungen. Minimale Bundle-Groesse und ausgezeichnete Developer Experience machen Svelte zu einem starken Kandidaten fuer neue Projekte.