Я слышал о Storybook какое-то время и прочно связал его с ReactJS, когда наткнулся на запись в блоге Доминика Нгуена, описывающую весь редизайн, который они сделали для Storybook v5.0. Статья заинтриговала меня, я хотел узнать больше, и вскоре я обнаружил, что Storybook поддерживает не только React, но и другие современные фреймворки, включая Vue. Этого было более чем достаточно, чтобы заставить меня задуматься, смогу ли я интегрировать это в проект, над которым я работаю, и какие преимущества мы могли бы получить от этого.

Постановка цели

Так я начал свой хакерский проект на выходных. У нашего приложения довольно странная настройка, оно находится в состоянии перехода между устаревшим AngularJS и модным современным Vue. Весь код написан на Typescript, разметка для компонентов Vue определяется в Pug, SCSS используется для определения стилей. Имея такую ​​смешанную настройку различных инструментов и фреймворков, я не был уверен, смогу ли я интегрировать Storybook, но цель была поставлена.

Интеграция

Потратив несколько часов, я получил живую историю для одного из наших компонентов Vue! Это был ВАУ момент. Я мог видеть наш компонент Vue, живущий в другой изолированной среде и имеющий точно такой же внешний вид. Это было прекрасно! И я был действительно впечатлен тем, насколько легко было настроить Storybook для нашей установки.

Жажда большего

На следующей неделе я хотел сделать больше и решил расширить Storybook для всех компонентов Vue, которые у нас были на данный момент. Для достижения цели мне пришлось немного реорганизовать их, извлечь логику побочных эффектов в компоненты контейнера. Результаты действительно поразили меня. Все возможные состояния каждого презентационного компонента присутствовали в Storybook, их можно было увидеть, «потрогать» и поиграть с ними, и они выглядели точно так же, как и в приложении.

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

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

Принудительное разделение компонентов "Контейнер" и "Презентация"

Все мы знаем, что существует 2 типа компонентов: Контейнерные компоненты и презентационные. Проблема, однако, в том, что у нас не всегда есть четкое разделение между обоими типами компонентов, большинство наших компонентов представляют собой смесь обоих типов - они смешивают логику побочных эффектов (обработка запросов api и подключение к Redux) с определением разметки. Это приводит к сложным юнит-тестам и трудностям для воспроизведения состояний.

Почему так?

Потому что на самом деле ничто не заставляет нас делать это логическое разделение.

На помощь приходит сборник рассказов!

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

Надежный интерфейс - не миф

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

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

Упрощенный обзор дизайна

Ваш компонент нуждается в проверке конструкции на всех возможных состояниях? Нет проблем, просто дайте вашему дизайнеру ссылку на Storybook, в которой перечислены все состояния компонента.

Повышенная производительность

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

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

Как вывод

У меня всего 1 неделя опыта работы с Storybook, и я был очень взволнован тем, что он позволяет разработчикам пользовательского интерфейса делать. Это поможет вам работать более продуктивно, получать больше удовольствия от повседневной работы и обеспечить надежный интерфейс. Это определенно изменит мой подход к разработке приложений.

Если вы еще не пробовали Storybook, я рекомендую вам попробовать. Это определенно того стоит.