React langweilig? Svelte 5: halb so viel Code, doppelte Performance (mit vollständigem Tutorial)

Warum ich wieder ein neues Framework lerne

Als ich die Svelte-Dokumentation öffnete, war mein erster Impuls: Nein. Alle paar Jahre kommt ein Framework und sagt „diesmal ist es anders“ – oft nur neues Label, gleiche Idee. Das React-Projekt läuft, warum umsatteln?

Das erste Codebeispiel hat mich stutzig gemacht. Counter-Komponente: In React brauchen Sie useState, setCount und dürfen den State nicht direkt mutieren. In Svelte? let count = $state(0), dann count++. Fertig.

Dieses „Weniger ist mehr“ hat mich drei Stunden Tutorial-Kette ausgelöst – nicht wegen Komplexität, sondern wegen Einfachheit. Wenn Sie unter „Framework-Müdigkeit“ leiden: Dieser Artikel erklärt Svelte 5 und die Denkweise der Compile-Time-Optimierung – sie hat mein Verständnis von Frontend-Frameworks verändert.

Was ist Svelte? Die Essenz eines Compile-Time-Frameworks

Zuerst eine Alltagsmetapher für Compile-Time vs. Runtime:

React ist wie Lieferservice: Jede Lieferung bringt Besteck, Servietten, Verpackung, Plastiktüte. Virtual DOM und Reconciliation müssen zur Laufzeit mit – ob Sie sie brauchen oder nicht. Ergebnis: 42 KB React-Basis, selbst für „Hello World“.

Svelte ist wie selbst kochen: Zutaten vorbereiten (Code schreiben), in der Pfanne braten (kompilieren), auf den Tisch kommt reines Gericht (natives JS) – ohne Ballast. Finales Bundle oft nur 1,6 KB.

Klingt übertrieben – in meinen Messungen stimmt es. Dieselbe Todo-App in React und Svelte:

Noch greifbarer: First Load unter 3G (viele Nutzer sind noch auf 3G):

300 ms klingen wenig – für Shop-Startseiten oder News kann das 5–10 % mehr Absprünge bedeuten.

Was bringt Svelte 5 gegenüber Svelte 4? Kernstück: Runes – neue reaktive API. Bundle noch 15–30 % kleiner, Code lesbarer.

Aber: React-Projekt nicht sofort umschreiben. Svelte ersetzt React nicht – unterschiedliche Philosophien. React: „Ökosystem und Flexibilität für alles“. Svelte: „Performance und Klarheit für den Fokus“. Wahl hängt vom Szenario ab.

Alibaba Cloud - Top-Wahl für Entwickler, exklusiv 15 % Rabatt auf Lighthouse-Server

15 % Rabatt sichern →Anzeige

Runes im Detail: die Magie des Compilers

Das Herzstück von Svelte 5 sind Runes – der Name klingt etwas nerdig, in der Praxis fühlt es sich sehr gut an.

$state: endlich ohne Setter

React:

// React: immer Setter im Kopf behalten
const [count, setCount] = useState(0)
function increment() {
  setCount(count + 1) // Closure-Fallen beachten
}

Svelte 5:

// Svelte 5: wie natives JS
let count = $state(0)
function increment() {
  count++ // Compiler übernimmt Reaktivität
}

Beim ersten $state suchte ich nach dem Setter – den gibt es nicht. Der Compiler analysiert den Code und fügt Dependency-Tracking und Updates ein.

In Projekten 30–40 % weniger Code – besonders bei Formularen ohne lange handleXXXChange-Ketten.

$derived: automatisches Dependency-Tracking

useMemo und vergessene oder überladene Dependency-Arrays kennen Sie vermutlich.

Svelte $derived kümmert sich darum:

// React: Dependency-Arrays manuell
const doubled = useMemo(() => count * 2, [count])
const quadrupled = useMemo(() => doubled * 2, [doubled])
// Svelte 5: Compiler trackt automatisch
let doubled = $derived(count * 2)
let quadrupled = $derived(doubled * 2)

Bei einem Angebotssystem mit vielen Eingabefeldern: React – zwei Zeilen Dependencies, ständig Angst vor vergessenen Feldern. Svelte – Compiler erledigt das.

Kurz: Sie schreiben Logik, Reaktivität macht der Compiler.

$effect: Nebenwirkungen ohne Hook-Chaos

