Этот курс охватывает создание двух приложений с использованием фреймворка Svelte. Большая часть функциональности создается с нуля без использования сторонних пакетов. В курсе рассматриваются такие темы, как валидация форм, пагинация, модальные окна, всплывающие окна, Snackbar и многое другое. Вы научитесь создавать все с нуля.
Курс предоставляет понятные объяснения работы Svelte на основе реальных проектов. Он поможет вам получить уверенность и навыки, необходимые для начала работы над любым проектом.
Студенты должны иметь базовые знания JavaScript, чтобы начать работу над этим курсом.
Что такое Svelte?
Svelte - это новый радикальный подход к созданию пользовательских интерфейсов. В отличие от традиционных фреймворков, таких как React и Vue, которые выполняют большую часть своей работы в браузере, Svelte переносит эту работу на этап компиляции при построении вашего приложения.
Вместо использования техник, таких как сравнение виртуального DOM, Svelte пишет код, который оперативно обновляет DOM при изменении состояния вашего приложения.
На первом приложении будет рассмотрены основные функции Svelte на реальном проекте - клоне Trello, простом приложении для управления задачами.
Во втором приложении студенты создадут приложение, похожее на Twitter, с нуля - часть разметки HTML не является частью курса (она будет предоставлена в материалах курса, чтобы сэкономить время и сосредоточиться исключительно на Svelte). Основное внимание в курсе уделяется программированию, а не написанию HTML-кода.
Курс начинается с подготовки базового макета приложения. Все дизайны - изображения и контент - предоставляются преподавателем.
Содержание можно кратко охарактеризовать следующими пунктами:
Подготовка макета: несколько лекций по подготовке HTML для вашего приложения и разделение макета на компоненты Svelte.
Синтаксис шаблонов: использование специального синтаксиса внутри HTML.
Директивы и события: привязка значений переменных.
Маршрутизация с использованием Svelte Kit: создание "многостраничного" приложения, настройка маршрутизации с различными стратегиями и навигация по маршрутам.
Реактивность: объяснение создания и управления реактивными данными.
Функции жизненного цикла: использование onMount и onDestroy.
Хранилища (stores): более сложные реактивные данные.
Анимации (переходы): добавление эффектов с использованием Svelte.
Аутентификационные формы: создание реактивной формы и привязка данных к вводу формы.
Пользовательская валидация форм: создание пользовательской валидации ввода/формы и обработка ошибок с нуля.
Firebase/Firestore: инициализация приложения Firebase (хранение данных).
Функции хранилища: важная часть проектов, позволяющая разделять код, относящийся к конкретным функциям, в их контексте.
Аутентификация: создание функциональности входа, регистрации и выхода из системы. Обучение аутентификации пользователя при посещении приложения.
Провайдер и контекст: создание компонента-провайдера, который может хранить данные на уровне корневого компонента и предоставлять их вложенным компонентам.
Всплывающие окна (snackbars): функциональность приложения, созданная с использованием провайдера, для отображения сообщений в виде всплывающих окон.
Создание "glide" (сообщения): создание нового "glide" и отображение его на главной странице. От этого момента студенты будут часто работать с Firebase/Firestore.
Функциональность подписки: возможность подписываться на других пользователей.
Отображение глайдов от пользователей, на которых вы подписаны: подписка на других пользователей позволяет видеть глайды (сообщения), которые они публикуют.
В процессе работы над указанными функциями студенты будут учиться и понимать особенности Svelte. Они узнают, как проектировать приложения и смогут создавать свои приложения с использованием Svelte.
