Svelte (vytvořil Rich Harris v roce 2016) není jen knihovna, ale především kompilátor. Namísto používání technik jako Virtuální DOM k zjišťování změn, Svelte při sestavení aplikace (buildu) vygeneruje čistý a vysoce optimalizovaný JavaScript, který přímo manipuluje s webovou stránkou.

React a Vue musí v prohlížeči neustále porovnávat dvě verze stránky (virtuální a skutečnou), aby věděly, co změnit. Svelte ví přesně, co se má změnit, už ve chvíli, kdy píšete kód. Výsledkem je mnohem vyšší výkon a menší velikost výsledného souboru.

V mnoha frameworkách musíte používat speciální funkce (jako useState v Reactu), abyste dali systému vědět, že se data změnila. Ve Svelte stačí obyčejné přiřazení hodnoty do proměnné:

let pocet = 0;
pocet += 1; // Svelte automaticky pozná, že má překreslit HTML

Svelte je navrženo tak, aby programátor psal co nejméně „balastu“. Stejná aplikace v Reactu může mít o 30–40 % více řádků kódu než ve Svelte.

[Image comparison of code volume for the same task in React, Vue and Svelte]

• Single-File Components: Podobně jako u Vue SFC, i Svelte kombinuje HTML, CSS a JS do jednoho souboru .svelte.
• Vestavěné animace: Svelte má v sobě integrovaný výkonný engine pro animace a přechody prvků, které jsou plynulé a snadno použitelné.
• Globální správa stavu: Obsahuje tzv. Stores, což je velmi jednoduchý a efektivní způsob, jak sdílet data mezi mnoha komponentami bez nutnosti složitých knihoven typu Redux.

Vzhledem k tomu, že Svelte do prohlížeče neposílá žádný „runtime“ (samotný framework), jsou aplikace:

1. **Menší:** Rychleji se stahují (ideální pro pomalý mobilní internet).
2. **Rychlejší:** Procesor uživatele nemusí neustále vypočítávat rozdíly v DOMu.

<script>
  let jmeno = "Svelte";
</script>

<style>
  h1 { color: #ff3e00; }
</style>

<h1>Ahoj, {jmeno}!</h1>
<input bind:value={jmeno}>

Pro vývoj velkých aplikací existuje SvelteKit – oficiální framework postavený nad Svelte (podobně jako Next.js nad Reactem). SvelteKit využívá nástroj Vite a umožňuje techniky jako Server-Side Rendering (SSR) nebo generování statických stránek.

Zajímavost: Svelte v angličtině znamená „štíhlý“ nebo „elegantní“. To přesně vystihuje jeho filozofii – odstranit veškerý zbytečný kód (framework overhead) a nechat jen to, co uživatel skutečně potřebuje.

Zpět na Architekturu