Фреймворки и компоненты — страница 3
React, Vue, Web Components, состояние, навигация, работа с API, SSR, статическая генерация и организация проекта.
Материалы
- Наблюдатель и сохранение фильтра
Сохранять только настройки и корректно читать storage
- Vue Router и адрес карточки участника
Связать экран списка и карточку с маршрутом
- Общее состояние между маршрутами
Получать одну коллекцию из двух экранов
- Контракт API и проверка ответа
Отделить транспорт от модели участника
- Загрузка и отмена устаревшего запроса
Связать результат только с актуальным запросом
- Сохранение участника и ошибки формы
Сохранять изменение после подтверждения сервером
- Версия записи и конфликт редактирования
Объяснить 409 и сохранить черновик при конфликте
- Передача Vue-проекта и границы кабинета
Собрать договор запуска, доступа и проверки результата
- Svelte и SvelteKit: кабинет читателя
14 последовательных уроков: учебный проект «Маршрут», причины решений, проверенные API и честно обозначенные ограничения.
- Кабинет читателя и границы SvelteKit
Задаём модель «Маршрута», дерево проекта и границы серверного и браузерного состояния.
- Состояние и вычисления в Svelte 5
Добавляем локальные закладки, завершение и вычисляемый прогресс через runes.
- Компонент карточки и обратные вызовы
Выносим карточку урока в компонент с типизированными props и callback без скрытого владения прогрессом.
- Маршруты уроков и общая компоновка
Создаём адресный каталог, динамическую страницу урока и layout кабинета.
- Загрузка страницы и серверные данные
Разделяем universal load и server load, сериализацию и публичную проекцию личного состояния.
- SSR, prerender и личный кабинет
Выбираем режим формирования HTML для публичного каталога и персональных страниц.
- Браузерные эффекты и сохранение предпочтений
Сохраняем компактный вид в localStorage после onMount без обращения к window при SSR.
- Поиск и фильтры в URL
Делаем фильтр каталога воспроизводимым по ссылке и сохраняем нативную GET-форму.
- Серверные действия для закладок
Описываем POST-команду с проверкой сессии, идентификатора и желаемого состояния.
- Проверка формы и восстановление ввода
Добавляем профиль с серверной валидацией, сохранённым вводом и доступной ошибкой поля.
- Улучшение формы через use:enhance
Добавляем ожидание POST и обновление страницы, сохраняя работу формы без JavaScript.
- Сессия и владелец истории читателя
Связываем серверный репозиторий с непрозрачной сессией и проверяем владельца каждого действия.
- Ошибки кабинета и доступный интерфейс
Различаем ожидаемый отказ и сбой сервера, сохраняем семантику кнопок, статусы и фокус.
- Передача проекта «Маршрут»
Собираем конечные исходники, фиксируем ограничения хранения, сессий и будущего выпуска.
- Angular 22: кабинет заявок «Диспетчер»
16 последовательных уроков общего проекта с самостоятельным конечным архивом и честным статусом исполнения.