Введение в FSD архитектуру 0:00 Переход от обычной архитектуры к FSD. Видео будет сложным и непонятным, но полезным для понимания. Автор не претендует на экспертность, но делится своим опытом.
Структура приложения 1:48 Приложение состоит из шести слоев: процессес, пейджис, виджетс, фичи, энттис и шерит. Процессес не используется, пейджис содержит большие страницы, виджетс - компоненты, фичи - функциональность, энттис - бизнес-сущности, шерит - общие элементы.
Слайсы и сегменты 3:59 Слайсы делят сущности на более мелкие части. Слайсы могут быть в разных слоях: пейджис, виджетс, фичи, энттис. Сегменты помогают структурировать компоненты и логику.
Модули и модели 6:43 Модули содержат типы и состояния сущностей. Модели включают типы и состояния, а также API для работы с сущностями. Утилиты и хелперсы могут содержать кастомные хуки и логику.
Правила и примеры 9:20 Каждый слайс должен иметь точку входа и выхода. Нижележащие слои не могут использовать вышележащие, кроме шерит. Шерит содержит общие элементы и функции, которые могут использоваться в разных слоях.
Примеры и обсуждение 11:15 Примеры по FSD часто показывают легкие случаи. В готовом приложении будет применяться FSD архитектура. Автор приглашает на дискуссию в телеграм-канале для обсуждения и вопросов.
Введение в алисы 13:32 Алисы упрощают путь к файлам, делая его более читаемым и красивым. Пример: ввод "алис вид" в браузере открывает мини-гайд по добавлению алисы. Добавление алисы в TypeScript и конфиг JSON для корректной работы.
Установка библиотеки и настройка TypeScript 14:32 Установка библиотеки TypeScript для корректной работы с папками. Пример импорта компонента и его рефакторинг для упрощения пути. Создание папок и файлов для организации проекта.
Организация папок и файлов 15:30 Создание корневой папки "app" и добавление файлов провайдеров и лоаут. Перенос файлов в папку "app" для упрощения структуры проекта. Импорт и рефакторинг файлов для корректной работы.
Рефакторинг Redux и Redux Toolkit 17:38 Перенос Redux и Redux Toolkit в папку "app". Создание корневого редьюсера и импорт необходимых файлов. Удаление ненужных файлов и рефакторинг для улучшения структуры.
Организация страниц и компонентов 22:47 Создание папок для страниц и компонентов. Переименование и рефакторинг файлов для улучшения структуры. Разделение логики и компонентов для удобства чтения и рефакторинга.
Заключение и дальнейшие шаги 27:39 Обсуждение необходимости рефакторинга кода для улучшения архитектуры. Перенос компонентов в папку "ui" для упрощения структуры. Планы по дальнейшему рефакторингу и улучшению структуры проекта.
Завершение работы с компонентами 29:36 Удаление ненужных компонентов и импорт оставшихся. Определение компонентов как фич, таких как слайдер и категории. Обсуждение необходимости рефакторинга и обсуждения с коллегами.
Работа с виджетами 31:28 Завершение работы с пейджем и удаление ненужных файлов. Добавление логики в дополнительные компоненты для чистоты страницы. Добавление сущностей в виджеты, таких как баннерс лист и хедер.
Настройка индекс-файлов 34:16 Создание индекс-файлов для каждого слайса. Импорт и экспорт компонентов из модулей. Определение и импорт сущностей, таких как ньюс-лист.
Создание сущностей 36:28 Создание папки для сущностей и наполнение её компонентами. Рефакторинг сущностей для упрощения кода. Импорт и экспорт моделей и API.
Работа с категориями 40:08 Создание отдельного сервиса и API для категорий. Импорт и экспорт типов данных для категорий. Создание индекс-файлов и импорт необходимых компонентов.
Завершение работы с категориями и новостями 44:02 Импорт и экспорт сущностей и API для новостей. Преобразование категорий в API и проверка работы. Подключение API к редьюсерам и мидл-варам для корректной работы.
Настройка категорий и API 46:00 Подключение категорий и API. Настройка типов и интерфейсов. Удаление ненужных файлов и компонентов.
Работа с компонентами и хуками 47:19 Создание папок для компонентов и хуков. Перенос общих файлов в shared. Импорт и настройка стилей.
Перенос общих файлов в shared 49:07 Перенос констант, интерфейсов и фильтров в shared. Создание папок для изображений и скелетона. Перенос скелетона и изображений в UI.
Создание фич и компонентов 51:50 Создание папок для фич и компонентов. Перенос слайдера и других компонентов в UI. Рефакторинг и оптимизация кода.
Организация компонентов и фич 53:27 Перенос компонентов в соответствующие папки. Создание папок для моделей и интерфейсов. Оптимизация кода и удаление ненужных файлов.
Завершение рефакторинга 58:56 Создание папок для категорий и поиска. Перенос компонентов и моделей в соответствующие слои. Оптимизация и удаление ненужных файлов.
Финальные шаги и проверка 1:02:24 Удаление ненужных компонентов и файлов. Проверка и исправление импортов. Создание новых фич и компонентов для улучшения структуры.
Создание компонента для смены темы 1:03:30 Создаем новый компонент для смены темы. Выносим файлы и копируем их в новый компонент. Удаляем ненужные стили и добавляем иконки.
Настройка интерфейса 1:05:16 Обновляем интерфейс и добавляем путь для отображения. Проверяем и исправляем все импорты и структуры. Удаляем ненужные элементы и проверяем все компоненты.
Проверка и исправление ошибок 1:07:28 Проверяем все импорты и исправляем ошибки. Удаляем ненужные элементы и проверяем все компоненты. Проверяем и исправляем все импорты и структуры.
Тестирование и запуск 1:14:33 Запускаем приложение и проверяем его работу. Исправляем ошибки и проверяем все компоненты. Переходим на ветку девелоп и проверяем все изменения.
Финальная проверка и релиз 1:18:03 Назначаем ревьюверов и проверяем изменения. Переходим в продакшн и проверяем билд. Исправляем ошибки и проверяем все компоненты.
Заключение и планы на будущее 1:22:52 Обсуждаем архитектуру приложения и миграцию на FSD. Планируем рефакторинг приложения и добавление новых функций. Призываем подписываться на телеграм-канал и ютуб-канал для получения обновлений.
