Продвинутый Frontend. В production на React

Конфигурация

Полная конфигурация проекта с нуля (Webpack). Настроим React, Typescript, Babel, scss, css modules, vite, prettier, также настроим тестовую среду, jest, rtl, storybook, loki, Cypress. Большое кол-во плагинов, лоадеров + грамотная декомпозиция конфига.

UI

Библиотека компонентов. Более 20 UI компонентов, включая модальные окна с порталами, выпадающие списки\меню, сайдбар, кнопки с разными темами, скелетоны, попапы, ленивые изображения, drawer, аватары, вертикальные и горизонтальные стеки и тд. Будем писать как свои решения так и опробуем headless библиотеки. Все компоненты будем делать доступными и семантичными.

Архитектура

Архитектура. Модули. Декомпозиция. Бизнес сущности. Слабое зацепление и сильная связность. Переиспользование. Конкретные примеры

Оптимизация

Оптимизация. Перерисовки и как с ними бороться. Анализ размера бандла. Использование бандл анализаторов. Асинхронные компоненты. Асинхронные Redux редюссеры. Reducer manager и создание небольшой библиотечки по внедрению асинхронных редюсеров. Изоляция модулей. Throttle и debounce. Инъекция эндпоинтов для лучшего code splitting. Научимся удобно асинхронно подгружать библиотеки, которые не нужны сразу (для анимаций и драг энд дропа).

Реальные задачи

Решение большого кол-ва задач из реальной разработки (фильтры, поиск, сортировки, бесконечные ленты, многоблочные страницы, комментарии и тд). Похоже на то, что было в фундаментальном курсе, но в разы больше и сделано технически интереснее.

Темы и стили

CSS модули и темизация. Создадим правильную структуру стилей и внедрим 3 цветовые темы нашего приложения (темная, светлая, оранжевая). Организуем стили так, что внедрить новую тему будет стоить 5 минут. Поработаем с scss

Сторибук и скриншотные тесты

С нуля настроим Storybook и будем описывать story case для каждого компонента и всех его состояний. Научимся делать скриншотные тесты, что позволит делать регрессионое тестирование нашего интерфейса.

Unit и RTL тесты

С нуля настроим тестовую среду для unit jest тестов и тестов на компоненты с помощью React Testing Library. Будем тестировать каждый разработанный модуль (селекторы, async thunks, редюсеры, компоненты).

С нуля настроим TS (tsconfig), подружим его с вебпаком, поработаем с union типами, дженерик компонентами, в общем тайпскрипта будет много.

Настроим ci pipeline, который будет прогонять за нас 3 вида тестов, делать сборку проекта, сторибука, прогонять код на линтеры. Также настроим pre commit хуки с помощью husky. Научимся генерировать отчеты для юнит и скриншотных тестов с информацией об успешных/упавших тестах и также научимся сразу их публиковать в ci github pages.

Также уделим внимание нормализации данных. Поговорим про саму концепцию и реализуем пример в коде. Поработаем с EntityAdapter.

При работе со списками важно не забыть про Perfomance. Поработаем с виртуальными списками, на примере посмотрим как можно повысить производительность.

Инфраструктуру настроим таким образом, чтобы и сам проект, и тестовое окружение, и сторибук умели использовать все фичи и работать как единное целое. (ts, css modules, глобальные переменные сборки и тд). 

В конце разработки мы проанализируем получившийся код и постараемся его отрефакторить, разберем слабые места, исправим их и поймем на конкретных примерах, как стоит декомпозировать и изолировать модули в приложении.

Вся работа с данными будет осуществляться с помощью Redux toolkit. Первую часть курса мы будем работать в классическом стиле и для работы с АПИ будем использовать axios инстанс, который заинжектим в асинк thunks. Также, для того чтобы понять и опробовать разные подходы мы опробуем RTK query. Научимся асинхронно инжектить новые эндпоинты, чтобы сохранять размер бандла минимальным (code splitting).

Для скриншотных/юнит/компонентных тестов научимся генерировать удобные отчеты, с помощью которых отслеживать работу тестов станет проще.

Реализуем свой скрипт, который будет генерировать нам фичи\сущности со всей структурой папок и файлов, в которых будет уже все необходимое содержимое.

В ходе разработки мы решим большое количество проблем, в живом формате будем искать решение, изучать документацию, правильно составлять запросы для поиска решения проблемы.

В конце разработки мигрируем проект с 17 на 18 версию реакта.

Научимся использовать различные дебаг инструменты: вкладка network, application в браузере, девтулзы реакта, редакса, бандланализаторы и тд.

Поговорим о кольцевых зависимостях, научимся их находить, а также реализуем свой babel плагин, который будет удалять лишний код из сборки.

Для сравнения бандлеров и расширения кругозора, помимо webpack, также настроим vite, подключим необходимые плагины.

Научимся писать скрипты для парсинг AST исходного кода нашего приложения. Работать с нодами абстрактного синтаксического дерева, изменять код во всем проекте глобально с помощью скриптов, создавать файлы, вносить в них нужное содержимое.

Арендуем облачный сервер. Настроим nginx. Добавим сертификат и настроим HTTPS. Подключим доменное имя. Научимся сжимать (gzip) бандл. Настроим проксирование запросов и сделаем скрипт для деплоя.

Научимся заполнять browserlist и посмотрим, как это влияет на бандл.

В зависимости от user agentа пользователя научимся отрисовывать мобильные/десктопные компоненты. Рассмотрим, как можно оптимизировать бандл с помощью методики. Научимся делать фабрики компонентов.

Поговорим про два самых часто используемых подхода в разработке Git flow и trunk based. Рассмотрим концепцию feature flags и настроим автоматику, которая умеет удалять неиспользуемые фича флаги. Реализуем динамические настройки пользователя. 

1. Модульная гибкая layout система с вложенными layout.

2. Одновременно в коде будет существовать и старый, и новый дизайн. Пользователь сможет сам выбрать в интерфейсе отображение. При этом дизайна - два, бизнес логика - одна.

3. Реализуем скрипт, который при выполнении удалит весь старый код. При этом правильно организуем кодовую базу, чтобы избавиться от ручного удаления и предоставить это автоматике.