Веб-разработка

Учебник Svelte и SvelteKit для начинающих

24 урока · 6 разделов · бесплатно, без регистрации

Начать с первого урока

Svelte — это компилируемый UI-фреймворк, который исчезает к моменту запуска: основную работу он делает на этапе сборки, а в браузер отдаёт компактный адресный JavaScript без виртуального DOM. Этот курс ведёт вас от первого компонента до полноценного приложения на SvelteKit.

Вы освоите систему рун Svelte 5 ($state, $derived, $effect), научитесь строить переиспользуемые компоненты, управлять общим состоянием и разворачивать приложения с файловой маршрутизацией, загрузкой данных и серверными формами. Каждый урок содержит разбор под капотом, запускаемые примеры на чистом JavaScript и ASCII-диаграммы.

Курс «Svelte и SvelteKit» состоит из 6 разделов и 24 уроков: Введение и компилятор, Реактивность и руны, Компоненты и пропсы, Логика шаблонов и события, Stores и управление состоянием и SvelteKit, роутинг и деплой. Уроки идут по порядку — от основ к более сложным темам, в каждом есть объяснение с примерами, а в конце — вопросы для самопроверки. К урокам привязаны задачи с автоматической проверкой: прочитали тему — сразу закрепили её кодом.

Программа курса

  1. 1 Введение и компилятор

    1. Что такое Svelte: фреймворк, который исчезает

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

    2. Svelte против React и Vue: компилятор вместо виртуального DOM

      Чем Svelte отличается от React и Vue: отказ от виртуального DOM в пользу скомпилированных адресных обновлений.

    3. Первый компонент: один файл .svelte

      Структура файла .svelte: скрипт, разметка и изолированные стили в одном компоненте.

    4. Создание проекта: sv create и Vite

      Создание Svelte-проекта командой sv create, работа на Vite с горячей перезагрузкой и сборка для прода.

  2. 2 Реактивность и руны

    1. Руна $state: реактивное состояние

      Руна $state в Svelte 5: реактивное состояние, которое меняется как обычная переменная.

    2. Руна $derived: производные значения

      Руна $derived: вычисляемые значения с мемоизацией вместо ручной синхронизации данных.

    3. Руна $effect: побочные эффекты

      Руна $effect: побочные действия в ответ на изменение состояния, авто-зависимости и очистка.

    4. Ловушки реактивности и как их избегать

      Частые ловушки реактивности Svelte: деструктуризация, снимки значений и руны в обычных файлах.

  3. 3 Компоненты и пропсы

    1. Пропсы и руна $props

      Руна $props: объявление входных данных компонента, значения по умолчанию и однонаправленный поток.

    2. События компонентов через колбэки

      События компонентов в Svelte 5 через пропсы-колбэки вместо createEventDispatcher.

    3. Двусторонняя связь: руна $bindable

      Руна $bindable: двусторонняя связь пропсов через директиву bind: и когда её применять.

    4. Сниппеты и children вместо слотов

      Сниппеты Svelte 5 и проп children пришли на смену слотам для переиспользуемой разметки.

  4. 4 Логика шаблонов и события

    1. Логика шаблонов: if, each и await

      Логические блоки {#if}, {#each} и {#await} и важность ключей в циклах.

    2. Обработка событий DOM

      Обработка DOM-событий в Svelte 5 через атрибуты onclick, oninput, onsubmit.

    3. Связывание форм через bind:

      Директива bind: для двусторонней связи полей форм с реактивным состоянием.

    4. Анимации и переходы

      Встроенные переходы Svelte: fade, fly, slide для анимации появления и исчезновения элементов.

  5. 5 Stores и управление состоянием

    1. Общее состояние через .svelte.js-модули

      Общее реактивное состояние между компонентами через руны в .svelte.js-модулях.

    2. Классические сторы: writable, readable, derived

      Классические сторы Svelte: writable, readable, derived и когда они предпочтительнее рун.

    3. Контекст: setContext и getContext

      Контекст setContext/getContext: передача данных по дереву компонентов без prop-drilling.

  6. 6 SvelteKit, роутинг и деплой

    1. Что такое SvelteKit

      SvelteKit — метафреймворк над Svelte: роутинг, загрузка данных, SSR и адаптеры деплоя.

    2. Файловая маршрутизация

      Файловая маршрутизация SvelteKit: папки в src/routes, +page.svelte, динамические сегменты и лейауты.

    3. Загрузка данных: функция load

      Функция load в SvelteKit: загрузка данных страницы до рендера, +page.js против +page.server.js.

    4. Формы и form actions

      Form actions в SvelteKit: обработка форм на сервере, прогрессивное улучшение и use:enhance.

    5. Деплой и адаптеры

      Деплой SvelteKit через адаптеры: Vercel, Node, статический хостинг и режимы рендеринга.