Что хорошего в компонентах многократного использования, если ваша команда не может их найти?
Компоненты привносят модульность в дизайн наших приложений. Модульность, в свою очередь, обеспечивает возможность многократного использования, что помогает создавать лучшие программные приложения без необходимости каждый раз изобретать велосипед. Это также упрощает поддержку и разработку приложений.
Общие компоненты помогают разработчикам и командам обмениваться строительными блоками, которые поддерживают согласованный UX / UI для пользователей. С помощью общих компонентов вы можете обмениваться кодом и в то же время создавать общую систему проектирования компонентов.
Для успешного совместного использования повторно используемых компонентов между командами и приложениями необходимо сделать компоненты доступными для разработчиков, чтобы они могли находить и использовать их в своих приложениях. Дизайнеры могут сотрудничать с разработчиками над визуализированными компонентами кода, чтобы избежать различий.
В этом посте я расскажу, как добиться видимости компонентов, совместно используемых проектами и разработчиками.
- Узнайте больше о совместном использовании компонентов: Совместное использование компонентов заботится.
Совместное использование компонентов в облаке (центр компонентов)
До 2018 года компоненты распределялись между репозиториями только путем перемещения их кода в дополнительные репозитории и внешние библиотеки.
Bit представляет новый рабочий процесс для совместного использования компонентов напрямую между проектами в облаке. Он фактически инкапсулирует компоненты из существующих репозиториев, включая все необходимое для работы вне проекта; все файлы, зависимости, компилятор и т. д. Затем он организует их в облаке, чтобы вы могли легко обнаруживать компоненты и использовать их в проектах.
Когда компоненты размещены в Bit's component hub, каждый разработчик в команде может искать и находить компоненты, просматривая их в визуальных галереях.
Поскольку Bit изолирует и инкапсулирует компоненты, каждый компонент становится доступным для индивидуальной сборки, тестирования, запуска и использования где угодно - в разных проектах и в облаке.
Вы можете искать компоненты своей командой или сообществом, используя семантический поиск компонентов Bit, а также использовать фильтры для определения размера компонентов, зависимостей и многого другого. Вы также можете изучить курируемые компоненты.
Каждая страница компонентов представляет собой живую площадку для горячей перезагрузки компонентов, где вы можете сохранить примеры для своей команды и поиграть с компонентом в полной изоляции. Справочник по API компонента извлекается и отображается вместе с результатами тестирования и дополнительной информацией. Переключение вкладок приведет вас к самому коду, зависимостям или выходам.
Когда полезный компонент найден, его можно установить с помощью диспетчеров пакетов, таких как NPM и Yarn. Его также можно реплицировать в новый проект для дальнейшей разработки, в то время как Bit отслеживает изменения в коде и позволяет синхронизировать (и даже объединять!) Изменения в общий код между проектами.
Несмотря на облако, изменения в компонентах и зависимостях можно контролировать и обновлять в разных проектах и приложениях, поэтому вы можете синхронизировать свою кодовую базу и сотрудничать между разработчиками и командами.
Если все ваши компоненты виртуально изолированы и совместно используются в облаке, это означает создание универсального портала обнаружения, на котором каждый в вашей команде может совместно использовать компоненты и сотрудничать. И разработчики, и дизайнеры могут искать, просматривать и обновлять фактические компоненты, а также поддерживать синхронизацию.
Разработка визуальных компонентов и документация
Инструменты StoryBook и StyleGuidist могут помочь разработать каждый компонент в визуальной интерактивной среде разработки. При создании библиотеки вы также сможете создать портал визуальной документации для ее компонентов.
StoryBook
Storybook - это среда быстрой разработки UI-компонентов.
Он позволяет просматривать библиотеку компонентов, просматривать различные состояния каждого компонента, а также в интерактивном режиме разрабатывать и тестировать компоненты.
StoryBook помогает вам разрабатывать компоненты изолированно от вашего приложения, что также способствует лучшему повторному использованию и тестированию ваших компонентов.
Вы можете просматривать компоненты из своей библиотеки, экспериментировать с их свойствами и мгновенно получать впечатление с помощью горячей перезагрузки в Интернете. Вы можете найти несколько популярных примеров здесь. Различные плагины могут помочь ускорить процесс разработки, так что вы можете сократить цикл между настройкой кода и визуальным выводом.
StoryBook - отличный инструмент как для быстрой разработки компонентов WYSIWYG, так и для визуальных документов вашей библиотеки, принятый многими популярными библиотеками.
Styleguidist
React Styleguidist - это среда разработки компонентов с горячим перезагружаемым сервером разработки и живым руководством по стилю, в котором перечислены компоненты propTypes и показаны редактируемые примеры использования на основе файлов .md.
Он поддерживает ES6, Flow и TypeScript и работает с приложением Create React из коробки. Автоматически сгенерированные документы по использованию могут помочь Styleguidist функционировать как портал документации для различных компонентов вашей команды. Аккуратно, правда?
- Также ознакомьтесь с React Live от Formidable Labs.
От компонентов к дизайн-системе?
Традиционно системы дизайна создавались как визуальные элементы с использованием инструментов графического дизайна, а затем внедрялись в библиотеку компонентов или набор репозиториев.
Однако этот рабочий процесс создает разрыв между тем, что проектируют дизайнеры, и тем, что создают разработчики. Создание единого портала для дизайнеров и разработчиков может помочь в поддержании единообразия пользовательского интерфейса и устранить ошибки.
Через облако компоненты можно расшарить в вашем хабе. Дизайнеры могут видеть визуализированные компоненты и даже создавать примеры в Интернете. Разработчики могут использовать одни и те же компоненты в своем коде. Когда разработчик изменяет компонент из нового проекта, дизайнер может просматривать изменения и сотрудничать с разработчиком, чтобы убедиться, что дизайн остается согласованным.
Совместное использование компонентов с единым дизайном обеспечит функциональную и визуальную согласованность для пользователей ваших приложений и уменьшит путаницу, чтобы помочь пользователям успешно взаимодействовать с вашим продуктом. Постоянный опыт также укрепляет ваш бренд и дает пользователям чувство счастья.
