Svelte tutorial — compile-time framework

Svelte kompiluje komponenty do vanilla JavaScript — žádný Virtual DOM, minimální bundle size, intuitivní syntax. Na rozdíl od Reactu a Vue, které posílají runtime framework do prohlížeče, Svelte přesouvá práci do build stepu. Výsledkem je menší bundle, rychlejší rendering a jednodušší kód. Reaktivita je přímočará — přiřazení do proměnné automaticky aktualizuje DOM.

Základní komponenta¶

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

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

Svelte 5 zavádí runes — nový systém reaktivity s explicitním $state(), $derived() a $effect(). Oproti dřívějšímu implicitnímu $: syntaxu jsou runes přehlednější a lépe se s nimi pracuje v TypeScriptu. Komponenty jsou jednoduché .svelte soubory kombinující HTML, CSS a JavaScript s automatickým scopingem stylů.

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 je fullstack framework pro Svelte — server-side rendering, API routes, file-based routing a deployment na edge (Cloudflare Workers, Vercel Edge). Load funkce běží na serveru a předávají data komponentám. Form actions umožňují progresivní vylepšení formulářů bez JavaScriptu na klientovi.

Proč Svelte¶

Hlavní výhody oproti React/Vue: menší bundle size (žádný runtime), rychlejší DOM operace (přímá manipulace bez diffingu), jednodušší state management (stores místo Redux/Pinia) a méně boilerplate kódu. Svelte má rostoucí ekosystém a silnou komunitu, byť menší než React.

Klíčový takeaway¶

Svelte 5 s runes přináší jednodušší reaktivitu. SvelteKit pro fullstack aplikace. Minimální bundle size a výborný developer experience dělají ze Svelte silného kandidáta pro nové projekty.