Главное Свежее Вакансии Образование
12 387 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Зачем нужен инструмент Storybook и как он помогает нам жить

Специалисты отдела разработки Студии Олега Чулакова рассказывают о том, как привести мысли и структуру проекта в порядок.

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

Привести мысли и структуру проекта в порядок поможет Storybook. Этот инструмент для разработки пользовательских интерфейсов позволяет реализовывать отдельные части интерфейса изолированно от основного приложения, что упрощает тестирование и позволяет отладить компонент с различными данными. Для интерактивного взаимодействия с визуальными компонентами Storybook предоставляет специальный веб-интерфейс.

Одной из ключевых особенностей Storybook является то, что его можно использовать практически с любым инструментарием, будь то React.js, Vue.js или Angular. Также существует множество плагинов, которые расширяют его интерфейс и добавляют дополнительные методы для работы с компонентами.

Основными объектами взаимодействия в Storybook являются истории. Именно они связывают среду разработки и компоненты. Чтобы Storybook мог отличить обычные файлы от историй, используется именование с префиксом .stories.js. Это правило, как и любое другое, можно поменять, расширив конфигурацию инструмента.

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

О том, как внедрить Storybook в свой проект, вы можете узнать из документации, соответствующей вашему стеку. В свои корпоративные шаблоны мы начали внедрять его на основе оригинальной документации с учетом используемого стека. И конечно, встретились с несколькими сложностями.

Например, при внедрении Storybook в сборки React-приложений стало ясно, что некоторые типы импортируемых файлов ему не знакомы. В базовой конфигурации Webpack для Storybook отсутствовали используемые в приложении лоадеры. В нашем случае это были stylus-loader и css-loader с дополнительным набором опций для конфигурации css-modules.

Большинство схожих проблем вам удастся решить путем расширения базовой конфигурации Storybook. За это отвечает специальное поле webpackFinal в файле .storybook/main.js. Важно понимать, что мы расширяем, а не полностью заменяем умолчательную webpack-конфигурацию, хотя и такой вариант возможен. Расширение конфигурации описывается функцией, присвоенной полю webpackFinal. В качестве аргументов она принимает конфигурацию webpack по умолчанию и объект с метаинформацией, необходимой для работы Storybook.

Небольшой пример по расширению конфигурации можно посмотреть здесь.

Хотите еще больше полезностей от нашего отдела разработки? Заходите в Telegram и подписывайтесь на канал Chulakov Dev. Новости-молнии, гайды-лонгриды — регулярно делимся самым интересным из мира frontend- и backend-разработки.

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Metalamp.ru веб-разработка
Storybook очень удобный инструмент. хорош тем, что позволяет просматривать библиотеку компонентов, видеть состояния компонентов и тестировать их.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.