Если традиционная библиотека компонентов похожа на музыкальный альбом на компакт-диске, то bit.dev похожа на компонент iTunes или Spotify.
Популярность библиотек компонентов пользовательского интерфейса в 2019 году резко возросла. Это неудивительно, поскольку все великие компании, такие как Uber, Airbnb, Booking и другие, используют общие компоненты пользовательского интерфейса для обеспечения единообразия визуального восприятия.
Повторное использование компонентов пользовательского интерфейса позволяет поддерживать согласованность пользовательского интерфейса, чтобы уменьшить путаницу у пользователей и улучшить все ключевые показатели эффективности продукта. Это также ускоряет разработку пользовательского интерфейса, поскольку вам не нужно снова и снова писать один и тот же код с нуля. По мере вашего роста общие компоненты помогают стандартизировать ваш стек для команд.
Если библиотека компонентов похожа на музыкальный CD-альбом, то bit.dev - это как iTunes или Spotify для компонентов пользовательского интерфейса.
Bit.dev - это быстрый, динамический и совместный способ создания библиотеки компонентов вашей команды. Он позволяет постепенно извлекать, собирать и повторно использовать существующие компоненты пользовательского интерфейса, написанные в ваших приложениях. Это помогает вашей команде сократить накладные расходы, избавиться от дополнительных инструментов в цепочке инструментов и использовать общие компоненты, чтобы значительно повысить скорость и качество разработки внешнего интерфейса.
Давайте быстро рассмотрим преимущества создания многоразовой коллекции пользовательского интерфейса на bit.dev, чтобы помочь вашей команде в кратчайшие сроки получить расширенную модульную библиотеку пользовательского интерфейса.
1. Постепенно создавайте свою библиотеку, не теряя фокуса.
Большим преимуществом экосистемы bit.dev является то, что она позволяет вам постепенно реорганизовать свой пользовательский интерфейс и собирать повторно используемые компоненты в bit.dev.
Вместо того, чтобы останавливать доставку и сосредоточиться на отнимающем время проекту, вы можете продолжать создавать свои приложения и просто извлекать компоненты для повторного использования по ходу. Это также отличный способ постепенно вводить в проект новые функции и версии.
Это становится возможным благодаря проекту с открытым исходным кодом Bit, который bit.dev использует, чтобы помочь вам создать коллекцию многоразовых компонентов пользовательского интерфейса. Используя Bit, вы можете быстро и легко изолировать, упаковать и экспортировать повторно используемые компоненты в растущую коллекцию пользовательского интерфейса вашей команды - на лету. Это означает, что вы можете получить библиотеку пользовательского интерфейса за считанные минуты и просто расширять ее по мере роста. Вот как начать:
2. Нет шаблонной настройки; Никаких накладных расходов на настройку.
С bit.dev вам не нужно мучиться и много работать, просто чтобы настроить свою библиотеку. Вместо этого вы можете использовать Bit (GitHub), чтобы сделать всю тяжелую работу за вас.
Например, вам не нужно определять package.json для ваших компонентов, поскольку Bit автоматически генерирует pakcage.json файл для каждого компонента. Вместо того, чтобы определять конфигурации сборки и тестирования для компонентов в вашей библиотеке, Bit позволяет вам использовать повторно используемые среды разработки, чтобы определять эти шаги для каждого компонента, который вы добавляете в свою коллекцию bit.dev, поэтому он можно повторно использовать в проектах как отдельную жилую единицу. Эти и другие функции позволяют тратить меньше времени на накладные расходы и больше на создание.
4. Компоненты SemVer: значимые обновления и смешанные композиции пользовательского интерфейса.
Монолитные библиотеки используются как пакет с одной версией. Bit позволяет версии и обновлять каждый компонент индивидуально, используя правила SemVer.
Это означает, что разные компоненты в разных версиях могут быть смешаны вместе. Различные группы могут сохранять свою автономию, обновляя определенные компоненты по мере необходимости, без привязки к монолитным выпускам библиотеки.
Команды не должны вводить избыточные обновления в свои приложения. Если вы используете слайдер но не кнопку, им не нужно будет обновлять свое приложение при наличии обновления для button. Им также не нужно добавлять зависимости button в свое приложение, что снижает вероятность конфликтов.
Работая с компонентами SemVer'ed, команды могут внезапно контролировать обновления, исправления и откаты к определенным частям своего пользовательского интерфейса. Они могут принимать общие компоненты, добавлять свои собственные компоненты и сохранять контроль над продуктом.
3. Эффективно организовывать и сегментировать компоненты.
Bit.dev позаботится об организации и сегментировании ваших компонентов, чтобы было очень легко найти компоненты, которые вам нужны, в любом соответствующем контексте. Вот некоторые из ключевых функций, благодаря которым это происходит прямо сейчас:
- Мощный поиск семантической составляющей.
- Автоматически генерируемые метки компонентов («button», «реагировать» и т. Д.).
- Умные фильтры для размера компонентов, зависимостей, контекста и т. Д.
- Компоненты сгруппированы по проекту, команде или чему-то еще.
Учить больше:
5. Пишите код, создавайте потрясающие документы.
С bit.dev вам не нужно создавать и поддерживать дополнительный набор инструментов и сайтов статической документации только для документирования и рендеринга ваших компонентов.
Каждый компонент, совместно используемый bit.dev, анализируется, и его ссылка на API автоматически извлекается, анализируется и отображается прямо на странице компонента. Каждому компоненту можно предоставить примеры, которые отображаются в bit.dev, так что каждый может легко опробовать его, прежде чем решит использовать.
Это означает, что у вас есть единый портал, на котором ваши компоненты размещаются, совместно используются, документируются, визуализируются и устанавливаются - и все это "из коробки".
6. Реестр компонентов, встроенный в вашу библиотеку. 📦
Bit.dev сокращает ваш набор инструментов для управления повторно используемыми компонентами. Вместо публикации библиотеки в NPM вы можете напрямую устанавливать компоненты из своей библиотеки bit.dev, используя свои клиенты NPM и Yarn. Результат? Больше повторного использования кода, меньше накладных расходов. Просто настройте bit.dev как реестр с ограниченной областью видимости, и все готово.
7. Повторное использование компонентов пользовательского интерфейса; сохраняет независимость команд.
Помимо установки компонентов через реестр bit.dev, вы можете использовать Bit для введения совершенно нового и очень мощного рабочего процесса.
Bit позволяет вам bit import любой компонент прямо в любой репозиторий git (например, новое приложение) и изменять фактический исходный код компонента. После внесения изменений вы можете просто tag создать новую версию и поделиться ею.
Это означает, что вы можете повторно использовать компоненты, при этом сохраняя свою автономию в разработке приложений. Это намного проще, чем погрузиться в код библиотеки, чтобы сделать запрос на вытягивание, и значительно упрощает внедрение общих компонентов. Взгляните на это 5-минутное видео.
8. Поддерживайте идеальную синхронизацию репозиториев Git. В любом масштабе.
В отличие от традиционных статических библиотек, ваш bit.dev построен с возможностью неограниченного масштабирования.
Когда вы изменяете или обновляете компонент, вы можете мгновенно отправить запрос на вытягивание в каждый репозиторий, использующий этот компонент. Вы можете узнать, какие репозитории приняли обновление, а какие нет, чтобы вы могли лучше контролировать изменения и синхронизировать их по всей вашей кодовой базе.
Кроме того, вы можете обновить компонент и все зависимые от него компоненты за одно действие. Это дает вам беспрецедентный контроль над изменениями в вашем UI-приложении, чтобы оставаться синхронизированным и контролировать в любом масштабе.
→ Начни создавать свою библиотеку сегодня!
9. Значительно повысить согласованность UI / UX.
Когда вы делитесь и повторно используете компоненты через bit.dev, вы гарантируете, что ваши пользователи получат единообразный опыт на всех экранах, в приложениях и продуктах.
Согласованный интерфейс UI / UX означает, что вашим пользователям будет проще ориентироваться в ваших продуктах, они смогут успешно взаимодействовать с вашими приложениями и предпринимать желаемые действия, чувствуя себя счастливыми, безопасными и знакомыми с вашим брендом. По мере увеличения масштабов эта задача будет усложняться. Bit.dev - это мощный способ улучшить и обеспечить согласованный пользовательский интерфейс за счет неограниченного повторного использования компонентов пользовательского интерфейса.
10. Ускорение разработки новых UI-приложений.
Когда вы можете легко находить и использовать существующие компоненты, вы экономите время вдвойне:
А) Не переписывая один и тот же код повторно.
Б) Помогая будущим вам и другим поддерживать компоненты посредством простых обновлений в репозиториях.
С помощью bit.dev это становится намного проще, так как вы можете просто искать, использовать и адаптировать любой компонент прямо из любого потребляющего проекта. Не нужно зацикливаться на длинных сайтах документации, копаться в коде библиотеки или беспокоиться о совместимости. Чем больше компонентов разбивается на сегменты, тем больше времени вы экономите для вас и вашей команды.
11. Меньше вход в код вклад и обратная связь.
Никакого переключения контекста!
Трудно погрузиться в целую библиотеку GitHub, чтобы пиарить отдельный компонент. Одно только переключение контекста может легко отнять хороший рабочий день.
Но когда ваши компоненты находятся в bit.dev, вы можете просто bit improt добавить отдельный компонент в любой проект GitHub, внести изменения и поделиться новой версией. Это означает, что теперь любой может внести свой вклад всего за несколько минут.
Обсуждения можно создавать поверх определенных компонентов для совместной работы над конкретными изменениями и тем, как они влияют на ваш пользовательский интерфейс в разных местах. И это не только для разработчиков; поскольку компоненты визуализируются, вы можете привлекать дизайнеров, менеджеров по продукту и всех остальных для обсуждения кода.
→ Начни создавать свою библиотеку сегодня!
12. Получите более широкое распространение для общих компонентов.
При масштабировании становится трудно добиться внедрения общих библиотек пользовательского интерфейса. Основная причина в том, что разработчики внешнего интерфейса не хотят связывать разработку своих приложений с разработкой библиотеки. Они также не хотят устанавливать целую библиотеку и получать обновления (используя CI) для всей библиотеки.
С помощью bit.dev команды могут легко адаптировать нужные им компоненты, не теряя при этом своей независимости. Они могут изменять и обновлять общие компоненты по мере необходимости без ущерба для согласованности пользовательского интерфейса и быстро получать обратную связь от дизайнеров и групп инфраструктуры. Они также будут получать обновления только для тех компонентов, которые они действительно используют, и в противном случае их не будут беспокоить.
Упрощение поиска и внедрения компонентов означает, что больше команд (и приложений) начнут использовать одни и те же компоненты, а ваша дизайн-система получит широкое распространение.
13. Легко присоединяйтесь к большему количеству членов команды.
Когда ваш пользовательский интерфейс разбит на модули в коллекцию многократного использования, новым членам команды будет намного проще присоединиться, узнать, что у вас есть, и начать создавать!
Например, работая над определенным приложением, вы можете познакомить нового человека как с собственной коллекцией bit.dev своей команды, так и с коллекцией вашей организации. Там они смогут легко узнать, какие строительные блоки пользовательского интерфейса используются вашей конкретной командой или всей компанией. От нуля до практического применения за очень короткое время!
14. Позвольте дизайнерам сотрудничать с разработчиками; Непосредственно по коду.
Ха! Святой Грааль.
По правде говоря, до сих пор большинство инструментов, ориентированных на пользовательский интерфейс, были сосредоточены на дизайне пользовательского интерфейса, а не на коде. Это неправильно, поскольку код является источником истины для вашего пользовательского интерфейса. В конце концов, ваши пользователи видят ваш код. Итак, ваша команда должна общаться и сотрудничать по компонентам кода, а не только по элементам дизайна.
Ваша коллекция bit.dev - это место, где размещен ваш фактический код пользовательского интерфейса - это ваш источник правды. И именно здесь визуализируется этот код. Итак, впервые дизайнеры и разработчики (а также продукты, маркетологи и т. Д.) Могут совместно работать над реальным кодом визуально. Интересно думать о том, что произойдет, когда bit.dev будет интегрирован с такими инструментами, как Invision DMS или Figma… 🙏
15. Уменьшить размер и вес пакетов приложений; Повышайте производительность.
Еще одно полезное преимущество bit.dev заключается в том, что он позволяет устанавливать отдельные компоненты. Вы даже можете фильтровать компоненты по размеру пакета, прежде чем использовать их в своем приложении. Это может быть очень полезно.
Когда вы добавляете только необходимые компоненты в размер пакета вашего приложения, вы уменьшаете общий размер и вес вашего приложения. Ваши пользователи получат более быструю и плавную работу, что приведет к лучшим результатам для вашего продукта.
Вы можете выполнить поиск компонентов, играющих и проверить эти фильтры здесь.
Бонус: присоединяйтесь к большому сообществу разработчиков ПО с открытым исходным кодом✨
Многие люди предпочитают делать некоторые из своих компонентов с открытым исходным кодом на bit.dev, чтобы другие в мире могли найти и использовать их в своем коде.
Изучите сообщество с открытым исходным кодом bit.dev, изучите десятки тысяч компонентов в крупнейшей в мире библиотеке, обогатите свою команду компонентами из популярных библиотек с открытым исходным кодом и поделитесь своей работой со всем миром!