useEffect gehört zu den schwierigsten React-Hooks – Dependencies, Cleanup, Timing.

Svelte $effect:

// React: cleanup per return
useEffect(() => {
  const subscription = someAPI.subscribe()
  return () => {
    subscription.unsubscribe()
  }
}, [/* Dependencies */])
// Svelte 5: automatisches Cleanup
$effect(() => {
  const subscription = someAPI.subscribe()
  // Beim Unmount räumt der Compiler auf
})

Für API-Polling, WebSocket, Local Storage – weniger Sorge vor Memory Leaks.

$props: typsichere Komponenten-Props

// React
function TodoItem({ todo, onToggle }) {
  // PropTypes oder TypeScript manuell
}
// Svelte 5: Destrukturierung
<script>
  let { todo, onToggle } = $props()
  // TypeScript eingebaut
</script>

Wenig spektakulär, aber angenehm im Alltag – offizielle TypeScript-Unterstützung ohne Extra-Setup.

Svelte vs. React/Vue: keine Religionskriege, sondern Wahl

Sollten Sie wechseln? Framework ist Werkzeug – elegantes jQuery schlägt chaotisches React.

Lernkurve

Svelte: HTML + CSS + JS, Web-Standard. Ein Absolvent nach zwei Tagen Tutorial schrieb selbstständig Komponenten.

Railway - Moderne Deployment-Plattform, ohne DevOps-Aufwand, in Minuten live

Jetzt starten →Anzeige

React: JSX, Hooks, Immutability, Reconciliation – oft 1–2 Wochen bis echtes Verständnis.

Vue: dazwischen; Templates intuitiver, eigene Konzepte (Direktiven, computed, watch).

Performance

Ehrlich: Bei kleinen Apps merkt man kaum einen Unterschied.

Deutlich wird es hier:

1. Große Listen: Produktkataloge, Chat – 10.000 Einträge: Svelte ~58 FPS, React ~45 FPS.
2. Häufige Updates: Live-Dashboards, Kurse – direkte Updates schlagen Virtual-DOM-Diff.
3. Mobiles schwaches Netz: kleines Bundle zählt.

Daten aus JS-Framework-Benchmarks 2025 – in Ihrem Projekt selbst messen.

Ökosystem: ausgereift vs. schlank

Svelte ist kleiner als React – klar gesagt.

• npm/Woche: Svelte ~500.000 vs. React ~20 Mio.
• Stack Overflow: Svelte ~12.000 vs. React ~500.000
• UI-Bibliotheken: React Hunderte, Svelte Dutzende

Trotzdem: aktive Community, Rich Harris antwortet mitunter auf Discord. Toolchain modern: Vite, SvelteKit, TypeScript – kein Webpack-Loader-Dschungel.

Wann Svelte?

Team tief in React – ohne Performance-Schmerz nicht wechseln. Neues Projekt, kleines Team, Neugier: Svelte lohnt sich.

30-Minuten-Praxis: Todo-App mit Svelte 5

Genug Theorie – wir bauen eine Todo-App und spüren Runes.

Projektstruktur

svelte-todo/
├── src/
│   ├── lib/
│   │   └── TodoItem.svelte  // Einzelne Todo-Komponente
│   ├── App.svelte           // Haupt-App
│   └── main.js              // Einstieg
└── package.json

Kern: App.svelte

<script>
  // Runes: knapp und mächtig
  let todos = $state([])
  let input = $state('')
  // $derived trackt todos automatisch
  let remaining = $derived(
    todos.filter(t => !t.done).length
  )
  function addTodo() {
    if (input.trim()) {
      todos.push({
        id: Date.now(),
        text: input,
        done: false
      })
      input = ''
    }
  }
  function toggleTodo(id) {
    const todo = todos.find(t => t.id === id)
    if (todo) {
      todo.done = !todo.done
    }
  }
  function deleteTodo(id) {
    todos = todos.filter(t => t.id !== id)
  }
