Storybook: инструмент синхронизации разработки, дизайна и бизнеса

Это бесплатный open-source инструмент для разработки, тестирования и документирования компонентов пользовательских интерфейсов. По сути — «живая библиотека» всего, что видит человек, когда пользуется приложением: кнопок, форм, карточек, заголовков. StoryBook считает каждую часть интерфейса отдельным компонентом, поэтому все разрабатываемые единицы представлены со своими вариациями, состояниями, событиями, параметрами.

Как им пользуются?

Разработчик пишет компоненты и их истории; документация хранится на отдельном домене и доступна всем, кто участвует в реализации проекта (разработчикам, менеджерам, дизайнерам). Можно смотреть код (Show code), переключать параметры (Controls), отслеживать события (Actions), проверять разные размеры/варианты и адаптивность. Благодаря мощной функциональности можно просматривать интерфейс так, как это делают пользователи, причём с разных типов устройств: мобайл, планшет, десктоп.

Связка с Figma

В Storybook можно добавлять ссылки на макеты: из компонента — сразу к соответствующему фрагменту Figma. Соответственно, сразу все видно, 
и, если есть проблемы, благодаря StoryBook можно их выявить на более раннем этапе.

Для разработчиков: 

• переиспользование компонентов вместо «изобретения заново»
• выше качество кода
• сокращение трудозатрат на ревью-тестирование
• быстрый поиск документов по ключевым словам
• снижение рисков логических ошибок на поздних этапах реализации. 

Для дизайнеров: 

• возможность на любом этапе разработки сверять дизайн относительно того, как задумано и как это выглядит на самом деле
• вносить правки, задавать стили, выявлять ошибки, оставлять комментарии
• обеспечивается доступ к дизайн-системе вне зависимости от временных рамок, и сохраняется вся история вносимых изменений.

Многие владельцы бизнеса не сразу понимают, зачем нужен StoryBook и как он влияет на результат. На практике его преимущества становятся очевидны уже после первых спринтов.

Ощутимая польза для бизнеса: 

• Быстрее релизы. Компоненты не дублируются, проект собирается быстрее.
• Меньше багов. Ошибки выявляются раньше, а их исправление обходится дешевле.
• Гибкость команды. Подробная документация в StoryBook позволяет легко подключать новых специалистов без зависимости от конкретных сотрудников.
• Прозрачность процессов. Владелец бизнеса видит ход работ и может контролировать сроки.
• Предсказуемый результат. Интерфейс соответствует ожиданиям и дизайну.

В Kokoc.tech мы включаем StoryBook в каждый проект по умолчанию — это снижает затраты и делает процесс разработки структурным. 

Мы рекомендуем на этапе пресейла объяснять клиенту ценность StoryBook, и для аргументации можно продемонстрировать демо-каталог, показать, как с помощью StoryBook собирается реальный сайт или приложение, разъяснить, какие есть риски, какую пользу получает бизнес от использования инструмента. 

StoryBook — это прозрачность, оптимизация, удобство. Это про то, что мы ценим и время своих сотрудников, и бюджет заказчиков. 

StoryBook окупается уже на середине проекта: он упрощает взаимодействие между членами команды, дает возможность проходить пользовательский путь, оперативно вносить правки при синдроме “часто меняющегося дизайна”, а также быстро получать обновленные версии компонентов.

Для РЕХАУ мы разработали дизайн-систему, благодаря которой обеспечивается единообразие интерфейса при минимальных затратах на разработку и масштабирование digital-проектов. Всю документацию по проекту мы вели в Storybook. 

Одним из удобных и интересных решений оказалась цветовая группировка компонентов по их важности, сложности и назначению. Каждый цвет объясняет определенное значение группы компонентов:

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

Это полезная опция для команд с частыми релизами и высокими требованиями к стабильности UI. Предоставляется бесплатно 5000 токенов в месяц, что бывает вполне достаточно. Если нужно больше, то предусмотрены разные тарифы, что опять же позволяет подобрать для конкретного бизнеса наиболее выгодное решение.

Storybook нужен и разработчикам, и бизнесу: это история, в которой выигрывают все стороны. Если вы скептически относитесь к этому инструменту, возможно, пришло время, чтобы изменить ракурс внимания и увидеть в Storybook то, что он может дать вам и вашей команде.