Что такое Svelte и зачем он компилируется
Изучите подход Svelte с компилятором в основе и его отличия от React и Vue
«Что такое Svelte и зачем он компилируется» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Добро пожаловать в Svelte
Svelte — это UI-фреймворк, ориентированный на компиляцию. В отличие от React и Vue, Svelte выполняет большую часть работы на этапе сборки, а не во время выполнения.
Без виртуального DOM
React сравнивает виртуальный DOM во время выполнения. Svelte вместо этого компилирует компоненты в высокооптимизированный обычный JavaScript, который напрямую обновляет DOM.
Меньше кода отправляется пользователю
Поскольку Svelte отправляет скомпилированный результат, браузер обычно получает меньше JavaScript-кода. Размеры пакетов очень малы.
Формат файла компонента
Компонент Svelte находится в файле .svelte, который содержит три необязательных раздела: скрипт, разметку и стили.
<script>
let name = "world";
</script>
<h1>Hello {name}!</h1>Реактивность через присваивание
В Svelte простое присваивание переменной нового значения запускает обновление интерфейса. Вызов setState не требуется.
<script>
let count = 0;
function inc() { count = count + 1; }
</script>
<button on:click={inc}>{count}</button>Компоненты в одном файле
Разметка, логика и локальные стили находятся в одном файле. Такое совместное размещение упрощает понимание компонентов и их рефакторинг.
Локальные стили по умолчанию
Любые стили, которые Вы записываете в <style>, применяются только к этому компоненту. Конфликты CSS между страницами больше не возникают.
<style>
p { color: tomato; }
</style>
<p>I am tomato</p>Преимущества производительности
Поскольку во время выполнения нет накладных расходов фреймворка, приложения Svelte на недорогих устройствах обычно работают быстрее, чем аналогичные приложения на React или Vue.
SvelteKit — метафреймворк
SvelteKit расширяет Svelte, добавляя маршрутизацию, SSR и загрузку данных. В большинстве производственных приложений на Svelte используется SvelteKit.
Когда Svelte особенно хорош
Svelte идеально подходит для маркетинговых сайтов, информационных панелей, приложений, удобных для мобильных устройств, и любых проектов, где важны небольшой размер пакета и DX.
Итоги сравнения
React, Vue и Angular поставляют среду выполнения, а Svelte устраняет её на этапе компиляции. В результате пакеты становятся меньше, а мысленные модели — проще.
Быстрая проверка
Проверьте, насколько хорошо Вы поняли материал.
Итоги
Теперь Вы знаете, что Svelte компилирует компоненты, отправляет меньше JS-кода, использует локальные стили и служит основой SvelteKit для полноценных приложений. Далее Вы создадите свой первый проект.
Часто задаваемые вопросы
Урок «Что такое Svelte и зачем он компилируется» бесплатный?
Да — полный текст урока «Что такое Svelte и зачем он компилируется» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Что такое Svelte и зачем он компилируется»?
Изучите подход Svelte с компилятором в основе и его отличия от React и Vue Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Что такое Svelte и зачем он компилируется»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что такое Svelte и зачем он компилируется
- Создание проекта с помощью npm create svelte
- Структура проекта: src routes static
- Сервер разработки и горячая замена модулей