Разработчики и дизайнеры JavaScript хорошо знакомы с системами дизайна. По сути, это рекомендации и спецификации, относящиеся к проекту, над которым вы работаете. Это очень важная тема, когда речь идет о следовании руководящим принципам бренда для компании, в которой вы работаете. В случае с дизайнером они, вероятно, будут работать с системой дизайна, которая имеет спецификацию типографики, цветов, интервалов, содержимого и другой информации, связанной с дизайном. Обычно дизайнеры управляют всем этим с помощью инструмента дизайна, такого как Figma, Adobe XD, Sketch или чего-то подобного.

Теперь, когда дело доходит до разработки, мы обычно не занимаемся настройкой системы проектирования разработки. Если мы используем, например, фреймворк, такой как React, то обычной практикой является использование методологии разработки, управляемой компонентами. Таким образом, мы создаем множество повторно используемых компонентов, которые можно использовать в приложении, а это означает, что мы сокращаем дублированный код, и все становится модульным, динамичным и взаимозаменяемым. Как бы хорошо это ни было, для нас все еще не было простого способа увидеть эти компоненты в дизайн-системе. Здесь на помощь приходит инструмент Storybook.

Что такое сборник рассказов

На сайте Storybook говорится, что:

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

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

Storybook берет ваши повторно используемые компоненты и организует их в красивую аккуратную библиотеку, чтобы вы могли поиграть с ними по своему усмотрению, прежде чем интегрировать их в свое приложение. Что делает этот инструмент еще более удивительным, так это то, что он всегда актуален и поддерживает большинство популярных фреймворков JavaScript. В список входят React, Vue, Angular, Svelte и многие другие! У них есть лучшие JavaScript-фреймворки, поэтому вам не будет оправдания, если вы не попробуете их.

Зачем мне использовать Storybook

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

Эта статья лишь поверхностная, если вы хотите узнать больше, вам следует посетить сайт Storybook. Инструмент Storybook уже используется во многих популярных компаниях, и это навык, который многие компании ищут с новыми кандидатами. Некоторые из компаний, уже использующих Storybook, включают GitHub, Adobe, Microsoft, BBC, IBM, Auth0, gov.uk, Atlassian, Lyft, airbnb и многие другие!

Вы можете найти варианты использования и примеры, которые показывают больше.

Последние мысли

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

Мир ✌️