Svelte

Svelte — свободный и открытый компонентный фронтенд-фреймворк^[1] и язык программирования^[2], созданный Ричем Харрисом и поддерживаемый основной командой Svelte^[3].

Svelte — не монолитная библиотека JavaScript, импортируемая приложениями. Вместо этого Svelte компилирует HTML-шаблоны в специализированный код, который напрямую манипулирует DOM, что позволяет уменьшить размер передаваемых файлов и повысить производительность на стороне клиента^[4]. Код приложения также обрабатывается компилятором, который вставляет вызовы для автоматического пересчёта данных^[1] и повторной отрисовки элементов пользовательского интерфейса при изменении данных, от которых они зависят^[5]. Это также позволяет избежать накладных расходов, связанных с промежуточными представлениями во время выполнения (runtime), такими как виртуальный DOM^[6], в отличие от традиционных фреймворков (таких как React и Vue.js), которые выполняют основную часть своей работы во время выполнения, то есть в браузере^{[4][5][3][7][1][6]}.

Сам компилятор написан на JavaScript^[8][7]. Его исходный код распространяется под лицензией MIT и размещён на GitHub^[7]. Среди сопоставимых фронтенд-библиотек Svelte имеет один из самых маленьких размеров итоговой сборки (bundle) — всего 2 КБ^[9].

Предшественником Svelte является Ractive.js, который Рич Харрис создал в 2013 году^[10].

Версия 1 Svelte была написана на JavaScript и выпущена 29 ноября 2016 года^[11]. Название «Svelte» (в пер. с англ. — «изящный», «стройный») было выбрано Ричем Харрисом и его коллегами из The Guardian^[11].

Версия 2 Svelte была выпущена 19 апреля 2018 года. В ней были исправлены ошибки, допущенные в предыдущей версии, например, двойные фигурные скобки были заменены на одинарные^[11].

Версия 3 Svelte была написана на TypeScript и выпущена 21 апреля 2019 года. В ней был переосмыслен подход к реактивности: компилятор стал отслеживать присваивания переменных «за кулисами»^[1].

Веб-фреймворк SvelteKit был анонсирован в октябре 2020 года и вошёл в стадию бета-тестирования в марте 2021 года^[12][13]. SvelteKit 1.0 был выпущен в декабре 2022 года после двух лет разработки^[14].

Версия 4 Svelte была выпущена 22 июня 2023 года. Это был релиз, направленный на поддержку, он стал меньше и быстрее третьей версии^[15]. В рамках этого релиза был проведён внутренний рефакторинг с TypeScript обратно на JavaScript с использованием аннотаций типов JSDoc^[8]. Это вызвало недоумение в сообществе разработчиков, на что ответил создатель Svelte Рич Харрис^[16][17].

Версия 5 Svelte была выпущена 19 октября 2024 года на Svelte Summit Fall 2024. Svelte 5 стал полной переработкой фреймворка, изменив ключевые концепции, такие как реактивность и переиспользование кода^[18]. Его основная особенность, руны (runes), переработала способ объявления и использования реактивного состояния. Руны — макросы, похожие на функции, которые используются для объявления реактивного состояния или кода, использующего реактивные состояния. Компилятор использует эти руны для обозначения значений, которые могут изменяться и от которых зависят другие состояния или DOM^[19]. Svelte 5 также представил сниппеты — переиспользуемые фрагменты кода, которые определяются один раз и могут использоваться в любом месте компонента^[20]. Изначально Svelte 5 был встречен неоднозначно из-за множества изменений и, как следствие, устаревания некоторых подходов, в основном из-за введения рун. Однако большая часть споров утихла после первоначального анонса рун и дальнейшей доработки Svelte 5^{[источник?]}.

Ключевые ранние участники команды Svelte: Conduitry присоединился с выходом Svelte 1, Тан Ли Хау — в 2019 году, а Бен МакКанн — в 2020 году^[11]. Рич Харрис и Саймон Хольтхаузен присоединились к компании Vercel для работы над Svelte на полную ставку в 2022 году^[21]. Доминик Ганнауэй перешёл в Vercel из основной команды React для работы над Svelte в 2023 году^[22].

Приложения и компоненты Svelte определяются в файлах с расширением `.svelte` — это HTML-файлы, расширенные синтаксисом шаблонов, основанным на JavaScript и похожим на JSX.

Основные возможности Svelte доступны через руны, которые синтаксически выглядят как функции, но используются компилятором как макросы. К ним относятся:

• Руна $state, используемая для объявления реактивного состояния
• Руна $derived, используемая для объявления реактивного состояния, производного от одного или нескольких других состояний
• Руна $effect, используемая для объявления кода, который перезапускается при изменении его зависимостей

Кроме того, синтаксис { JavaScript-код } можно использовать для вставки выражений в HTML-элементы и компоненты^[23], подобно шаблонным строкам в JavaScript. Этот синтаксис также может использоваться в атрибутах элементов для таких целей, как двусторонняя привязка данных, обработка событий и стилизация CSS. Пример приложения «Список дел», созданного на 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>Список дел</span>
<small>выполнено {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)}>Удалить</button>
	<br />
{/each}

<form {onsubmit}>
	<br />
	<label for="input">Добавить задачу</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^[24].

Команда Svelte также поддерживает ряд интеграций для популярных программных проектов, включая интеграции для Vite, Rollup, Webpack, TypeScript, Visual Studio Code, инструментов разработчика Chrome, ESLint и Prettier^[25]. Ряд внешних проектов, таких как Storybook, также создали интеграции со Svelte и SvelteKit.

Vue.js смоделировал свой API и однофайловые компоненты по образцу Ractive.js, предшественника Svelte^[10].

Svelte получил широкое признание среди разработчиков. Он занял первые места в нескольких крупных опросах разработчиков, был назван самым «любимым» веб-фреймворком в опросе Stack Overflow 2021 года и фронтенд-фреймворком с самыми удовлетворёнными разработчиками в опросе State of JS 2020 года^[26][27].

Svelte был внедрён рядом крупных веб-компаний, включая The New York Times, Google, Apple, Spotify, Square, Yahoo!, ByteDance, Rakuten, Bloomberg, Reuters, IKEA, Facebook и Brave^[28][29][30].

Группа сообщества, известная как Svelte Society, проводит конференцию Svelte Summit, выпускает новостную рассылку о Svelte, ведёт подкаст и поддерживает каталог инструментов, компонентов и шаблонов для Svelte^[31].

• Библиотека JavaScript
• Сравнение JavaScript-фреймворков

• svelte.dev (англ.) — официальный сайт Svelte