Ответ
Плюсы:
- Изолированная разработка компонентов без зависимостей от приложения
- Документирование компонентов с примерами использования
- Визуальное тестирование разных состояний компонента
- Поддержка множества фреймворков (React, Vue, Angular и др.)
- Настройка кастомизации через аддоны (контролы, темы, accessibility и др.)
- Упрощает командную работу над UI
Минусы:
- Дополнительная настройка и поддержка в проекте
- Может замедлять сборку при большом количестве стори
- Требует дисциплины в поддержании актуальности документации
- Не заменяет полноценное тестирование (нужны юнит- и e2e-тесты)
Пример конфигурации стори:
// Button.stories.js
export default {
title: 'Components/Button',
component: Button,
argTypes: {
variant: {
options: ['primary', 'secondary'],
control: { type: 'radio' }
}
}
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
variant: 'primary',
children: 'Click me'
};Ответ 18+ 🔞
А, Storybook, говоришь? Ну, это такая штука, чтобы твои интерфейсные кирпичики, эти ваши кнопки-инпуты, в изоляции от всей остальной ебалы поковырять. Представь: у тебя есть кнопка. Одна, блядь, кнопка на весь белый свет. И ты её, сука, можешь крутить-вертеть, менять ей цвет, размер, надпись, и смотреть, не разъёбывается ли она при этом. И всё это — без необходимости запускать всё приложение, ждать, пока оно скомпилируется, залогиниться, дойти до нужной страницы... Короче, волшебство, ёпта.
Что там хорошего-то?
- Изоляция, мать её. Делаешь компонент — и тебе похуй на всё приложение. Никаких глобальных стилей, провайдеров, стора. Чистый, как слеза младенца, кусок кода. Хочешь — зелёным сделай, хочешь — с блёстками.
- Документация, которую кто-то может даже прочитать. Ты прямо рядом с компонентом пишешь, как его юзать, какие пропсы он жрёт. Новый чел в команде зашёл, открыл сторибук — и уже не задаёт тупых вопросов в чате.
- Визуальный отладчик, блядь. Увидел баг — открыл стори этого компонента, покрутил все его состояния (задизейблен, в ошибке, в успехе) и сразу понял, где косяк. Не надо по всему коду прыгать.
- Фреймворк? Да похуй! React, Vue, Angular, Svelte — им всем подходит. Универсальная поебень.
- Навешай сверху чего хочешь. Хочешь слайдеры для настройки цвета — есть аддоны. Хочешь проверить, как твой интерфейс видят дальтоники — тоже есть. Хочешь переключать темы на лету — и это можно. Ёперный театр возможностей.
- Командная работа. Дизайнер пришёл, посмотрел, как компонент выглядит во всех ипостасях, и не пристаёт с вопросами "а как оно будет, если текст на три строки?". Все видят одно и то же.
А теперь про говно (куда ж без него):
- Ещё одна хуйня, которую надо настраивать. Это не магия из коробки. Конфиги, вебпаки, баблин-блоблины... Пока настроишь, полдня убьёшь. А потом ещё и поддерживать.
- Может тормозить, как чёрт. Когда у тебя не десять, а сто пятьдесят компонентов, и у каждого по пять состояний — сборка сторибука начинает напоминать запуск шаттла. Ждёшь, блядь.
- Дисциплина, сука. Написал новый пропс — иди, обнови историю. Переименовал компонент — иди, поправь. А то через месяц открываешь, а там документация времён царя Гороха, и доверия к ней — ноль ебать.
- Это не панацея, дурачок. Он показывает, как компонент выглядит, а не как он работает. Логику, сайд-эффекты, интеграцию с API — это всё ещё надо обычными тестами покрывать. Не расслабляйся.
Ну и примерчик, чтобы не быть голословным. Смотри, как просто:
// Button.stories.js
export default {
title: 'Components/Button', // Куда в дереве положить
component: Button, // Какой компонент крутить
argTypes: { // Какие крутилки навесить
variant: {
options: ['primary', 'secondary'],
control: { type: 'radio' } // Выбор кнопочками, удобно, бля
}
}
};
// Шаблон — просто обёртка
const Template = (args) => <Button {...args} />;
// А вот конкретная история — один из вариантов кнопки
export const Primary = Template.bind({});
Primary.args = {
variant: 'primary',
children: 'Click me' // Вот такая вот кнопочка будет в каталоге
};Вот и вся магия. Инструмент, в общем, охуенный, если им не начинать ебашить по лбу, а использовать с умом.