Svelte 5: Přístup řízený kompilátorem a mentální model
Představte si framework JavaScript, který v době sestavení úplně zmizí. Žádné knihovny ke stažení, ne virtuální DOM, který se má sladit za běhu, v inspektoru prohlížeče není vidět žádná režie rámce. Toto a Svelte: ne rámec v tradičním smyslu, ale a kompilátor, který transformuje .svelte komponenty v čistém a optimalizovaném JavaScriptu. Svelte 5, vydaný v říjnu 2024, přináší tento model do a o úroveň výš s Runes, univerzálním systémem reaktivity založeným na signálech, který způsobil revoluci ve světě kde spravujete stav v aplikacích.
Pokud přicházíte z React, Vue nebo Angular, Svelteho mentální model vyžaduje změnu perspektivy. O to nejde naučit se nové API, ale pochopit, že samotný framework za běhu neexistuje. Tato příručka vám pomůže vytvořit tento mentální model a prozkoumat, jak interně funguje kompilátor Svelte a proč Runes představují přirozený vývoj tohoto přístupu.
Co se naučíte
- Jak kompilátor Svelte transformuje komponenty na čistý JavaScript
- Protože Svelte nepotřebuje virtuální DOM
- Správný mentální model pro práci se Svelte 5
- Úvod do run a reaktivity založené na signálu
- Srovnání výkonu s React a Vue (údaje za období 2025–2026)
- Jak vytvořit první komponentu Svelte 5 s runami
Problém s virtuálními DOM
Abyste pochopili, proč Svelte existuje, musíte nejprve pochopit, co řeší. React, Vue a Angular všechny používají a virtuální DOM: Reprezentace skutečného DOM v paměti, kterou framework používá k výpočtu rozdíly (diffing) a aplikovat pouze nezbytné změny. Tento přístup dává intuitivní smysl – a Je efektivnější aktualizovat reprezentaci v paměti než přímo manipulovat s DOM – ale stojí to skryté: virtuální odsouhlasení DOM proběhne vždy, i když se nic nezměnilo.
Rich Harris, tvůrce Svelte, vymyslel termín „virtuální DOM je čistá režie"v článek z roku 2019, který v komunitě vyvolal živou debatu. Nejde o to, že virtuální DOM je celkově pomalý, ale přináší zbytečnou práci, kterou by kompilátor mohl odstranit.
Zvažte komponentu React, která zobrazuje počítadlo:
// React: il virtual DOM riconcilia ad ogni render
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Contatore: {count}</p>
<button onClick={() => setCount(count + 1)}>
Incrementa
</button>
</div>
);
}Pokaždé, když se stav změní, React musí: Vytvořit nový virtuální DOM pro komponentu, porovnat jej s předchozí (diffing), určit, co se změnilo, a nakonec aktualizovat skutečný DOM. Kompilátor Svelte již v době sestavování ví, co se může změnit – pouze text odstavce – a přímo to generuje kódu pro jeho aktualizaci bez jakéhokoli mezikroku.
Jak funguje kompilátor Svelte
Štíhlý komponent a a .svelte který obsahuje tři volitelné části: skript, šablonu a
styly. Během sestavování kompilátor analyzuje tento soubor a generuje JavaScript, který přímo manipuluje s
DOM, s granulárními a chirurgickými aktualizacemi.
<!-- Counter.svelte - Il componente sorgente -->
<script>
let count = $state(0);
</script>
<p>Contatore: {count}</p>
<button onclick={() => count++}>
Incrementa
</button>
Kompilátor analyzuje šablonu a rozumí tomu {count} a jediná část, která se mění.
Vygenerovaný JavaScript přímo obsahuje: Vytvořte uzel <p>, vložte textový uzel,
a zaregistrujte efekt, který aktualizuje tento textový uzel pouze tehdy count přeměna. Žádný virtuální DOM,
žádné rozpory, žádné usmíření.
Kompilovaný kód, zjednodušeně, vypadá takto:
// Output del compilatore Svelte (semplificato)
import { mount, text, element } from 'svelte/internal';
export function Counter(target) {
let count = 0;
const p = element('p');
const countText = text(`Contatore: ${count}`);
const button = element('button');
button.addEventListener('click', () => {
count++;
// Aggiorna SOLO il text node specifico
set_data(countText, `Contatore: ${count}`);
});
append(p, countText);
append(target, p);
append(target, button);
}Toto je srdce přístupu řízeného kompilátorem: kompilátor přesně ví, co může změnit a generuje optimální kód, který to zvládne, místo delegování této práce na generický algoritmus diffingu za běhu.
Porovnání velikosti balíčku (2025)
Ekvivalentní komponenta TodoList vytváří balíčky JavaScriptu velmi rozdílných velikostí napříč hlavními frameworky:
- Reagovat 19 + ReactDOM: ~42 KB gzip (včetně runtime)
- Vue 3.5: ~22 kB gzip (včetně runtime)
- Angular 19 (samostatný): ~35 KB gzip (včetně runtime)
- Rychlý 5: ~2-5 KB gzip (žádné runtime, pouze komponenta)
U velkých aplikací s mnoha komponentami je výhoda omezena, protože každá komponenta Svelte obsahuje jeho aktualizační kód. Ale pro středně velké aplikace zůstává Svelte celkovým vítězem pokud jde o užitečné zatížení prohlížeče.
Změna paradigmatu hry Svelte 5: The Runes
Svelte 4 používal magický systém reaktivity založený na přiřazení: každá proměnná v bloku
<script> byl automaticky reaktivní a kompilátor sledoval závislosti po celou dobu
sestavení. To fungovalo dobře pro jednoduché případy, ale mělo to důležitá omezení: fungovala reaktivita
pouze v rámci komponent .svelte a magické chování znesnadňovalo uvažování o kódu.
Svelte 5 zavádí i Runy: speciální funkce s předponou $ kteří komunikují
přímo s kompilátorem. Runy nejsou normální funkce — $state() není to funkce
že importuje a volá – ale speciální syntaxi rozpoznávanou kompilátorem, podobně jako jak useState()
v Reactu je rozpoznán transpilerem pro kontrolu vláken a typu, ale ve skutečnosti je to běžná funkce.
Klíčový rozdíl: Runy fungují všude, nejen v souborech .svelte:
// counter.svelte.ts - Un modulo TypeScript puro con reattivita Svelte 5
export function createCounter(initial: number = 0) {
let count = $state(initial);
// $derived calcola automaticamente quando count cambia
const doubled = $derived(count * 2);
const isEven = $derived(count % 2 === 0);
function increment() { count++; }
function decrement() { count--; }
function reset() { count = initial; }
return {
get count() { return count; },
get doubled() { return doubled; },
get isEven() { return isEven; },
increment,
decrement,
reset
};
}
// Usabile in qualsiasi componente .svelte
// o in altri file TypeScript che importano questo moduloToto je radikální změna oproti Svelte 4: obchodní logika s její reaktivitou může žít v samostatných modulech TypeScript, sdílené mezi komponentami, testovatelné samostatně s normálními jednotkovými testy, bez závislosti na vykreslovacím prostředí.
Čtyři základní runy
Svelte 5 představuje čtyři hlavní runy, které pokrývají většinu případů použití:
<script lang="ts">
// $state: stato reattivo (sostituisce let reattivo di Svelte 4)
let name = $state('Federico');
let items = $state<string[]>([]);
// $derived: valori computati (sostituisce $: di Svelte 4)
const greeting = $derived(`Ciao, ${name}!`);
const itemCount = $derived(items.length);
// $effect: side effects (sostituisce $: con side effects di Svelte 4)
$effect(() => {
console.log('name cambiato:', name);
// Cleanup automatico quando l'effetto si ri-esegue
return () => console.log('cleanup prima del prossimo run');
});
// $props: props del componente (sostituisce export let di Svelte 4)
const { title, onClose = () => {} } = $props<{
title: string;
onClose?: () => void;
}>();
</script>Svelte 4 vs Svelte 5: Klíčové rozdíly
Pokud máte zkušenosti se Svelte 4, runy výrazně mění syntaxi:
- Rychlý 4:
let count = 0;(implicitní magie) → Rychlý 5:let count = $state(0);(explicitní) - Rychlý 4:
$: doubled = count * 2;→ Rychlý 5:const doubled = $derived(count * 2); - Rychlý 4:
export let prop;→ Rychlý 5:const { prop } = $props(); - Rychlý 4:
on:click={handler}→ Rychlý 5:onclick={handler}
Svelte 5 si zachovává zpětnou kompatibilitu se Svelte 4 v „starším režimu“, takže migrace může být postupná.
Svelte 5 vs React: Praktické srovnání
Abychom konkrétně pochopili rozdíl v přístupu, podívejme se na stejnou komponentu implementovanou v React a Svelte 5:
// React 19: SearchBox con debounce
import { useState, useEffect, useCallback } from 'react';
function SearchBox({ onSearch }: { onSearch: (q: string) => void }) {
const [query, setQuery] = useState('');
const [debouncedQuery, setDebouncedQuery] = useState('');
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedQuery(query);
}, 300);
return () => clearTimeout(timer);
}, [query]);
useEffect(() => {
if (debouncedQuery) onSearch(debouncedQuery);
}, [debouncedQuery, onSearch]);
return (
<input
value={query}
onChange={e => setQuery(e.target.value)}
placeholder="Cerca..."
/>
);
}<!-- Svelte 5: SearchBox con debounce -->
<script lang="ts">
const { onSearch }: { onSearch: (q: string) => void } = $props();
let query = $state('');
$effect(() => {
const timer = setTimeout(() => {
if (query) onSearch(query);
}, 300);
return () => clearTimeout(timer);
});
</script>
<input bind:value={query} placeholder="Cerca..." />
Verze Svelte 5 je stručnější ne proto, že je „kouzelná“, je to proto, že kompilátor spravuje synchronizaci
mezi query a vstup přes bind:value, A $effect sledovat automaticky
závislost na query aniž byste jej museli explicitně deklarovat v poli závislostí.
Skutečný výkon: Data a benchmark
Syntetické benchmarky jsou často zavádějící, ale data z JS Framework Benchmark 2025 (běží na skutečném hardwaru s intenzivními operacemi DOM) ukazují Svelte 5 konzistentně v horní kvartilu pro téměř všechny testované operace:
- Vytvoření 10 000 řádků: Svelte 5 ~1,2x overhead vs Vanilla JS, Reagovat ~2,1x
- Aktualizovat každý 10. řádek: Svelte 5 ~1,1x, Reagovat ~1,8x
- Vyberte zvýraznění řádku: Svelte 5 ~1,05x, Reagovat ~1,4x
- Paměť po vytvoření: Svelte 5 využívá ~40% méně paměti než React
Výhoda je nejvýraznější na low-endových mobilních zařízeních, kde je parsování a provádění JavaScriptu stojí víc. Na moderních stolních počítačích je praktický rozdíl pro typické aplikace často neviditelný ke koncovému uživateli.
Vytvoření prvního rychlého projektu 5
Nejrychlejší způsob, jak začít s Svelte 5, je použít SvelteKit, oficiální full-stack framework založený na Svelte:
# Crea un nuovo progetto SvelteKit con Svelte 5
npm create svelte@latest my-svelte-app
cd my-svelte-app
# Seleziona: Skeleton project, TypeScript, ESLint, Prettier
npm install
# Avvia il dev server
npm run dev
Ověřte, že projekt používá Svelte 5 zaškrtnutím package.json:
{
"dependencies": {
"@sveltejs/kit": "^2.5.0",
"svelte": "^5.0.0"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
"vite": "^5.0.0"
}
}
Vytvořte svou první komponentu pomocí Run src/lib/components/Hello.svelte:
<script lang="ts">
// $props: tipo sicuro per le props del componente
const { name = 'Mondo' }: { name?: string } = $props();
// $state: stato locale reattivo
let clickCount = $state(0);
// $derived: valore computato da state e props
const message = $derived(
clickCount === 0
? `Ciao, ${name}!`
: `Ciao, ${name}! Hai cliccato ${clickCount} volt${clickCount === 1 ? 'a' : 'e'}`
);
</script>
<div class="hello">
<p>{message}</p>
<button onclick={() => clickCount++}>
Clicca qui
</button>
</div>
<style>
.hello {
padding: 1rem;
border: 1px solid #ccc;
border-radius: 8px;
}
button {
margin-top: 0.5rem;
padding: 0.5rem 1rem;
}
</style>SvelteKit: Full-Stack Framework
Rychlý sám a pouze vrstva uživatelského rozhraní. SvelteKit a aplikační framework postavený na Svelte který přidává směrování, SSR (Server-Side Rendering), SSG (Static Site Generation), akce formuláře a načítání funkce pro načítání dat. A ekvivalent Next.js pro React nebo Nuxt pro Vue.
Struktura projektu SvelteKit se řídí konvencemi založenými na souborech:
src/
├── routes/
│ ├── +layout.svelte # Layout globale
│ ├── +page.svelte # Homepage (/)
│ ├── about/
│ │ └── +page.svelte # Pagina /about
│ └── blog/
│ ├── +page.svelte # Lista articoli (/blog)
│ ├── +page.server.ts # Data fetching server-side
│ └── [slug]/
│ ├── +page.svelte # Articolo singolo (/blog/nome)
│ └── +page.server.ts
├── lib/
│ ├── components/ # Componenti condivisibili
│ └── utils/ # Utilita
└── app.html # Template HTML baseKdy zvolit Svelte 5
Svelte 5 je optimální volbou, když:
- Výkon nahrávání je kritický (mobilní, pomalá připojení)
- Velikost svazku musí být minimální
- Tým je ochoten naučit se mentální model odlišný od Reactu
- Chcete vynikající DX (Developer Experience) s menším standardem
- Se SvelteKit vytvoříte obsahově náročný web, který těží z SSR/SSG
Svelte 5 nemusí být správnou volbou, když:
- Tým má silné zkušenosti s Reactem a migrace by stála příliš mnoho
- Hledá se mnoho knihoven komponent uživatelského rozhraní (ekosystém React je širší)
- Musí se integrovat s knihovnami, které berou React (headless UI, Radix atd.)
Mentální model: Co mít na paměti
Práce se Svelte 5 vyžaduje internalizaci některých zásadních rozdílů ve srovnání s frameworky založené na virtuálním DOM:
- Kompilátor je váš nástroj, nikoli běhové prostředí. Když něco nefunguje jako očekáváte, přemýšlejte o tom, jak bude kompilátor interpretovat váš kód, ne o vykreslovací smyčce.
-
Runy komunikují s kompilátorem.
$state(),$derived()a ostatní nejsou jednoduché funkce: jsou to instrukce pro kompilátor, jak zacházet s reaktivitou. -
Odezva je podle návrhu granulární. Rychle aktualizuje pouze to, co tam skutečně je
změněno. Neexistuje žádný mechanismus pro ruční optimalizaci
useMemoouseCallback. -
Soubory .svelte.ts umožňují univerzální odezvu. Runy můžete použít v libovolném
soubor s příponou
.svelte.tso.svelte.jsnejen v komponentách.
Závěry a další kroky
Svelte 5 představuje nejvýznamnější evoluci frameworku od jeho vytvoření. Přístup kompilátorem řízené není nic nového, ale runy posouvají odezvu založenou na signálu mimo hranice komponent, umožňující flexibilnější a testovatelné architektonické vzory. Výsledkem je rámec, který kombinuje vynikající výkon, minimální balík a vývojářský zážitek bez zbytečného standardu.
Další článek série zkoumá do hloubky $state a $derived: jak to funguje
hluboká odezva přes Proxy ES6, jako $derived implementovat zapamatování a jak
použijte runy v souborech TypeScript sdílených mezi komponentami.
Řada: Svelte 5 a Frontend Compiler-Driven
- Článek 1 (tento): Kompilátorem řízený přístup a mentální model
- Článek 2: $state a $derived — Univerzální reaktivita s runami
- Článek 3: $efekt a životní cyklus – kdy jej použít (a kdy ne)
- Článek 4: SvelteKit SSR, funkce streamování a načítání
- Článek 5: Přechody a animace ve Svelte 5
- Článek 6: Přístupnost ve Svelte: Varování a osvědčené postupy kompilátoru
- Článek 7: Globální správa státu: kontext, runy a obchody
- Článek 8: Přechod ze Svelte 4 na Svelte 5 – Praktický průvodce
- Článek 9: Testování ve Svelte 5: Vitest, testovací knihovna a dramatik