Svelte: Обзор

Svelte — компилятор, который меняет правила игры 🧡

Привет! Я Яша, и сегодня мы начинаем один из самых захватывающих курсов — Svelte. Если ты раньше работал с React или Vue, приготовься к тому, что твой мозг немного взорвётся. В хорошем смысле 🤯

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

---

Что такое Svelte? 🤔

Svelte — это инструмент для создания интерактивных пользовательских интерфейсов. Но в отличие от React и Vue, Svelte — это компилятор, а не runtime библиотека.

Традиционные фреймворки работают так:

1. Браузер загружает твой код + код фреймворка (~45kb для React)
2. Фреймворк запускается в браузере
3. При изменении данных обновляется виртуальный DOM
4. Виртуальный DOM сравнивается с реальным (diffing)
5. Реальный DOM обновляется

Svelte работает иначе:

1. Ты пишешь .svelte файлы
2. Компилятор Svelte анализирует код во время сборки
3. Генерируется ванильный JavaScript (без рантайма фреймворка!)
4. В браузере работает только твой код + ~1.7kb адаптера
5. При изменении данных обновляются точно нужные DOM-узлы

Результат? Молниеносная производительность и крошечный размер бандла 🚀

---

Философия: компилятор, а не фреймворк 🔬

Rich Harris (создатель Svelte) сформулировал ключевую идею так:

«Фреймворки — это не инструменты для организации кода, а инструменты для организации ума»

Но он пошёл дальше и спросил: а зачем вообще платить за фреймворк в рантайме?

Представь разницу между:

• Переводчик-синхронист — переводит на ходу, требует постоянного присутствия (это React/Vue)
• Переводчик-редактор — переводит текст заранее, результат работает без него (это Svelte)

Svelte читает твой декларативный код и генерирует императивные DOM-обновления — точечные, эффективные, без посредников.

<!-- Это ты пишешь (декларативно) -->
<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Нажато {count} раз
</button>

// Это что компилятор генерирует (императивно)
let count = 0;
button.addEventListener('click', () => {
  count++;
  button_text.data = `Нажато ${count} раз`;
});

Чисто, эффективно, без виртуального DOM!

---

История Svelte 📅

2016 → Svelte v1 («Магически исчезающий фреймворк»)
       Rich Harris создал его, работая в The Guardian
       Первая идея: компилятор вместо рантайма

2018 → Svelte v2
       Улучшенный синтаксис, лучший компилятор
       Всё ещё мало известен

2019 → Svelte v3 ⭐ (Большой перезапуск)
       Революционный синтаксис с реактивностью
       $: reactive declarations
       Доклад «Rethinking Reactivity» — >1М просмотров
       Svelte взлетел в популярности!

2021 → SvelteKit (beta)
       Полностековый фреймворк на основе Svelte
       Аналог Next.js для React

2022 → SvelteKit 1.0
       Стабильный релиз, production-ready

2023 → Svelte 4
       Улучшения DX, легче и быстрее

2024 → Svelte 5 🚀 (Runes революция)
       Полностью новая система реактивности
       $state, $derived, $effect, $props
       Лучшая TypeScript поддержка
       Обратная совместимость с v4

---

Svelte 5 и революция Runes ✨

Svelte 5 представил Runes — новую систему реактивности, вдохновлённую сигналами (signals). Если в Svelte 4 реактивность была «магией компилятора», то в Svelte 5 она явная и предсказуемая:

<script>
  // Svelte 4 — неявная реактивность
  let count = 0;           // магия компилятора делала это реактивным
  $: doubled = count * 2;  // реактивное объявление
</script>

<script>
  // Svelte 5 — явные Runes
  let count = $state(0);             // явно: это реактивное состояние
  let doubled = $derived(count * 2); // явно: это вычисляемое значение

  $effect(() => {                    // явно: это побочный эффект
    console.log('count изменился:', count);
  });
</script>

Четыре основных Rune:

Rune	Аналог в Vue	Аналог в React	Назначение
$state()	ref()	useState()	Реактивное состояние
$derived()	computed()	useMemo()	Вычисляемые значения
$effect()	watchEffect()	useEffect()	Побочные эффекты
$props()	defineProps()	props	Пропсы компонента

---

SvelteKit — полностековый фреймворк 🚀

Если Svelte — это «jQuery на стероидах», то SvelteKit — это Next.js для Svelte-разработчиков. Это полноценный метафреймворк для создания веб-приложений любой сложности:

SvelteKit возможности:
├── 📄 File-based routing (как Next.js App Router)
├── 🔄 SSR, SSG, SPA — любой режим рендеринга
├── ⚡ API Routes (серверные endpoints)
├── 📝 Form Actions (без JavaScript!)
├── 🔒 Hooks (middleware)
├── 🌍 Адаптеры: Vercel, Netlify, Node, Cloudflare
└── 🎯 TypeScript из коробки