</script>
<div class="app">
  <h1>Meine Aufgaben</h1>
  <div class="input-area">
    <input
      bind:value={input}
      placeholder="Neue Aufgabe hinzufügen..."
      onkeydown={(e) => e.key === 'Enter' && addTodo()}
    />
    <button onclick={addTodo}>Hinzufügen</button>
  </div>
  <p class="stats">
    Noch {remaining} Aufgaben offen
  </p>
  <ul class="todo-list">
    {#each todos as todo}
      <TodoItem
        {todo}
        onToggle={() => toggleTodo(todo.id)}
        onDelete={() => deleteTodo(todo.id)}
      />
    {/each}
  </ul>
</div>
<style>
  .app {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  .input-area {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  button {
    padding: 10px 20px;
    background: #0066cc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .stats {
    color: #666;
    margin-bottom: 10px;
  }
  .todo-list {
    list-style: none;
    padding: 0;
  }
</style>

Unterkomponente: TodoItem.svelte

<script>
  let { todo, onToggle, onDelete } = $props()
</script>
<li class="todo-item">
  <label>
    <input
      type="checkbox"
      checked={todo.done}
      onchange={onToggle}
    />
    <span class:done={todo.done}>
      {todo.text}
    </span>
  </label>
  <button class="delete-btn" onclick={onDelete}>
    Löschen
  </button>
</li>
<style>
  .todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
  label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }
  .done {
    text-decoration: line-through;
    color: #999;
  }
  .delete-btn {
    padding: 5px 10px;
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
  }
</style>

Starten

npm create vite@latest svelte-todo -- --template svelte
cd svelte-todo
npm install
npm run dev

Unter http://localhost:5173 läuft die Todo-App.

Wichtige Punkte

1. Natürlicher Reaktivitätsfluss: kein setState, kein dispatch.
2. Kein State-Management-Framework nötig für mittlere Projekte.
3. Scoped Styles: CSS pro Komponente.
4. Kleines Build: npm run build – oft ~5 KB.

Fallstrick: In Svelte 4 brauchte todos.push() ein Reassignment – Svelte 5 reicht push. Wichtiger Unterschied zu Svelte 4.

Einfachheit täuscht nicht über Architektur hinweg – aber Sie konzentrieren sich auf Fachlogik statt State-Paradigmen.

Ökosystem, Community und Zukunft

Ökosystem

Trotz kleinerer Community ist vieles da:

• SvelteKit: offizielles Full-Stack-Framework (SSR, SSG, API-Routen).
• Komponentenbibliotheken: Svelte Material UI, Carbon, Skeleton UI.
• Toolchain: Vite, Prettier, ESLint.
• Adoption: Spotify, Square, NYT, Apple intern.

Discord: Core-Team und Rich Harris diskutieren aktiv – das bieten große Frameworks selten.

Vultr - Hochleistungs-NVMe-Cloud-Server mit 32 Standorten weltweit, Docker per Klick

Preise ansehen →Anzeige

Lernressourcen

• Offizielles Tutorial: interaktiv, ~80 % der Konzepte.
• Discord: schnelle, qualitativ gute Antworten.
• GitHub: viele Beispiele im offiziellen Repo.
• Chinesische Ressourcen: auf Juejin/Zhihu – für DE-Leser eher EN-Doku und Tutorial.

Trend

Svelte wird kein Mainstream, bleibt wichtige Option.

Reacts Ökosystem-Moat ist tief – Enterprise wechselt selten. Chancen für Svelte:

1. Performancekritische UIs.
2. Kleine Teams, Start-ups, interne Tools.
3. Bildung – guter Einstieg ins Frontend.

Svelte 5 ist produktionsreif; TypeScript wird stärker.

Svelte boostet den Lebenslauf selten – erweitert aber Ihr Denken. Nach Compile-Time-Ideen schreiben Sie React bewusster performanceorientiert.

Fazit: ein Wochenende investieren

Kernbotschaft: Svelte lohnt ein Wochenende zum Kennenlernen.

Nicht sofort alles umschreiben – stattdessen:

1. 2 Stunden offizielles Tutorial – interaktiv.
2. Kleines Projekt neu in Svelte – Taschenrechner, Wetter, etwas Bekanntes.
3. Nicht sofort im Team pushen – erst selbst prüfen, ob es passt.

Frameworks behaupten „revolutionär“ – wertvoll sind die Ideen dahinter: Compile-Time, klare API, Performance.

Technik dient dem Produkt. React-Probleme löst Svelte oft auch – Wahl: Team, Szenario, Bauchgefühl.

Performance, weniger Boilerplate, Neugier? Öffnen Sie https://svelte.dev/tutorial.

Zwei Stunden – vielleicht finden Sie ein Werkzeug, das wirklich passt.