2025-08-13

Svelte: революционный фреймворк

Svelte — это фреймворк, который переносит большую часть работы из браузера на этап сборки. Вместо виртуального DOM и крупной рантайм-библиотеки Svelte компилирует компоненты в высокоэффективный JavaScript, который напрямую обновляет DOM. В результате вы получаете более быстрые приложения и меньшие бандлы.

1. Ключевые идеи Svelte

Компиляция вместо рантайма: компоненты преобразуются в чистый JS-код на этапе билда.
Реактивность «из коробки»: изменение значения — это сигнал к обновлению DOM, без setState и сложных хуков.
Минимум оверхеда: меньше кода в бандле, быстрее старт и рендеринг.
Простая модель компонентов: синтаксис ближе к HTML/CSS/JS, низкий порог входа.

2. Быстрый старт

Вариант A: Svelte + Vite

npm create vite@latest my-svelte-app -- --template svelte
cd my-svelte-app
npm install
npm run dev

Эти команды создают проект на базе Vite с преднастроенным шаблоном Svelte. Vite обеспечивает мгновенную сборку модулей и горячую перезагрузку (HMR). Команда npm run dev запускает локальный сервер разработки, после чего вы сможете открывать приложение в браузере и мгновенно видеть изменения.

Вариант B: SvelteKit (SSR/ISR/SPA)

npm create svelte@latest my-sveltekit-app
cd my-sveltekit-app
npm install
npm run dev

SvelteKit — официальный мета-фреймворк для Svelte, предоставляющий рендеринг на сервере (SSR), статическую генерацию (SSG) и инкрементальную регенерацию (ISR), а также роутинг по файловой системе и удобный механизм загрузки данных. Это оптимальный выбор для приложений с SEO-требованиями, сложной навигацией и гибридной архитектурой.

3. Первый компонент: счётчик

<script>
  let count = 0
</script>

<button on:click={() => count += 1}>
  Кликнули {count} раз(а)
</button>

Здесь нет setState — простое присваивание count += 1 обновит разметку.

Этот пример демонстрирует ключевую особенность Svelte: реактивность встроена в язык компонентов. Когда переменная count меняется, Svelte компилирует код так, чтобы был выполнен точечный апдейт соответствующих узлов DOM. В отличие от React, где используется виртуальный DOM и сравнение деревьев, Svelte избавляет от этого слоя, что снижает накладные расходы рантайма. В сравнении с Vue вам не нужны специальные API для сигнализации об изменениях состояния — достаточно обычных присваиваний.

4. Реактивные выражения

<script>
  let count = 0
  $: doubled = count * 2 // пересчёт при каждом изменении count
</script>

<input type="range" min="0" max="100" bind:value={count} />
<p>Значение: {count}, вдвое: {doubled}</p>

Оператор $: создаёт реактивное выражение. Любые зависимости пересчитываются автоматически.

Svelte отслеживает зависимости выражения, стоящего справа от $:. При каждом изменении любой из зависимостей код будет выполнен заново. В примере doubled пересчитывается только при изменении count, что избавляет от ручной мемоизации и сложных хуков. Если вычисление тяжёлое, лучше вынести его в derived store или вызывать по событию, чтобы избежать лишних пересчётов во время ввода.

5. Привязки и события

<script>
  let name = 'мир'
  function submit() {
    alert(`Привет, ${name}!`)
  }
</script>

<input placeholder="Имя" bind:value={name} />
<button on:click={submit}>Отправить</button>

bind:value двусторонне связывает состояние и поле ввода.

Привязки (bind:) обеспечивают синхронизацию значения между DOM-элементом и переменной компонента. Это сокращает шаблонный код и делает формы проще. Слушатели событий записываются как on:event. В реальных приложениях стоит валидировать данные и минимизировать количество глобальных обработчиков, вынося бизнес-логику в функции/модули.

6. Stores: глобальная реактивность

Svelte предоставляет простые и лёгкие по весу сторы для управления состоянием вне отдельных компонентов. Базовый тип — writable, который хранит значение и позволяет подписчикам получать обновления. Тип derived вычисляет значение из других сторов и автоматически реагирует на их изменения.

// src/lib/stores/theme.js
import { writable, derived } from 'svelte/store'

export const theme = writable('light')
export const isDark = derived(theme, ($t) => $t === 'dark')

В компонентах можно использовать специальный синтаксис $store, который автоматически подписывает компонент и даёт доступ к текущему значению. Отписка происходит автоматически при уничтожении компонента, что упрощает управление ресурсами.

<script>
  import { theme, isDark } from '$lib/stores/theme.js'
  function toggle() {
    theme.update((t) => (t === 'light' ? 'dark' : 'light'))
  }
</script>

<button on:click={toggle}>
  Тема: {$isDark ? 'Тёмная' : 'Светлая'}
</button>

Совет: избегайте создания множества мелких сторов, которые часто обновляются одновременно. Это может приводить к каскаду ререндеров. Группируйте связанные значения или используйте derived, чтобы централизовать вычисления.

7. Стили и изоляция CSS

