Видео посвящено практической демонстрации разработки чат-приложения на Vue.js с использованием кастомных кук, WebSocket, Pinia (store) и API-интерфейсов. Рассматривается архитектура приложения, жизненный цикл куков и стора, а также распространённые проблемы и их решения при реализации обмена сообщениями и управлении состояниями. Видео будет полезно фронтенд-разработчикам, изучающим Vue3, Pinia, работу с API и WebSocket, а также тем, кто хочет понять, как структурировать и масштабировать приложения с использованием современных подходов. Зритель узнает, как создать удобный, расширяемый store, работать с куками и WebSocket, правильно организовать структуру компонентов и взаимодействие между ними. Также даётся обзор практик по управлению секретами в GitHub Actions и рекомендации по работе с состояниями и жизненными циклами Vue-компонентов.
Хронологическое резюме
- 00:00 - 01:56 — Вводная демонстрация функционала и текущего статуса проекта
Обсуждается причины написания проекта с нуля, показан пример чата с двумя аккаунтами и диалогом между ними. Перечислены отсутствующие функции: страница пользователя, регистрация, уведомления, отметка просмотра сообщений, создание групп.
- 01:56 - 05:41 — Архитектурный обзор frontend-составляющей
Пояснен упрощённый layout, использование router-view и глобального error-компонента с teleport. Объяснён адаптивный CSS с переменными перемещений (variables CSS) и устройство роутинга с разными layout-компонентами. Рассказано про watcher, следящий за куками и реализующий редиректы в зависимости от наличия авторизации.
- 05:41 - 10:58 — API и composables, обработка ошибок
Показана автоматическая генерация документации API, обсуждается стратегия объединения логики в composables (useAu). Рассказано про жизненный цикл composables и применение реактивных ref. Демонстрируется, как error-компонент реагирует на изменения в глобальной error-переменной с помощью teleport и отображает ошибки в UI.
- 10:58 - 15:16 — Организация WebSocket подключения и его жизненный цикл
Объясняется важность открывать и использовать единственное WebSocket соединение через provide/inject, чтобы избежать лишних соединений. Реализация Hub (хаба) с отслеживанием состояния подключения и его переиспользованием во всех компонентах, использующих чат.
- 15:16 - 22:02 — Структура API-инстансов и composables
Обзор базовых composables для работы с API и валидацией, использование ref и reactive в composables. Объяснения, почему стоит избегать библиотек для куков и использовать кастомные решения.
- 22:02 - 31:13 — Введение в Pinia для хранения состояния
Объяснено, что такое store, его функции, state, getters, actions. Рассмотрены различные способы инициализации стора, реактивное отслеживание и мутации состояния. Продемонстрировано, как можно использовать store как глобальное хранилище, доступное в любом месте приложения.
- 31:13 - 47:59 — Особенности работы с Pinia: распаковка, типизация и асинхронные действия
Показана глубокая работа с Pinia: разбор ошибок и нюансов распаковки реактивных переменных (storeToRefs), типизация state и взаимодействие с API через actions, пример организации функции getMe для получения информации о пользователе.
- 47:59 - 56:57 — Реализация логики обновления user ID при смене JWT токена
Демонстрируется, как следить за изменениями JWT токена в куках и при обновлении токена заново запрашивать данные пользователя через getMe, обновляя store. Рассмотрена проблема гонок данных (race condition), возникающая из-за provide/inject, способ её обхода с помощью ref и условных проверок на null.
- 56:57 - 01:01:22 — Передача user ID через store и оптимизация компонентов
Обсуждается передача user ID из store в компоненты чата, убирается излишняя передача пропсов, что упрощает структуру приложения и снижает связанность компонентов.
- 01:01:22 - 01:04:10 — Управление стейтом на примере реального store с картой и actions
Поясняется, как стоит структурировать большой store, разбивая по семантическим единицам, используются обёртки функций для удобства и поддержания чистоты кода.
- 01:04:10 - 01:08:30 — Работа с секретами в GitHub: безопасность и CI/CD практика
Рассказывается про хранение секретов в GitHub Actions, почему нельзя коммитить API ключи, как правильно конфигурировать CI/CD для безопасного использования секретов на удаленных серверах.
- 01:08:30 - 01:12:23 — Итоги курса и планы на будущее
Подводятся итоги обучения, рассматриваются планы на изучение библиотек UI компонентов (например, Quasar). Анонсируется объединение с React группой и на обсуждение тем: Figma, Swagger, Docker. Призыв к участникам продолжать обучение и практику.
Ключевые моменты
- ⚡ Использование кастомных composables (useAu) для логической группировки API-вызовов и работы с куками
- 🌐 Организация единого WebSocket-соединения через provide/inject для эффективного использования ресурсов
- 🔄 Pinia как современный state manager с реактивным состоянием, getters и actions, позволяющий масштабировать приложение
- 🛠️ Проблемы гонок данных (race condition) при provide/inject и способы их обхода разъяснены на примере работы с API-инстансами
- 🔐 Безопасное хранение API ключей и секретов в GitHub Actions для безопасного CI/CD процесса
## Часто задаваемые вопросы (FAQ)
1. Зачем использовать кастомные composables вместо сторонних библиотек?
Кастомные composables дают лучшее понимание и контроль над логикой, уменьшает зависимость от сторонних решений и позволяет точно настроить жизненный цикл.
2. Почему важно иметь единственное WebSocket-соединение?
Чтобы минимизировать нагрузку на сервер и клиент, избежать множества открытых соединений и повысить производительность.
3. Как правильно использовать Pinia для глобального состояния?
Нужно создавать отдельные стора с clearly defined state, getters и actions, по возможности разбивать большие стора на модули, использовать reactive переменные и распаковку через storeToRefs.
4. Почему возникают гонки данных с provide/inject и как их избежать?
Provide/inject может быть вызван раньше, чем происходит инициализация необходимых данных, что приводит к undefined. Решение — использовать ref и условные проверки, либо инициализировать provide до загрузки приложения через boot-файлы.
5. Как хранить и использовать секреты в GitHub Actions?
Секреты добавляются через интерфейс GitHub и автоматически подставляются в процесс сборки без прямого хранения в репозитории, что обеспечивает их безопасность.
Заключение
В видео глубоко разобрана архитектура чат-приложения на Vue3 с использованием современных подходов к управлению состояниями через Pinia, обработке авторизации через куки и JWT, а также обмену сообщениями через WebSocket. Практические примеры раскрывают, как организовать правильный жизненный цикл данных в composables и предотвратить распространённые ошибки, например, гонки данных при provide/inject. Особое внимание уделено безопасности при работе с API ключами в CI/CD процессах. Полученные знания позволят строить масштабируемые фронтенд-приложения с чистой архитектурой и удобным управлением состояниями.
Рекомендации для дальнейших действий:
- Экспериментируйте с созданием и использованием composables и Pinia-store для разделения логики приложения.
- Внедряйте централизованное управление WebSocket соединениями в реальных проектах.
- Изучите безопасные методы работы с секретами в CI/CD на практике.
- Ознакомьтесь с библиотеками компонент (например, Quasar) для ускорения разработки UI.
- Продолжайте практиковаться в построении компонентов с реактивным состоянием и правильной передачей данных.