За последние годы разработка стала сложнее: крупные проекты включают сотни компонентов и команды из десятков специалистов. Из-за этого растут сроки, стоимость и время на онбординг, усложняется поддержка и контроль качества. В результате бывают частые расхождения между дизайном и реализацией, ошибки на поздних этапах, дублирование компонентов и лишняя работа разработчиков. Есть решение, которое может оптимизировать процессы разработки и отладки — это StoryBook. Мы в Kokoc.tech автоматически включаем этот инструмент в смету, тем самым «по умолчанию» решая вопрос по хранению всей документации проекта. Даже скептически настроенные клиенты быстро убеждаются: StoryBook экономит время, деньги и делает фронтенд-процессы прозрачнее и эффективнее.
Это бесплатный open-source инструмент для разработки, тестирования и документирования компонентов пользовательских интерфейсов. По сути — «живая библиотека» всего, что видит человек, когда пользуется приложением: кнопок, форм, карточек, заголовков. StoryBook считает каждую часть интерфейса отдельным компонентом, поэтому все разрабатываемые единицы представлены со своими вариациями, состояниями, событиями, параметрами.
Как им пользуются?
Разработчик пишет компоненты и их истории; документация хранится на отдельном домене и доступна всем, кто участвует в реализации проекта (разработчикам, менеджерам, дизайнерам). Можно смотреть код (Show code), переключать параметры (Controls), отслеживать события (Actions), проверять разные размеры/варианты и адаптивность. Благодаря мощной функциональности можно просматривать интерфейс так, как это делают пользователи, причём с разных типов устройств: мобайл, планшет, десктоп.
Связка с Figma
В Storybook можно добавлять ссылки на макеты: из компонента — сразу к соответствующему фрагменту Figma. Соответственно, сразу все видно, и, если есть проблемы, благодаря StoryBook можно их выявить на более раннем этапе.
Для разработчиков:
Для дизайнеров:
Многие владельцы бизнеса не сразу понимают, зачем нужен StoryBook и как он влияет на результат. На практике его преимущества становятся очевидны уже после первых спринтов.
Ощутимая польза для бизнеса:
В Kokoc.tech мы включаем StoryBook в каждый проект по умолчанию — это снижает затраты и делает процесс разработки структурным.
Мы рекомендуем на этапе пресейла объяснять клиенту ценность StoryBook, и для аргументации можно продемонстрировать демо-каталог, показать, как с помощью StoryBook собирается реальный сайт или приложение, разъяснить, какие есть риски, какую пользу получает бизнес от использования инструмента.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13201 тендер
проведено за восемь лет работы нашего сайта.
StoryBook — это прозрачность, оптимизация, удобство. Это про то, что мы ценим и время своих сотрудников, и бюджет заказчиков.
StoryBook окупается уже на середине проекта: он упрощает взаимодействие между членами команды, дает возможность проходить пользовательский путь, оперативно вносить правки при синдроме “часто меняющегося дизайна”, а также быстро получать обновленные версии компонентов.
Для РЕХАУ мы разработали дизайн-систему, благодаря которой обеспечивается единообразие интерфейса при минимальных затратах на разработку и масштабирование digital-проектов. Всю документацию по проекту мы вели в Storybook.
Одним из удобных и интересных решений оказалась цветовая группировка компонентов по их важности, сложности и назначению. Каждый цвет объясняет определенное значение группы компонентов:
Сайт РЕХАУ — это не просто онлайн-витрина, а полноценный инструмент продаж. Здесь активно используются различные интерфейсы взаимодействия с пользователем — от кнопок и слайдеров до форм обратной связи с множеством полей.
Благодаря StoryBook все элементы формы задокументированы и собраны в единую систему. Благодаря чему разработчики могут быстро адаптировать готовые компоненты под любую задачу.
По мере увеличения задач и роста масштабности проекта можно подключить Chromatic — визуальные регресс-тесты и предпросмотры сборок компонентов. Chromatic запускает процесс создания новых скриншот-диффов (новых версий продукта), обновляет статусы билдов, сохраняет комментарии и апрувы.
Это полезная опция для команд с частыми релизами и высокими требованиями к стабильности UI. Предоставляется бесплатно 5000 токенов в месяц, что бывает вполне достаточно. Если нужно больше, то предусмотрены разные тарифы, что опять же позволяет подобрать для конкретного бизнеса наиболее выгодное решение.
Storybook нужен и разработчикам, и бизнесу: это история, в которой выигрывают все стороны. Если вы скептически относитесь к этому инструменту, возможно, пришло время, чтобы изменить ракурс внимания и увидеть в Storybook то, что он может дать вам и вашей команде.