Front-end Development

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

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

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

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

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

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

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

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

Покроем разработанные модули E2E-тестами. Разберём кастомные команды, фикстуры, моки, стабы, интерцепторы, скипы. Научимся правильно выполнять запросы и писать end-to-end тесты.

Настроим code-style, ESLint, Stylelint. Реализуем собственный ESLint-плагин с 3 правилами для контроля архитектуры, изоляции модулей и доступов к слоям. Добавим автофикс и настроим Prettier.

Научимся правильно обрабатывать ошибки и реализуем ErrorBoundary. Посмотрим, как он работает на практике.

Настроим React Router v6 с авторизацией, ролями и ленивой загрузкой страниц для минимального размера бандла.

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

Настроим tsconfig, Webpack, разберём union-типы, generic-компоненты, типизацию Redux Toolkit и пропсов. TypeScript будет основой всего проекта.

Настроим Babel, подключим плагин для извлечения ключей переводов и создадим свой собственный плагин, разбирая структуру AST.

Настроим CI pipeline с тестами, сборкой и линтерами. Добавим Husky и pre-commit хуки. Генерация отчётов и публикация в GitHub Pages.

Разберём концепцию нормализации данных и реализуем её с помощью EntityAdapter.

Для повышения производительности списков реализуем виртуализацию рендеринга.

Настроим инфраструктуру проекта, чтобы сборка, тесты и Storybook работали как единая система (ts, css modules, глобальные переменные).

В конце разработки проанализируем код, улучшим архитектуру и декомпозицию модулей.

Работа с Redux Toolkit, axios-инстансом и RTK Query. Асинхронная инъекция эндпоинтов для code splitting.

Генерация отчётов по юнит, скриншотным и компонентным тестам для удобного анализа.

Реализуем CLI-скрипт для генерации фич и сущностей с готовой структурой и шаблонами файлов.

Разберём реальные задачи и примеры поиска решений, документацию и типичные проблемы.

Обновим проект с React 17 до 18, рассмотрим изменения и оптимизации.

Изучим инструменты отладки: Network, Application, React DevTools, Redux DevTools и анализаторы бандла.

Разберём кольцевые зависимости, научимся их находить и устранять. Реализуем Babel-плагин для удаления лишнего кода из сборки.

Помимо Webpack, настроим Vite и сравним их по производительности и удобству.

Напишем скрипты для парсинга AST и автоматического изменения кода по всему проекту.

Настроим сервер, Nginx, SSL, HTTPS, gzip, проксирование и автоматический деплой.

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

Реализуем адаптивные компоненты под разные user-agent. Оптимизируем бандл и создадим фабрики компонентов.

Рассмотрим подходы Git Flow и Trunk Based, внедрим feature flags и динамические настройки пользователя.

Полный редизайн проекта. Две версии дизайна (старый и новый), между которыми можно переключаться. Скрипт автоматически удалит старый код после миграции.