<style>
  .card {
    padding: 16px;
    border-radius: 12px;
    background: var(--surface);
  }
</style>

<div class="card">Локальные стили не протекают наружу</div>

Svelte автоматически применяет уникальные атрибуты, чтобы области стилей не пересекались между компонентами.

Svelte добавляет скоупинг к селекторам на этапе компиляции, поэтому стили компонента действуют только на его разметку. Для глобальных стилей используйте :global(...) или отдельные CSS/SCSS-файлы, подключённые на уровне приложения. Такой подход позволяет безопасно переиспользовать компоненты без риска неожиданных конфликтов CSS.

8. Асинхронность и onMount

<script>
  import { onMount } from 'svelte'
  let users = []
  let loading = true

  onMount(async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/users')
    users = await res.json()
    loading = false
  })
</script>

{#if loading}
  <p>Загрузка...</p>
{:else}
  <ul>
    {#each users as u}
      <li>{u.name}</li>
    {/each}
  </ul>
{/if}

onMount запускается один раз после монтирования компонента в DOM и удобен для загрузки данных или интеграций с внешними библиотеками. Если запрос может завершиться ошибкой, оберните код в try/catch и добавьте состояние ошибки. Для серверного рендеринга в SvelteKit используйте функции load (или серверные хендлеры), чтобы получать данные до рендера страницы.

9. Роутинг и SSR с SvelteKit

SvelteKit добавляет маршрутизацию по файловой системе, SSR/SSG/ISR, адаптеры для хостингов и удобную работу с данными.
Страницы живут в src/routes. Файлы +page.svelte, +page.ts, +layout.svelte описывают UI и загрузку данных.
+layout.svelte и +layout.ts позволяют задавать общий каркас и данные для группы страниц. Вложенные лэйауты объединяются каскадом.
Функции загрузки: +page.ts/+page.server.ts возвращают данные в компонент страницы. Серверный вариант выполняется только на сервере, а клиентский может работать и на клиенте в навигации SPA.

Пример загрузки данных на сервере:

// src/routes/posts/+page.server.ts
export const load = async ({ fetch }) => {
  const res = await fetch('/api/posts')
  if (!res.ok) {
    return { posts: [] }
  }
  return { posts: await res.json() }
}

Используйте серверные загрузчики, когда нужны секреты, защищённые запросы или доступ к БД. Клиентские загрузчики подходят для публичных данных и оптимизации навигации без полной перезагрузки.

10. Сравнение с React/Vue

Без виртуального DOM: меньше рантайма, меньше накладных расходов на диффинг.
Проще реактивность: не нужны эффекты и мемоизации в большинстве случаев.
Меньше бандл: особенно заметно на виджетах и микрофронтендах.
Экосистема: у React/Vue она шире; для Svelte быстрый рост, но иногда потребуются адаптеры/обёртки.

Важно понимать компромиссы: если вашему проекту критично наличие определённых библиотек или готовых интеграций (например, специфических UI-китов, сложных редакторов, корпоративных SDK), экосистема React/Vue может оказаться богаче. Svelte выигрывает там, где решающее значение имеет производительность и размер бандла, а также простота кода и скорость разработки. В больших командах Svelte часто используют вместе с SvelteKit для консистентной архитектуры, а для UI — подключают лёгкие компонентные библиотеки или пишут компоненты с нуля благодаря простому синтаксису.

11. Производительность и лучшие практики

Импортируйте только нужное; дробите код через динамические импорты.
Избегайте тяжёлых вычислений в реактивных выражениях — выносите их в derived store или вызывать по событию.
Используйте SvelteKit для SSR: это улучшит TTFB, SEO и общую отзывчивость.
Следите за размером изображений и шрифтами — это зачастую важнее JS-оптимизаций.
Не злоупотребляйте вложенными {#each} — при больших списках подумайте о виртуализации.
Минимизируйте количество сторов, обновляющихся синхронно; группируйте состояние.
Инкапсулируйте эффекты в компонентах и используйте onMount/onDestroy для управления ресурсами.

Типичные ошибки: бесконечные циклы реактивности из-за update внутри $:; утечки памяти при подписке на кастомные события без отписки; дерганье верстки при частых обновлениях стора — решайте через батчинг обновлений и вынос вычислений.

12. Полезные ссылки

Официальный сайт: Svelte
Руководство по SvelteKit: SvelteKit
Репозиторий GitHub: sveltejs/svelte

Заключение

Svelte предлагает свежий взгляд на разработку интерфейсов: меньше кода, выше производительность и интуитивная реактивность. Если вам важны скорость загрузки, отзывчивость и простота — Svelte и SvelteKit стоят того, чтобы попробовать их в следующем проекте.

Практический совет по выбору:

Если вам нужна SPA без SSR — начните с Svelte + Vite.
Если важны SEO, SSR/SSG, маршрутизация и гибридные сценарии — выбирайте SvelteKit.

Следующий шаг: разверните небольшой прототип (виджет или страницу), измерьте размер бандла и TTFB, сравните с текущим стеком — результаты помогут принять взвешенное решение о миграции или использовании Svelte точечно.