====== Svelte ======

**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.



===== 1. Hlavní rozdíly oproti jiným frameworkům =====

==== Žádný Virtuální DOM ====
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.

==== Skutečná reaktivita ====
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é:
<code>
let pocet = 0;
pocet += 1; // Svelte automaticky pozná, že má překreslit HTML
</code>

==== Méně kódu ====
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]

===== 2. Klíčové vlastnosti =====

  * **Single-File Components:** Podobně jako u [[it_encyklopedie:sfc|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.

===== 3. Srovnání výkonu =====

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.



===== 4. Ukázka kódu (Svelte komponenta) =====

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

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

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

===== 5. SvelteKit =====

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 [[it_encyklopedie:vite|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.

[[it_encyklopedie:it_architektura_rozcestnik|Zpět na Architekturu]]