Розроблення фронтенду сайту на Svelte
Svelte — компілятор, а не runtime-фреймворк. Код Svelte-компонентів компілюється в ванільний JavaScript без Virtual DOM. Результат: менший розмір бандла, краща продуктивність, простіший код. Svelte 5 вводить Runes — нову систему реактивності.
Чому Svelte швидше
React та Vue працюють через Virtual DOM — створюють віртуальне дерево та діфять з реальним. Svelte на етапі компіляції визначає, які частини DOM зміняться при зміні стану, та генерує точечні DOM-оновлення:
<!-- Svelte компілює це в -->
<script>
let count = 0;
</script>
<button on:click={() => count++}>
Натиснено {count} раз
</button>
<!-- ...приблизно в такий JS: -->
// element.textContent = `Натиснено ${count} раз`;
// (прямих оновлення без diffing)
Svelte 5 Runes
Svelte 5 замінює неявну реактивність явними runes:
<script>
let count = $state(0); // реактивне стан
let doubled = $derived(count * 2); // обчислене
$effect(() => {
console.log('count змінилась:', count);
});
</script>
<button onclick={() => count++}>{count} × 2 = {doubled}</button>
Компоненти та props
<!-- UserCard.svelte -->
<script>
let { name, age, onSelect } = $props();
</script>
<div class="card" role="button" onclick={onSelect}>
<strong>{name}</strong>
<span>{age} років</span>
</div>
<style>
/* Стилі автоматично scoped до компоненту */
.card { padding: 16px; border-radius: 8px; }
strong { color: #1a1a2e; }
</style>
Stores
Глобальне стан через Svelte stores:
// stores/user.ts
import { writable, derived } from 'svelte/store';
export const user = writable(null);
export const isLoggedIn = derived(user, $user => !!$user);
// У компоненті
import { user, isLoggedIn } from '../stores/user';
$: console.log($user); // $ підписка на store
Анімації та переходи
Вбудована підтримка CSS-анімацій:
<script>
import { fade, fly, scale } from 'svelte/transition';
import { tweened } from 'svelte/motion';
let visible = true;
const progress = tweened(0, { duration: 400 });
</script>
{#if visible}
<div transition:fly={{ y: -20, duration: 300 }}>Появляється</div>
{/if}
<progress value={$progress} />
Екосистема
- SvelteKit — мета-фреймворк SSR/SSG (аналог Next.js)
- Svelte Material UI — Material Design компоненти
- Shadcn-Svelte — портування Shadcn/ui для Svelte
Коли вибирати Svelte
- Інтерактивні віджети для вбудовування в не-SPA сайти
- Проекти з жорсткими вимогами до розміру бандла (браузерні розширення, email-віджети)
- Команди, які цінують простоту коду над розміром екосистеми
- Анімовані та високоінтерактивні UI
Терміни
Фронтенд на Svelte для SPA/віджету (5–10 екранів): 1–2 тижня. Проект з SSR через SvelteKit, авторизацією, інтеграцією API: 2–5 тижнів.