Учить Svelte - Курс Кода
Учить Svelte - Курс Кода — Изучайте Svelte и SvelteKit с интерактивным редактором и скомпилированным кодом рядом
Учить Svelte - Курс Кода — бесплатное приложение для iOS и Android, которое помогает изучать Svelte и SvelteKit на телефоне. Пишите компоненты в интерактивном редакторе с предпросмотром, смотрите JavaScript, в который их превращает компилятор, и проходите 41 курс — от первого реактивного значения до развернутого full-stack-приложения — вместе с AI-наставником.
- Цена
- Бесплатно, обновление до Pro
- Платформы
- iOS и Android
- Языки
- 22
- Возрастной рейтинг
- 4+
- Требуется
- iOS 15.1 или более поздняя версия
На этом экране не выполняется Svelte. Здесь выполняется то, что написал Svelte.
На первом уроке приложения девятистрочный компонент показан рядом с JavaScript, который компилятор сгенерировал для него. Нажмите +1 — и подсветятся строки, которые сработали: одна инвалидация, одно пересчитанное значение, два изменившихся текстовых узла — и больше ничего. Такова идея фреймворка, показанная до объяснения.
Что это
Учить Svelte - Курс Кода — бесплатное приложение для iOS и Android, которое обучает Svelte и SvelteKit в рамках 41 курса и 163 уроков, рассчитанных на уровни от начального до продвинутого. Обучение начинается с демонстрации компонента рядом с его скомпилированным JavaScript, а затем охватывает реактивность, props, stores, transitions, Svelte 5 runes и маршрутизацию SvelteKit, загрузку данных, form actions и развертывание. В приложение встроены интерактивный редактор с предпросмотром и AI-наставник.
В приложении
Как это выглядит
Курс
Что входит в курс Svelte
41 курс и 163 урока из собственного списка курсов приложения — от уровня A1 до C1, с итоговым full-stack проектом на SvelteKit.
Первые компоненты
Что такое Svelte и почему он использует другой подход, настройка проекта и создание первого компонента с реактивными переменными.
Props, шаблоны, события и привязка
Передача props, условные конструкции и циклы each в разметке, события DOM и пользовательские события, а также двусторонняя привязка с директивами bind:.
Жизненный цикл, stores и Context
onMount и onDestroy, writable, readable, derived и пользовательские stores, слоты и композиция, а также Context API.
Переходы, анимации и actions
Директивы переходов, директива animate, actions для повторно используемого поведения DOM, пользовательские переходы и stores движения spring и tweened.
Основы SvelteKit
Маршрутизация и страницы на основе файловой структуры, функции load, продвинутые layouts, form actions, API routes, серверные hooks и страницы ошибок.
Svelte 5 Runes
Введение в runes, props и snippets, продвинутые runes и подробный разбор работы реактивности Svelte.
SvelteKit в продакшене
SSR и prerendering, streaming, производительность, SEO и meta tags, безопасность, шаблоны auth, adapters и деплой.
Тестирование и Full-Stack
Модульные тесты с Vitest, end-to-end тесты с Playwright, сторонние библиотеки, управление состоянием в масштабных приложениях и full-stack приложение на SvelteKit.
Как это работает
Как проходит обучение
Приложение выстроено как путь от одного реактивного значения до готового к развертыванию приложения, и на каждом этапе чтение материала сочетается с практикой.
Сначала посмотрите результат работы компилятора
В начальной демонстрации небольшой компонент показан рядом с JavaScript, в который он компилируется. Скомпилированная часть была создана заранее и встроена в приложение, поэтому демонстрация работает без подключения.
Редактируйте компонент и смотрите предпросмотр
Уроки открывают редактор со вкладками HTML, CSS и JavaScript, а кнопка запуска отображает компонент в окне предпросмотра. Предпросмотр загружает компилятор Svelte через сеть, поэтому для него требуется подключение.
Проверьте, что вы всё усвоили
После каждой темы вас ждут тест и задания на написание кода, а AI-наставник может объяснить концепцию, предложить план обучения или проверить ваши знания по курсу. Weekly Code Challenge добавляет соревновательный раунд.
Что внутри
Что входит в приложение
41
Курсы, от A1 до C1
163 урока в рамках 41 курса: от настройки Svelte и первого компонента до stores, transitions, маршрутизации и hooks в SvelteKit, Svelte 5 runes, тестирования и итогового full-stack-проекта.
Скомпилированный код
Компонент рядом со скомпилированным кодом
Демонстрация при первом запуске показывает исходный код и сгенерированный JavaScript вместе, а также сравнивает количество обновленных текстовых узлов с количеством пересозданных элементов, поэтому стоимость обновления можно увидеть прямо на экране.
Предпросмотр
Интерактивный редактор с предпросмотром
Пишите разметку, стили и скрипт на отдельных вкладках и отображайте компонент на телефоне. В предпросмотре используется компилятор Svelte 4.2.19, поэтому код с Svelte 5 runes может не отображаться — его лучше читать и разбирать вместе с уроком.
AI
AI-наставник
На вкладке чата можно попросить рассказать о ключевых концепциях курса, дать советы для более быстрого обучения, составить тест или персональный план обучения, а также спросить об ошибке, которую вы не можете понять.
Еженедельный
Weekly Code Challenge
Регулярный соревновательный раунд, который можно проходить параллельно с уроками, с сериями занятий, отслеживанием прогресса и напоминаниями, чтобы поддерживать регулярный ритм.
Экзамен
Сертификат о завершении
Сдайте итоговый экзамен — и в сертификате будет указано ваше имя. Это подтверждение проделанной работы, а не аккредитованная квалификация.
Контекст
Что такое Svelte и чем он отличается от других способов создания веб-интерфейса?
Svelte — это фреймворк для создания пользовательских интерфейсов, в котором компоненты заранее компилируются в обычный JavaScript, напрямую обновляющий страницу, вместо загрузки большого runtime, который определяет изменения в браузере. Компонент представляет собой единый файл с разметкой, стилями и скриптом, а такой оператор, как count += 1, уже позволяет обновить экран. SvelteKit — это фреймворк приложений, построенный поверх Svelte: он добавляет маршрутизацию на основе файлов, загрузку данных на стороне сервера, обработку форм и адаптеры для развертывания. На практике это означает меньше шаблонного кода и меньшую дистанцию между кодом и тем, что появляется на странице.
Реактивность во время компиляцииприсваивание — это состояние
В Svelte компилятор преобразует обычное присваивание в код, который обновляет затронутые части страницы. Инструкция с меткой, начинающаяся с $:, пересчитывает значение при изменении используемых в ней значений, поэтому для производных данных не нужны вспомогательные функции.
Storesобщее состояние для нескольких компонентов
Writable store хранит значение, на которое могут подписаться несколько компонентов, а добавление префикса $ к его имени включает автоматическую подписку. Derived и custom stores расширяют этот подход, когда состояние нужно вычислять или оборачивать.
Runesсинтаксис Svelte 5
Svelte 5 заменяет значительную часть прежней магии компилятора явными функциями, такими как $state, $derived и $props, а также snippets для повторно используемой разметки. Оба стиля используются в реальных проектах, поэтому приложение преподает исходную модель и модель runes в рамках отдельных курсов.
SvelteKitмаршрутизация, данные и развертывание
Файл вроде +page.svelte становится маршрутом, функция load загружает данные до отображения страницы, form actions обрабатывают отправку данных на сервере, а адаптер упаковывает результат для статического хостинга, Node-сервера или serverless-платформы.
Подходит
Кому это подходит — а кому нет
Подойдёт, если вы
- Хотите изучать Svelte или SvelteKit короткими занятиями вместо длинных видеокурсов
- Знаете немного HTML и JavaScript и хотите понять, что меняет подход с compiler-first framework
- Интересуетесь тем, как работают реактивные обновления, и предпочитаете читать сгенерированный код, а не просто доверять ему
- Хотите пройти путь до маршрутизации, загрузки данных, auth и деплоя, а не останавливаться только на компонентах
- Любите спрашивать AI-наставника, почему фрагмент кода ведёт себя именно так
Это не тот инструмент, если вы
- Хотите запускать код Svelte 5 runes в предпросмотре, который использует компилятор Svelte 4.2.19
- Вам нужно собрать и задеплоить целый проект SvelteKit с телефона, хотя для этого по-прежнему требуется ноутбук
- Ожидаете, что всё будет бесплатным: первый курс бесплатен, а Pro открывает доступ к остальным
- Никогда не работали с HTML или JavaScript и хотите пройти общий курс программирования перед изучением framework
Вопросы
Часто задаваемые вопросы
Как изучать Svelte с телефона?
Выберите путь, который сочетает чтение и запуск кода: Svelte проще всего понять, когда меняешь значение и наблюдаешь, как реагирует страница. Учить Svelte - Курс Кода начинается с демонстрации скомпилированного вывода, а затем предлагает уроки с редактором HTML, CSS и JavaScript, предпросмотром и AI-наставником. Начать обучение можно бесплатно на iOS и Android.
Сложно ли новичку изучать Svelte?
Svelte часто считают доступным для изучения, потому что компоненты выглядят как обычные HTML, CSS и JavaScript, а присваивание обновляет экран. Сложности начинаются позже — со stores, жизненным циклом, разделением SvelteKit на серверную и клиентскую части и переходом к Svelte 5 runes. В Учить Svelte - Курс Кода 41 курс распределён по уровням от A1 до C1, поэтому эти темы появляются последовательно.
Что такое SvelteKit и обучает ли ему приложение?
SvelteKit — это application framework для Svelte, который добавляет маршрутизацию на основе файлов, загрузку данных на сервере, form actions, hooks и adapters для деплоя. В Учить Svelte - Курс Кода есть отдельные курсы по маршрутизации и страницам SvelteKit, загрузке данных, form actions, API routes, hooks, обработке ошибок, SSR и prerendering, streaming, безопасности и adapters.
Рассказывается ли в приложении о Svelte 5 runes?
Да. Учить Svelte - Курс Кода включает курсы о runes, props и snippets, а также продвинутых runes. Предпросмотр редактора сейчас компилирует код с помощью Svelte 4.2.19, поэтому код runes может не отображаться в предпросмотре — лучше изучать его по тексту урока.
Можно ли запускать код Svelte на телефоне?
Вы можете написать компонент в редакторе и отобразить его в предпросмотре. Предпросмотр Учить Svelte - Курс Кода загружает компилятор Svelte для сборки компонента, поэтому ему требуется подключение к сети. Начальная демонстрация скомпилированного вывода устроена иначе: её скомпилированный код поставляется внутри приложения и работает без сети.
Учить Svelte - Курс Кода бесплатен?
Приложение можно скачать бесплатно. Первый курс бесплатен и включает ежедневный лимит AI-наставника, а Pro открывает все курсы, убирает рекламу и предоставляет неограниченный доступ к AI-наставнику. Вы можете пройти настоящие уроки, прежде чем решать, стоит ли переходить на Pro.
Нужно ли сначала знать JavaScript?
Базовые знания HTML и JavaScript упростят первые курсы, потому что компонент Svelte — это просто эти языки в одном файле. Учить Svelte - Курс Кода начинается с объяснения того, что такое Svelte и как его настроить, а каждая концепция изложена простым языком. Однако это курс по framework, а не первый курс по программированию.
Какие платформы и языки он поддерживает?
Учить Svelte - Курс Кода работает на iOS через App Store и на Android через Google Play, а интерфейс доступен на 22 языках. Приложение имеет рейтинг 4+, поэтому материалы не содержат возрастных ограничений.
Начать
Скомпилируйте свой первый компонент уже сегодня
Начните бесплатно на iOS и Android — на 22 языках.
Другие приложения CoddyKit
Доступно на iOS и Android.