Деление по функциональности, границы модулей, направление зависимостей, Feature-Sliced Design.
index.Практика. Переструктурировать учебный проект по функциональности, оставить импорт модулей только через публичный index.
Практика. Описать архитектуру фронтенда продукта (слои, границы, состояние, правила зависимостей) в design doc и включить проверку границ в CI.
Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.
Цель — чтобы изменение в одной функции не задевало остальные и новый человек быстро находил код. Основа — разделение по функциональности (features, страницы, сущности), а не по типу файлов (components, utils, hooks), явные публичные API модулей, направление…
Полный разборСначала — локальное состояние и подъём к общему предку. Context — передать редко меняющиеся данные глубоко (тема, пользователь, язык) без прокидывания props. Глобальное хранилище (Redux Toolkit, Zustand) — сложное клиентское состояние, которое меняют многие…
Полный разборПереписывать всё с нуля — главный риск: годы без новых функций и вечная погоня за старой системой. Работает постепенная замена (strangler fig): новый стек встраивается в старое приложение — по страницам или виджетам, — новые функции пишутся сразу на новом…
Полный разборМонорепозиторий хранит несколько приложений и пакетов (дизайн-система, клиент API, утилиты) в одном репозитории: атомарные изменения сразу во всех потребителях, единые версии зависимостей и инструменты. Работает на workspaces пакетного менеджера (pnpm) и…
Полный разборВ URL хранят то, что должно переживать перезагрузку, делиться ссылкой и работать с кнопкой «назад»: фильтры, сортировку, страницу, открытую вкладку, поисковый запрос. URL становится источником истины — компонент читает параметры, а меняет их через навигацию…
Полный разборRedux — одно хранилище, состояние меняется только через action (объект «что произошло»), а reducer — чистая функция (state, action) → новое state: без побочных эффектов, поэтому изменения предсказуемы, воспроизводимы и видны в Redux DevTools (история…
Полный разборПользовательский хук — функция с именем use…, внутри которой вызываются другие хуки; так выносят повторяющуюся логику (подписка на размер окна, debounce, загрузка данных, работа с формой). Каждый вызов хука получает своё состояние. Возвращаемые функции и…
Полный разборТокены — именованные значения дизайна: цвета, размеры шрифтов, отступы, радиусы, тени, длительности анимаций. Есть базовые (blue-600 = #2563eb) и семантические (color-accent, color-text-muted, space-md), компоненты используют только семантические. Токены…
Полный разборStorybook — песочница, где компоненты разрабатывают и показывают изолированно от приложения: каждая история (story) — компонент в конкретном состоянии (обычная кнопка, загрузка, ошибка, длинный текст). Он служит живой документацией для дизайнеров и…
Полный разборПосле собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.