Svelte — свободный и открытый компонентный фронтенд-фреймворк и язык программирования, созданный Ричем Харрисом и поддерживаемый основной командой Svelte.
Svelte — не монолитная библиотека JavaScript, импортируемая приложениями. Вместо этого Svelte компилирует HTML-шаблоны в специализированный код, который напрямую манипулирует DOM, что позволяет уменьшить размер передаваемых файлов и повысить производительность на стороне клиента. Код приложения также обрабатывается компилятором, который вставляет вызовы для автоматического пересчёта данных и повторной отрисовки элементов пользовательского интерфейса при изменении данных, от которых они зависят. Это также позволяет избежать накладных расходов, связанных с промежуточными представлениями во время выполнения (runtime), такими как виртуальный DOM, в отличие от традиционных фреймворков (таких как React и Vue.js), которые выполняют основную часть своей работы во время выполнения, то есть в браузере.
Сам компилятор написан на JavaScript. Его исходный код распространяется под лицензией MIT и размещён на GitHub. Среди сопоставимых фронтенд-библиотек Svelte имеет один из самых маленьких размеров итоговой сборки (bundle) — всего 2 КБ.
История Предшественником Svelte является Ractive.js, который Рич Харрис создал в 2013 году.
Версия 1 Svelte была написана на JavaScript и выпущена 29 ноября 2016 года. Название «Svelte» (в пер. с англ. — «изящный», «стройный») было выбрано Ричем Харрисом и его коллегами из The Guardian.
Версия 2 Svelte была выпущена 19 апреля 2018 года. В ней были исправлены ошибки, допущенные в предыдущей версии, например, двойные фигурные скобки были заменены на одинарные.
Версия 3 Svelte была написана на TypeScript и выпущена 21 апреля 2019 года. В ней был переосмыслен подход к реактивности: компилятор стал отслеживать присваивания переменных «за кулисами».
Веб-фреймворк SvelteKit был анонсирован в октябре 2020 года и вошёл в стадию бета-тестирования в марте 2021 года. SvelteKit 1.0 был выпущен в декабре 2022 года после двух лет разработки.
Версия 4 Svelte была выпущена 22 июня 2023 года. Это был релиз, направленный на поддержку, он стал меньше и быстрее третьей версии. В рамках этого релиза был проведён внутренний рефакторинг с TypeScript обратно на JavaScript с использованием аннотаций типов JSDoc. Это вызвало недоумение в сообществе разработчиков, на что ответил создатель Svelte Рич Харрис.
Версия 5 Svelte была выпущена 19 октября 2024 года на Svelte Summit Fall 2024. Svelte 5 стал полной переработкой фреймворка, изменив ключевые концепции, такие как реактивность и переиспользование кода. Его основная особенность, руны (runes), переработала способ объявления и использования реактивного состояния. Руны — макросы, похожие на функции, которые используются для объявления реактивного состояния или кода, использующего реактивные состояния. Компилятор использует эти руны для обозначения значений, которые могут изменяться и от которых зависят другие состояния или DOM. Svelte 5 также представил сниппеты — переиспользуемые фрагменты кода, которые определяются один раз и могут использоваться в любом месте компонента. Изначально Svelte 5 был встречен неоднозначно из-за множества изменений и, как следствие, устаревания некоторых подходов, в основном из-за введения рун. Однако большая часть споров утихла после первоначального анонса рун и дальнейшей доработки Svelte 5.
Ключевые ранние участники команды Svelte: Conduitry присоединился с выходом Svelte 1, Тан Ли Хау — в 2019 году, а Бен МакКанн — в 2020 году. Рич Харрис и Саймон Хольтхаузен присоединились к компании Vercel для работы над Svelte на полную ставку в 2022 году. Доминик Ганнауэй перешёл в Vercel из основной команды React для работы над Svelte в 2023 году.
Синтаксис Приложения и компоненты Svelte определяются в файлах с расширением `.svelte` — это HTML-файлы, расширенные синтаксисом шаблонов, основанным на JavaScript и похожим на JSX.
Основные возможности Svelte доступны через руны, которые синтаксически выглядят как функции, но используются компилятором как макросы. К ним относятся: Руна $state, используемая для объявления реактивного состояния Руна $derived, используемая для объявления реактивного состояния, производного от одного или нескольких других состояний Руна $effect, используемая для объявления кода, который перезапускается при изменении его зависимостей
Кроме того, синтаксис { } можно использовать для вставки выражений в HTML-элементы и компоненты, подобно шаблонным строкам в 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.
Команда Svelte также поддерживает ряд интеграций для популярных программных проектов, включая интеграции для Vite, Rollup, Webpack, TypeScript, Visual Studio Code, инструментов разработчика Chrome, ESLint и Prettier. Ряд внешних проектов, таких как Storybook, также создали интеграции со Svelte и SvelteKit.
Влияние Vue.js смоделировал свой API и однофайловые компоненты по образцу Ractive.js, предшественника Svelte.
Признание Svelte получил широкое признание среди разработчиков. Он занял первые места в нескольких крупных опросах разработчиков, был назван самым «любимым» веб-фреймворком в опросе Stack Overflow 2021 года и фронтенд-фреймворком с самыми удовлетворёнными разработчиками в опросе State of JS 2020 года.
Svelte был внедрён рядом крупных веб-компаний, включая The New York Times, Google, Apple, Spotify, Square, Yahoo!, ByteDance, Rakuten, Bloomberg, Reuters, IKEA, Facebook и Brave.
Группа сообщества, известная как Svelte Society, проводит конференцию Svelte Summit, выпускает новостную рассылку о Svelte, ведёт подкаст и поддерживает каталог инструментов, компонентов и шаблонов для Svelte.
См. также
Библиотека JavaScript Сравнение JavaScript-фреймворков
Примечания
Ссылки
Категория:Веб-фреймворки на JavaScript Категория:Веб-разработка Категория:Программное обеспечение с лицензией MIT