Вопросы по Архитектура фронтенда
Поможет уверенно пройти архитектурную секцию: объяснить SOLID и FSD на примерах, выбрать стратегию рендеринга, спроектировать фронтенд-систему и провести код-ревью вслух.
7 модулей 173 вопроса и задачи 3 билета
Проверьте себя: тест по архитектуре фронтенда
20 вопросов, 10 минут, уровень junior, middle или senior
SOLID и принципы
SOLID, DRY, KISS, YAGNI, связность и зацепление на примерах фронтенд-кода.
Урок: SOLID и принципы проектирования на фронтенде 7 мин- Связность и зацепление
- Композиция вместо наследования
- Закон Деметры в компоненте
- Инверсия зависимостей в React-приложении
- DIP и DI: в чём разница
- Когда дублирование лучше абстракции
- Когда DRY вредит
- Interface Segregation в пропсах
Ещё 23 вопроса и задачи
- Нарушение принципа Лисков
- Open/Closed на примере switch
- Чистая архитектура на фронтенде
- Работа с легаси
- MVC, MVVM и почему React не MVC
- Архитектура твоего проекта
- DRY, KISS, YAGNI
- Фасад и адаптер
- Модуль и синглтон
- Наблюдатель
- Стратегия
- SOLID целиком
- D - инверсия зависимостей
- I - разделение интерфейсов
- L - подстановка Лисков
- O - открыт для расширения
- S - единственная ответственность
- Расшифровка SOLID
- SOLID на примерах из фронтенда
- Как разбить большой компонент
- Нарушение SRP в компоненте
- Что на самом деле значит SRP
- YAGNI и KISS
Feature-Sliced Design
Слои, слайсы, сегменты, публичный API и правило импортов в FSD.
Урок: Feature-Sliced Design за 7 минут 7 мин- Сущность ссылается на сущность
- Две фичи нуждаются в общем
- Фича или сущность
- Минусы FSD
- Объясни FSD
- Слои FSD
- Проверка правил FSD
- Перевод легаси на FSD
Ещё 18 вопросов и задач
- Слой processes
- Слайс
- Разложи страницу товара по FSD
- Правило импортов FSD
- Порядок слоёв FSD
- Зачем публичный API слайса
- Альтернативы FSD
- Atomic Design
- Как удержать границы в коде
- Архитектура фронтенда
- Чем feature отличается от entity
- Правило импортов и почему нельзя соседа
- Слои FSD и что в каждом
- FSD и Next.js
- Публичный API слайса
- Что такое Feature-Sliced Design
- Когда FSD не нужен
- Сегменты слайса
Архитектура состояния
Серверное, клиентское, URL- и форменное состояние: где что хранить и чем.
Урок: Архитектура состояния: что, где и чем хранить 7 минSSR, SSG, ISR, гидрация
CSR, SSR, SSG, ISR, стриминг, React Server Components и цена гидрации.
Урок: CSR, SSR, SSG, ISR, стриминг и Server Components 8 минSystem design на фронте
Как спроектировать ленту, чат, поиск или редактор: от требований до узких мест.
Урок: System design на фронтенде: как пройти секцию 8 мин- Гонка запросов в автодополнении
- Транспорт для чата
- Совместное редактирование
- Пагинация для живой ленты
- График на 100 000 точек
- Debounce и throttle
- Спроектируй автодополнение поиска
- Спроектируй каталог с фильтрами
Ещё 25 вопросов и задач
- Спроектируй мессенджер
- Спроектируй совместный редактор
- Спроектируй ленту новостей
- Спроектируй дашборд в реальном времени
- Бюджет кадра
- Как вести секцию system design на фронте
- Этапы секции frontend system design
- Аутентификация и сессии
- Автодополнение поиска
- Календарь с бронированием
- Чат в реальном времени
- Оформление заказа с оплатой
- Дашборд с виджетами
- Дизайн-система
- Лента с бесконечной прокруткой
- Мультиязычность
- Микрофронтенды
- Мониторинг фронтенда
- Мультиарендное SaaS
- Уведомления
- Офлайн-режим
- Таблица на миллион строк
- Загрузка больших файлов
- Длинный список
- Пороги Core Web Vitals
Микрофронтенды и монорепо
Когда нужны микрофронтенды, Module Federation, монорепо на pnpm, Nx и Turborepo.
Урок: Микрофронтенды и монорепо 7 минКод-ревью
Что смотреть в пулреквесте, как писать комментарии и как разбирать код на собесе.
Урок: Код-ревью: что смотреть и как говорить 6 мин- Conventional Comments
- Огромный пулреквест
- Автор не согласен с замечанием
- Что не так с эффектом
- Как ускорить ревью в команде
- Как ты проводишь код-ревью
- key по индексу
- Утечка в эффекте
Ещё 26 вопросов и задач
- Отревьюй компонент вслух
- Мутация состояния
- С чего начинать ревью
- Гонка в загрузке
- Опасность в комментарии пользователя
- Что значит nit
- Хорошее описание PR
- Код-ревью
- Ревью: модальное окно
- Ревью: загрузка деталей по списку
- Ревью: хранение токена
- Ревью: провайдер состояния
- Ревью: стили карточки
- Ревью: работа с датами
- Ревью: debounce в компоненте
- Ревью: эффект с подпиской
- Ревью: проглоченная ошибка
- Ревью: валидация формы
- Ревью: список с удалением
- Ревью: мемоизация, которая не работает
- Ревью: расчёт суммы заказа
- Ревью: большой список с фильтром
- Ревью: загрузка по поисковому запросу
- Ревью: производное состояние
- Ревью: запрос с идентификатором организации
- Ревью: рендер пользовательского контента