Svelte: что это за фреймворк и почему он популярен в 2025

Если прочитать определение с сайта Svelte, то там говорится:

Svelte — это фреймворк пользовательского интерфейса, который использует компилятор, чтобы позволить вам писать невероятно лаконичные компоненты, выполняющие минимум работы в браузере, используя уже знакомые вам языки — HTML, CSS и JavaScript.

Что такое Svelte: основы и история

Svelte — это открытый фреймворк для создания пользовательских интерфейсов, созданный Ричем Харрисом (Rich Harris) в 2016 году. Главная идея: перенести как можно больше работы на этап компиляции, а не выполнения в браузере.

В отличие от React и Vue, где виртуальный DOM и runtime-реактивность «весят» десятки килобайт, Svelte генерирует чистый JavaScript без лишнего слоя абстракции. Результат — бандлы в 2–10 раз меньше и производительность, близкая к нативному коду.

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

<script lang="ts">
	// реактивное состояние
	let count = $state(0)

	// переназначение обновляет пользовательский интерфейс
	setInterval(() => count += 1, 1000)
</script>

<p>{count}</p>

Вы могли бы подумать, что Svelte выполняет какие-то сумасшедшие действия компилятора под капотом, чтобы заставить это работать, но на выходе получается понятный человеку JavaScript:

function App($$anchor) {
	// создается сигнал
	let count = state(0)

	// сигнал обновляется
	setInterval(() => set(count, get(count) + 1), 1000)

	// создается элемент
	var p = from_html(`<p> </p>`)
	var text = child(p, true)

	// обновляется DOM когда меняется `count` 
	template_effect(() => set_text(text, get(count)))

	// добавляется к DOM
	append($$anchor, p)
}

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

Просто прочитав код, вы начнёте понимать, как работает Svelte. Здесь нет виртуального DOM или перерисовки компонента при обновлении состояния, как в React — Svelte обновляет только ту часть DOM, которая изменилась.

Вот что означает «выполняет минимум работы в браузере»!

У Svelte также есть более продуманный фреймворк для приложений под названием SvelteKit (аналог Next.js для React), если вам нужна маршрутизация, рендеринг на стороне сервера, адаптеры для развёртывания на разных платформах и так далее.

История Svelte:

• 2016 — первый релиз Svelte 1
• 2019 — Svelte 3 и взрыв популярности (The New York Times, Spotify, 1Password)
• 2022–2023 — SvelteKit 1.0 (full-stack фреймворк)
• 2024 — стабильный релиз Svelte 5 с runes
• 2025 — Svelte 5.4+ + глубокая интеграция с Vercel, Cloudflare Workers и мобильными фреймворками (Tauri, Capacitor)

По данным State of JS 2024 (опрос 2025 ещё не вышел), удержание (retention) у Svelte — 93%, выше, чем у React (88%) и Vue (90%).

Как работает Svelte JS: ключевые принципы

Svelte часто называют Svelte JS, потому что он написан на JavaScript/TypeScript и компилируется в него же.

Основные отличия:

Каждый компонент — это отдельный .svelte-файл с HTML, CSS (scoped по умолчанию) и скриптом.

Нет виртуального DOM — реактивность реализуется через присваивания на этапе компиляции.

Реактивные объявления: в Svelte 3/4 использовался $:; в Svelte 5 — руны (runes).

<script>
  let count = $state(0); // руна $state вместо let + $:

  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  Нажато {count} {count === 1 ? 'раз' : 'раз'}
</button>

<style>
  button { padding: 0.5rem 1rem; }
</style>

Компилятор превратит это в чистый JS без runtime-фреймворка. Размер такого компонента в бандле — менее 1 КБ.

Svelte 5: что нового и почему стоит обновляться

Svelte 5 вышел в стабильную версию в октябре 2024 года и к ноябрю 2025 уже на версии 5.4.x. Главное нововведение — система runes ($state, $derived, $effect, $props и др.).

Сравнение реактивности:

Другие важные изменения 2025 года:

• Snippets — переиспользуемые блоки разметки
• Улучшенный transition engine и анимации
• Полная поддержка TypeScript 5.5+ из коробки
• Новый компилятор на Rust (ещё быстрее)
• Интеграция с SvelteKit 2.5+ (2025: встроенный image optimizer, улучшенный streaming SSR

Миграция с Svelte 4 занимает 1–3 дня для среднего проекта (есть официальный кодемод).

По бенчмаркам js-framework-benchmark (ноябрь 2025) Svelte 5 создаёт 10 000 строк таблицы за ~55 мс (React 18 — ~140 мс, Vue 3 — ~95 мс).

Преимущества и недостатки Svelte в 2025 году

Преимущества

• Размер бандла: часто <10 КБ gzipped для всего приложения
• Производительность: нет runtime overhead
• Простота изучения: синтаксис ближе к vanilla HTML/JS
• Scoped стили из коробки
• Отличные анимации и transitions
• SvelteKit — один из лучших full-stack решений (SSR, SSG, API routes)

Недостатки

• Экосистема всё ещё меньше React (но уже >1000 пакетов на npm с префиксом @svelte-)
• Меньше вакансий (но растёт +47% год к году по Indeed 2025)
• Некоторые enterprise-библиотеки (charts, tables) пока лучше в React-экосистеме

Таблица сравнения 2025 (реальные бандлы hello-world + router):

Как начать работу с Svelte 5 в 2025 году

Самый быстрый старт:

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

Выберите шаблон «Skeleton project» или «SvelteKit demo app». Через 30 секунд у вас локальный dev-сервер на http://localhost:5173.