Вопрос с собеседования · Frontend

Зачем нужен Storybook?

JuniorАрхитектура фронтенда
Ещё спрашивают так:
  • Как документировать компоненты?
Коротко

Storybook — песочница, где компоненты разрабатывают и показывают изолированно от приложения: каждая история (story) — компонент в конкретном состоянии (обычная кнопка, загрузка, ошибка, длинный текст). Он служит живой документацией для дизайнеров и разработчиков, местом проверки крайних состояний, а с дополнениями — проверки доступности и визуальных регрессий (снимки экрана сравниваются в CI).

  • Истории заодно являются тестовыми сценариями
  • Удобно разрабатывать компонент без поднятия бэкенда
  • Публикуется как сайт для всей команды

Подробно

export default { component: Button };
export const Primary = { args: { variant: 'primary', children: 'Купить' } };
export const Loading = { args: { loading: true, children: 'Купить' } };

Что хотят услышать

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

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓Песочница для изолированной разработки компонентов: истории — состояния и документация
  • ✗Storybook — система сборки приложения для продакшена, замена Vite и webpack
  • ✗Storybook заменяет бэкенд
  • ✗Storybook — библиотека готовых компонентов

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

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

Разбор собеседования