Сначала мы обсудим проблему, с которой мы сталкиваемся при разработке веб/мобильных приложений. Например, предположим, что мы работаем над веб-приложением электронной коммерции, и наше приложение имеет следующие маршруты:

- Домой

- Поиск продукта

- Информация о продукте

- Проверить

Теперь вы получаете задание создать новый компонент карточки для страницы оформления заказа.

И шаги, необходимые для интеграции компонента карты на странице оформления заказа, показаны на рисунке ниже —

Когда вы начнете работать над этим компонентом (в проекте React, Angular и т. д.), вы создадите файлы (HTML, css/scss, .js/ts) для этого компонента в соответствии со структурой вашего проекта и предполагая, что вы используете HMR (Горячая замена модуля) в вашем проекте вы можете столкнуться со следующим сценарием —

ПРОБЛЕМА💬

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

РЕШЕНИЕ🐵

Когда-то у меня было решение для этого, чтобы преодолеть эту проблему с сантехникой, что я обычно делаю, я создавал еще один пример проекта (React/Angular) ИЛИ использовал онлайн-редактор, такой как S tackblitz, для создания компонента в изоляции. , после завершения кода я просто скопировал и вставил свой код в реальный проект и начал работать над интеграцией компонента в реальном месте. Хотя это был хороший способ сэкономить время, во время интеграции компонента мне пришлось бы снова столкнуться с той же проблемой (например, с сантехникой 🔧🔧🔧, чтобы добраться до моего компонента).

ИДЕАЛЬНОЕ РЕШЕНИЕ 💯

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

Нет сантехники !!!!

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

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

Примечание. Ранее Storybook назывался react-storybook. Теперь вы можете использовать его с Angular, Vue и т. д.

Вы можете воспользоваться преимуществами Storybook в своих проектах React, Angular, Vue и React-Native и ускорить свою работу, создав и протестировав свой компонент изолированно, не беспокоясь о зависимостях и требованиях конкретного приложения 🚀

ДА, это действительно полезно 👏👏👏👏

Я рекомендую вам попробовать рассказы, если вы хотите избежать той же (вышеупомянутой) проблемы в своем проекте.

Ресурсы: