Svelte
Svelte — свободный и открытый веб-фреймворк компонентной архитектуры для разработки frontend-приложений и одновременно язык программирования[2], созданный Ричем Харрисом и поддерживаемый командой Svelte[3].
В отличие от традиционных JavaScript-библиотек, Svelte не является монолитной библиотекой, импортируемой приложениями: вместо этого, Svelte-компилятор преобразует шаблоны HTML в специализированный код, который напрямую взаимодействует с DOM, что позволяет уменьшить размер передаваемых файлов и повысить производительность[4]. Пользовательский код также анализируется компилятором, который вставляет вызовы для автоматического пересчёта данных[5] и рендеринга элементов интерфейса при изменении зависимостей[6]. Такой подход избавляет от накладных расходов на промежуточные представления в рантайме, например, виртуальный DOM[7]; в то время как традиционные фреймворки (такие как React и Vue.js) основную работу выполняют в браузере, на этапе выполнения[3][4][5][6][7][8].
Сам компилятор написан на JavaScript[8][9], распространяется под лицензией MIT и размещён на GitHub[8]. Среди популярных frontend-фреймворков Svelte известен одним из самых маленьких размеров итоговых бандлов — порядка 2 КБ[10].
Общие сведения
| Svelte | |
|---|---|
| Тип | Веб-фреймворк |
| Автор | Rich Harris |
| Разработчики | Разработчики Svelte и различные участники сообщества, включая Rich Harris, Conduitry, Tan Li Hau, Ben McCann, Simon Holthausen |
| Написана на | JavaScript (с компонентами на TypeScript) |
| Операционная система | кроссплатформенность |
| Первый выпуск | 26 ноября 2016[1] |
| Аппаратная платформа | Веб-платформа |
| Последняя версия | 5.55.0 (23 марта 2026) |
| Репозиторий | github.com/sveltejs/svel… |
| Лицензия | MIT |
| Сайт | svelte.dev |
История
Прототипом Svelte стал проект Ractive.js, созданный Ричем Харрисом в 2013 году[11].
Первая версия Svelte была написана на JavaScript и вышла 29 ноября 2016 года; название Svelte выбрал Рич Харрис и его коллеги в редакции The Guardian.
Вторая версия вышла 19 апреля 2018 года; разработчики устранили ряд недочётов предыдущей редакции, например, заменив двойные фигурные скобки на одиночные.
Третья версия, написанная на TypeScript, была выпущена 21 апреля 2019 года и представила новую модель реактивности, где компилятор прозрачно отслеживает присваивания[5].
В октябре 2020 года был анонсирован фреймворк SvelteKit, а в марте 2021 года — открыт бета-доступ[12]. Релиз SvelteKit 1.0 состоялся в декабре 2022 года[13].
Версия 4 появилась 22 июня 2023 года как обслуживание, отличаясь меньшим размером и большей скоростью по сравнению с третьей[14]. Существенной частью стало внутреннее переписывание с TypeScript обратно на JavaScript с типизацией через JSDoc[9], что вызвало дискуссии среди разработчиков[15][16].
Пятая версия Svelte была представлена 19 октября 2024 года на конференции Svelte Summit Fall 2024 — выпуск произошёл публично с участием команды и Рича Харриса. Svelte 5 — переработка архитектуры фреймворка с изменением ключевых концепций реактивности и повторного использования кода[17]. Главное нововведение — руны (runes), особый синтаксис объявления реактивных состояний и связанного кода, которые помогают компилятору отслеживать связи между состояниями и DOM[18]. В Svelte 5 также реализованы сниппеты — повторно используемые фрагменты кода внутри компонентов[19].
На том же саммите в 2024 году Бен МакКанн анонсировал официальную Svelte CLI под именем sv в npm[20].
В начале 2025 года команда представила Asynchronous Svelte — экспериментальный набор возможностей асинхронной реактивности с использованием выражений await[21]; на август 2025 года эта возможность доступна через экспериментальную опцию компилятора[22]. Параллельно был представлен механизм удалённых функций (remote functions) для RPC во фреймворке SvelteKit[23].
Ключевые ранние участники проекта: Conduitry с момента выпуска первой версии, Tan Li Hau с 2019 года, Ben McCann — с 2020 года. В 2022 году Рич Харрис и Саймон Холтхаузен присоединились к Vercel для работы над Svelte на постоянной основе[24]. В 2023 году к ним присоединился Доминик Ганнавей из команды React[25].
Синтаксис
Приложения и компоненты Svelte определяются в файлах с расширением .svelte, представляющих собой HTML-документы с расширениями для шаблонов на базе JavaScript, по синтаксису схожие с JSX.
Ключевые возможности Svelte реализованы через руны (runes): синтаксические элементы, выглядящие как вызовы функций, но используемые компилятором как макросы:
$state— объявление реактивного состояния;$derived— объявление состояния, выводимого из одного или нескольких других состояний;$effect— код, который выполняется при изменении зависимостей.
Синтаксис { ... } позволяет выводить значения JavaScript прямо в шаблоне элементов и компонентов[26], аналогично интерполяции в JavaScript. Такой синтаксис также применяется в атрибутах элементов — для двустороннего связывания данных, обработки событий и задания CSS-стилей.
Ниже приведён пример To-do списка на Svelte:
<script>
let value = $state();
const todos = $state([]);
const all = $derived(todos.length);
const done = $derived(todos.filter(todo => todo.done).length);
function onsubmit(e) {
e.preventDefault();
todos.push({ text: value, done: false });
e.target.reset();
}
</script>
<span>Todo List</span>
<small>completed {done}/{all}</small><br />
{#each todos as { text, done }, index}
<input type="checkbox" bind:checked={todos[index].done} id={text} />
<label for={text} class:done>{text}</label>
<button onclick={() => todos.splice(index, 1)}>Remove</button>
<br />
{/each}
<form {onsubmit}>
<br />
<label for="input">Add todo</label>
<br />
<input type="text" name="input" bind:value />
</form>
<style>
span {
font-size: 20px;
font-weight: bold;
}
.done {
text-decoration-line: line-through;
}
</style>
Связанные проекты
Разработчики Svelte создали SvelteKit как официальный инструмент для построения приложений на базе Svelte. Это фреймворк в духе Next.js, значительно сокращающий количество кода, отправляемого в браузер. До этого у команды был проект Sapper, предшественник SvelteKit[27].
Разработчики Svelte поддерживают ряд интеграций с популярными программными инструментами и экосистемами: Vite, Rollup, Webpack, TypeScript, VS Code, Chrome DevTools, ESLint, Prettier[28]. Также внешние проекты, такие как Storybook, реализуют интеграции с Svelte и SvelteKit.
Влияние
Распространение
Svelte получил широкое признание среди разработчиков, регулярно занимая лидирующие позиции в крупных опросах. В 2021 году он занял первое место среди веб-фреймворков по любви по версии Stack Overflow и был признан фронтенд-фреймворком с наибольшей удовлетворённостью пользователей в опросе State of JS 2020 года[29][30].
В 2024 году Svelte вновь вошёл в число наиболее положительно оцениваемых frontend-фреймворков по результатам State of JS[31]. Согласно опросу Stack Overflow 2024 года, 73 % разработчиков, работавших с Svelte, хотят продолжить его использовать; команда Stack Overflow применила Svelte для создания сайта с результатами опроса[32].
Svelte был принят рядом крупных интернет-компаний: The New York Times, Google, Apple, Spotify, Radio France, Square, Yahoo!, ByteDance, Rakuten, Bloomberg, Reuters, IKEA, Facebook, Logitech, Brave[33][34][35][36].
Независимое сообщество Svelte Society организует конференции Svelte Summit, издаёт новостную рассылку, ведёт подкаст и каталог инструментов и шаблонов для Svelte[37].