Структура SvelteKit проекта:

src/
├── routes/
│   ├── +page.svelte       ← страница /
│   ├── +layout.svelte     ← общий лэйаут
│   ├── +page.server.ts    ← серверная логика (load)
│   ├── +server.ts         ← API endpoint
│   └── about/
│       └── +page.svelte   ← /about
└── lib/
    ├── components/        ← переиспользуемые компоненты
    └── stores.ts          ← глобальное состояние

---

Экосистема Svelte 🌍

Svelte Экосистема
├── 🚀 SvelteKit — full-stack фреймворк
├── 📱 Svelte Native — мобильные приложения (NativeScript)
├── 🎨 Svelte Transitions — встроенные анимации и переходы
├── 💾 Svelte Stores — глобальное состояние
│   ├── writable() — изменяемое хранилище
│   ├── readable() — только для чтения
│   └── derived() — вычисляемые хранилища
├── 🎭 Svelte Motion — tweened и spring анимации
├── 🔧 Vite — рекомендуемый сборщик
├── 🧪 Vitest + Testing Library — тестирование
└── 📦 UI библиотеки
    ├── shadcn-svelte (headless + Tailwind)
    ├── Flowbite Svelte
    ├── Skeleton UI
    └── Melt UI (headless)

---

Svelte vs React vs Vue vs Angular 📊

Критерий	Svelte	React	Vue	Angular
Тип	Компилятор	Runtime	Runtime	Full FW
Рантайм	~1.7kb	~45kb	~34kb	~103kb
Virtual DOM	❌	✅	✅	✅
Производительность	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
Кривая обучения	🟢 Лёгкая	🟡 Средняя	🟢 Лёгкая	🔴 Крутая
TypeScript	✅ нативно	✅	✅	✅ нативно
Full-stack	SvelteKit	Next.js	Nuxt	Analog
Шаблоны	.svelte	JSX	SFC	HTML+TS
Состояние	Runes/Stores	Hooks	Composition	Services
Сообщество	🌱 Растёт	🌳 Огромное	🌳 Большое	🌳 Большое
Создатель	Rich Harris	Meta	Evan You	Google

---

30 уроков курса 🗺️

№	Тема	Что изучим
📖	Обзор	Что такое Svelte, история, экосистема
1	Что такое Svelte	Компилятор vs фреймворк, философия
2	Установка и Vite	Настройка проекта, структура файлов
3	Базовый синтаксис	.svelte файлы, интерполяция, атрибуты
4	Реактивность	Runes: $state, $derived, $effect
5	Props	$props(), передача данных вниз
6	События	on:click, dispatch, кастомные события
7	Привязки	bind:value, bind:checked, bind:this
8	Lifecycle	onMount, onDestroy, beforeUpdate
9	Stores	writable, readable, derived
10	Derived Stores	Кастомные хранилища и паттерны
11	Логические блоки	{#if}, {#each}, {#await}
12	Переходы	transition:, animate:, motion
13	Actions	use: директивы, кастомные actions
14	Slots и Snippets	Svelte 5: {#snippet}, {@render}
15	Context API	setContext, getContext
16	Спецэлементы	svelte:head, svelte:self, svelte:component
17	TypeScript	<script lang="ts">, типизация компонентов
18	Тестирование	Vitest, Testing Library, компонентные тесты
19	Svelte 5: Runes	Глубокое погружение в новую реактивность
20	Svelte 5: Реактивность	Паттерны работы с Runes
21	SvelteKit: Введение	Что такое SvelteKit, структура проекта
22	SvelteKit: Маршрутизация	File-based routing, layouts, groups
23	SvelteKit: load()	Загрузка данных, серверные функции
24	SvelteKit: Forms	Form Actions, прогрессивное улучшение
25	SvelteKit: API	Server endpoints, REST и +server.ts
26	SvelteKit: Auth	Аутентификация, сессии, защита роутов
27	SvelteKit: Деплой	Адаптеры, Vercel, Netlify, Node
28	Производительность	Оптимизация, lazy loading, profiling
29	Svelte vs React/Vue	Когда что выбирать, миграция
30	Будущее Svelte	Svelte 6, roadmap, сообщество

---

Что дальше? 👉

Курс построен от простого к сложному. Я советую идти по порядку, но если ты уже знаешь основы, можешь прыгнуть прямо к интересующей теме.

Начнём с урока 1: Что такое Svelte: компилятор, а не фреймворк 🚀

Там я подробно объясню философию Svelte, покажу как работает компилятор, и ты сразу почувствуешь что-то особенное в этом инструменте. Погнали! 🧡