Как создать библиотеку компонентов, соответствующую потребностям вашего стартапа.
Библиотеки компонентов имеют смысл в качестве инструментов для крупных корпораций, но могут показаться излишними для малых предприятий, таких как стартапы. В этом посте я утверждаю, что, следуя правильным принципам, с помощью правильных инструментов вы можете создать библиотеку компонентов пользовательского интерфейса, которая будет способствовать вашему стартапу способами, выходящими далеко за рамки согласованного пользовательского интерфейса.
Как и любое другое бизнес-решение, создание библиотеки компонентов для вашего стартапа зависит от предполагаемого соотношения затрат и выгод. В случае библиотеки компонентов очень упрощенная и абстрактная формула выглядит примерно так:
Чтобы библиотека компонентов была полезной, она должна демонстрировать низкие затраты и вероятную высокую прибыль.
Для стартапа с небольшим количеством проектов, ограниченными ресурсами и небольшим количеством сотрудников создание дизайн-системы кажется слишком дорогостоящим. Потребовалось бы, чтобы команда принимала дизайнерские решения для всех проектов, поддерживала дополнительный репозиторий для библиотеки пользовательского интерфейса, настраивала упаковку для компонентов пользовательского интерфейса, создавала сайт каталога, обеспечивала полное принятие библиотеки и т. Д.
Ваш стартап быстро растет и развивается. В пользовательский интерфейс, а также в любые другие аспекты ваших продуктов часто вносятся изменения. Кажется почти невозможным и крайне непродуктивным обеспечить согласованный пользовательский интерфейс.
Как сделать библиотеку компонентов пользовательского интерфейса стоящей
Чтобы библиотека компонентов была полезной, каждый элемент приведенной выше формулы рентабельности должен иметь смысл. Здесь, я бы сказал, ответ кроется в трех принципах. Библиотека должна создаваться постепенно в сотрудничестве и с ее компонентами кода в качестве единого источника правды, чтобы она имела смысл.
Построить постепенно
Библиотека пользовательского интерфейса не обязательно должна быть комплексным решением. Создавайте свою библиотеку постепенно, чтобы снизить риск ненужной потери ресурсов и сосредоточиться на основных проектах. Экспортируйте компоненты по ходу работы. Не превращайте свою библиотеку в отдельный проект. Когда появляется новый компонент многократного использования, просто вставьте его в свою библиотеку. Не создавайте компоненты без немедленного и ясного использования.
Создавайте вместе
Сделайте свою UI-библиотеку коллективным усилием. Над многократно используемыми компонентами пользовательского интерфейса следует совместно работать, а не навязывать их априори. Компоненты многократного использования не получат полного распространения, на которое вы надеетесь, если их заставят работать в вашей команде. Компоненту многократного использования может потребоваться эта небольшая настройка, чтобы сделать его подходящим для среды размещения. Если ваша команда не будет изменять повторно используемые компоненты, они только заставят их многократно переписывать почти идентичные компоненты - это верный рецепт ошибок, несогласованности в пользовательском интерфейсе и вялой разработки.
Сделайте код единым источником истины
Процесс создания компонентов пользовательского интерфейса обычно начинается с продуктов, не связанных с кодом, таких как изображения, файлы эскизов и т. Д. - эти артефакты дизайна часто рассматриваются как источник истины системы дизайна, а не сам код. Чтобы все было максимально эффективным и ясным, убедитесь, что код отражает то, как все должно быть. Каждый раз, когда разработчик использует компонент, он или она должны точно знать, что этот компонент согласован и представляет собой рекомендации компании по проектированию.
«Мы также хотели минимизировать источники правды. Зачем хранить отдельную библиотеку компонентов, нарисованных вручную в Sketch, если мы реализовали их как настоящие, используемые каждый день миллионами людей?
Чем меньше у нас источников правды о дизайн-системе, тем мы более эффективны », - блог Airbnb.
Я бы даже сказал, что многие из абстрактных руководств по стилю, которые описывают лучшие практики в отношении правильной композиции элементов и цветов, могут быть встроены в компоненты вашего кода. Краткий POC можно найти здесь:
Использование правильного инструмента для работы
Bit - отличный инструмент для стартапов, которые хотят создать библиотеку компонентов пользовательского интерфейса. Bit упрощает совместное использование компонентов из любого проекта, так что вы можете создавать свою библиотеку постепенно, не теряя внимания к своим основным проектам.
Bit изолирует компоненты для вас - тестирует и строит их (изолированно) и позволяет вам легко помещать их в вашу собственную коллекцию (библиотеку) в bit.dev. Нет необходимости настраивать пакеты или поддерживать дополнительные репозитории.
Компоненты в bit.dev отображаются в реальном времени с примерами и могут быть легко найдены с помощью возможностей поиска Bit. Нет необходимости в веб-сайте галереи, порталах документации, игровых площадках для внешних компонентов и т. Д.
Компоненты могут быть установлены с помощью NPM или Yarn или импортированы в ваш проект в качестве исходного кода с помощью Bit. Импортированные компоненты можно обновить (откуда угодно) и вернуть в свою коллекцию в bit.dev. Таким образом, вы можете совместно создать библиотеку компонентов.
Вот простой пример:
Давайте «соберем» компоненты из базового приложения React.
git clone https://github.com/giteden/basic-todo-app.git
Инициализируйте рабочее пространство и войдите в систему:
$ cd basic-todo-app $ bit init $ bit login
Добавить (все) компоненты:
$ bit add src/components/*
Настройте компилятор React (компоненты создаются независимо от конфигураций сборки вашего проекта):
$ bit import bit.envs/compilers/react --compiler
Отметьте и экспортируйте в общую коллекцию (создайте свою коллекцию в bit.dev):
$ bit tag --all 1.0.0 $ bit export username.collection
Вуаля! Компоненты моего приложения теперь доступны в моей общей библиотеке:
Заключение
В заключение следует отметить, что при использовании правильной методологии и правильных инструментов библиотека компонентов может стать экономически эффективным способом обеспечить единообразный дизайн, ускорить время разработки, упростить обслуживание и сделать вашу компанию и ваши приложения более привлекательными. более масштабируемый.
