Разработка фронтенда сайта на Svelte

Разработка фронтенда сайта на Svelte

Svelte — компилятор, а не runtime-фреймворк. Код Svelte-компонентов компилируется в ванильный JavaScript без Virtual DOM. Результат: меньший размер бандла, лучшая производительность, более простой код. Svelte 5 вводит Runes — новую систему реактивности.

Почему Svelte быстрее

React и Vue работают через Virtual DOM — создают виртуальное дерево и диффят с реальным. Svelte на этапе компиляции определяет, какие части DOM изменятся при изменении state, и генерирует точечные 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

Сроки

Frontend на Svelte для SPA/виджета (5–10 экранов): 1–2 недели. Проект с SSR через SvelteKit, авторизацией, интеграцией API: 2–5 недель.