Svelte: компилятор вместо рантайма и где он в 2026

Ноябрь 2016. Rich Harris, на тот момент инженер The Guardian и The New York Times, устал от одной проблемы: чтобы оживить интерактивную инфографику в статье, в браузер читателя приходилось грузить десятки килобайт фреймворка ещё до того, как покажется первый пиксель. На медленном телефоне в метро это секунды пустого экрана. Harris задаёт неудобный вопрос: а зачем вообще тащить фреймворк в браузер? Пусть вся работа произойдёт заранее, при сборке. Так родился Svelte - не библиотека, которая исполняется в рантайме, а компилятор, который превращает компоненты в обычный маленький JavaScript. Через восемь лет, в октябре 2024, Svelte 5 принесёт руны и сигнальную реактивность без virtual DOM вообще.

• The New York Times: интерактивная визуализация выборов и инфографика собраны на Svelte ради лёгкого бандла на мобильных
• Apple, Spotify, Reuters: используют Svelte в отдельных продуктовых интерфейсах и встраиваемых виджетах
• 1Password: десктоп-приложение частично построено на Svelte ради компактного и быстрого UI
• Vercel наняла Rich Harris в 2021 году, чтобы он работал над Svelte и SvelteKit полный рабочий день
• State of JS: Svelte годами держит один из самых высоких показателей удовлетворённости среди фронтенд-инструментов

Предварительные знания

• JavaScript на уровне функций, массивов, объектов и модулей (import/export)
• Базовое понимание DOM: браузер строит дерево элементов из HTML
• Идея о том, что такое сборка проекта (bundler превращает исходники в готовые файлы)

Как Rich Harris превратил фреймворк в компилятор

Rich Harris пришёл во фронтенд из журналистики данных: он делал интерактивные истории для The Guardian и The New York Times, где каждый килобайт JavaScript задерживал появление контента. Ещё до Svelte он написал Ractive.js и сборщик Rollup. В ноябре 2016 он публикует Svelte с тезисом-манифестом 'фреймворки - это не инструменты для организации кода, а инструменты для организации мышления, и большую часть их работы можно сделать на этапе компиляции'. Svelte 3 (апрель 2019) сделал реактивность почти невидимой через метку доллар-двоеточие и принёс библиотеке широкую известность. В 2021 Vercel наняла Harris работать над Svelte полный день. Svelte 5 (октябрь 2024) заменил неявную реактивность на явные руны и перешёл на сигнальную модель без virtual DOM.

Компилятор вместо рантайма

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

Компилятор видит, что текст кнопки зависит от count, и генерирует код, который при изменении count меняет ровно этот текстовый узел. Никакого сравнения деревьев в рантайме. Именно поэтому из этого файла получается совсем небольшой JavaScript: фреймворк не едет вместе с ним, потому что фреймворк уже сделал свою работу при сборке.

Rich Harris в докладе 'Rethinking reactivity' (2019) сформулировал тезис так: virtual DOM не бесплатен. Это умное, но небесплатное решение проблемы, которую при компиляции можно обойти. Svelte платит размером компилятора в инструментах разработчика, а не весом рантайма у пользователя.

Где Svelte выигрывает, а где сильнее React

Главное преимущество Svelte измеримо: размер бандла и метрики загрузки. Меньше JavaScript - быстрее First Contentful Paint и Time to Interactive, лучше Core Web Vitals, особенно на дешёвых телефонах и слабой сети. Для встраиваемых виджетов, интерактивной инфографики и лёгких приложений это решает. Плюс к этому - приятный опыт разработки: меньше шаблонного кода, стили и разметка живут в одном файле, реактивность выглядит как обычные переменные.

Где сильнее React: экосистема и найм. Под React написаны тысячи библиотек - компонентные киты, таблицы, графики, формы, интеграции с любым SDK. Команду на React собрать проще, готовых ответов на Stack Overflow больше. Если проект огромный, живёт годами и опирается на множество сторонних интеграций, размер этой экосистемы перевешивает выигрыш в килобайтах.

Трезвый взгляд: выбор между Svelte и React редко про скорость как таковую. Это компромисс между лёгкостью и размером бандла с одной стороны и экосистемой с наймом с другой. Для лендинга, виджета или продукта, где важны метрики загрузки, Svelte отличный выбор. Для крупного долгоживущего приложения с десятками интеграций React часто практичнее.

Где Svelte в 2026 году

К 2026 году актуальная версия - Svelte 5 с рунами. Компилятор перешёл на сигнальную модель: реактивность выражается явно через руны со знаком доллара (`$state`, `$derived`, `$effect`, `$props`, `$bindable`), а virtual DOM отсутствует как концепция. Руны работают не только внутри компонентов, но и в обычных модулях `.svelte.js` и `.svelte.ts`, поэтому общее состояние можно вынести из компонента и переиспользовать. Слоты заменены сниппетами через `{#snippet}` и `{@render}`. На стороне фреймворка - SvelteKit 2 с файловым роутингом, функциями load и form actions.

Хирургическая гидратация (surgical hydration) - подход, при котором после рендера на сервере к жизни оживляются только интерактивные части страницы, а не всё дерево. В сочетании с малым объёмом JS это напрямую улучшает Time to Interactive и Core Web Vitals.

Связь с другими темами

Этот урок объясняет идею и историю. Дальше курс раскрывает её по слоям:

• SvelteKit и структура проекта — Официальный фреймворк поверх Svelte: роутинг, сборка на Vite, дев-сервер. Первый практический шаг
• Компонент .svelte — Единица, которую компилятор превращает в маленький JS: script, разметка и стили в одном файле
• Руны: явная реактивность — Главный сдвиг Svelte 5. Компилятор отслеживает реактивность через руны со знаком доллара

Итог

• Svelte создан Rich Harris и открыт в ноябре 2016 года как ответ на тяжёлые фреймворк-рантаймы в браузере, особенно на медленных мобильных
• Ключевая идея: Svelte это компилятор, а не рантайм. Компоненты превращаются в маленький JavaScript на этапе сборки, без virtual DOM
• Svelte 3 (2019) принёс известность благодаря почти невидимой реактивности, Svelte 5 (октябрь 2024) заменил её явными рунами и сигналами
• Где Svelte выигрывает: маленький размер бандла, сильные Core Web Vitals, приятный DX. Хорошо для виджетов, инфографики, лёгких приложений
• Где сильнее React: огромная экосистема библиотек, найм, готовые решения и интеграции под почти любую задачу

Связанные уроки

• sv-02-setup-sveltekit — Поняв идею компилятора, разработчик ставит SvelteKit и разбирает структуру проекта, чтобы перейти к коду
• sv-05-runes-intro — Руны Svelte 5 - прямое продолжение этой истории: компилятор теперь видит реактивность явно через знак доллара
• sv-03-components — Первый практический результат компиляторного подхода - один .svelte файл, который компилируется в маленький JS