Источник: Nuances of Programming
Большинство компонентов версионируются как часть проекта (например, component-library), что противоречит концепции создания модульных UI-приложений. Например, чтобы использовать слайдер-компонент, нужно внедрить в приложение полную библиотеку с единой версией, которой должен соответствовать каждый компонент.
Версионирование отдельных компонентов с использованием SemVer обеспечивает детальный контроль над составом UI-приложений. Разработчики могут использовать общие компоненты, а также получают возможность обновлять части пользовательского интерфейса без конфликтов, сохраняя при этом независимость команды.
Недостатки библиотек с единой версией
Создание единой версии для библиотеки компонентов является распространенной практикой.
Большинство библиотек представляют собой единый версионный пакет:
npm install @material-ui/core
Эта практика затрудняет внедрение компонентов, вынуждая разработчиков связывать свою разработку с библиотекой, согласовывать все версии и обновлять все компоненты на каждой из них.
Есть лучший вариант: версионирование и распределение отдельных компонентов по правилам SemVer. Они также используются в инструментах проектирования и предоставляют возможность согласовывать дизайн и код каждого компонента к единой версии.
Версионирование компонентов предоставляет множество преимуществ как для разработчиков, так и для пользователей: первые могут непрерывно передавать обновления для определенных компонентов, а вторые получают эти обновления без возникновения конфликтов.
Преимущества версионирования компонентов
Обновления
Пользователи могут получать обновления только тех компонентов, которые они используют. Правила SemVer отлично подходят для связи различных обновлений по старшим, младшим и патч-версиям.
Такие инструменты, как Bit, упрощают этот процесс как для разработчиков, так и для пользователей, предоставляя такие функции, как автоматическое создание тегов для зависимых компонентов при внесении изменений.
Избежание избыточных конфликтов зависимостей
Разработка внутренних компонентов и одновременное добавление сторонней библиотеки создают конфликты версий зависимостей.
Например, в приложении находится внутренний компонент «Scroller» с зависимостью «Scroll-JS» в версии 3.0.1. Сторонняя библиотека добавляет в приложение компонент «Button». Однако она также содержит компонент «Scroller», зависимый от «Scroll-JS» в версии 2.0.2. В данном случае могут возникнуть конфликты.
Тем не менее, если приложение принимает из библиотеки только компонент «Button», то конфликт полностью устраняется.
Непрерывные релизы, исправления и откаты
Библиотеки компонентов с единой версией не позволяют распространителю выпускать постепенные обновления для каждого компонента. Например, новая старшая версия «Slider» не может быть выпущена до следующей старшей версии библиотеки. То же самое касается младших и патч-версий, которые обновляют версию в соответствии с библиотекой.
Версионирование отдельных компонентов предоставляет возможность непрерывного релиза обновлений и безопасного выполнения отката или внесения исправлений. Таким образом, версию «Slider» можно повысить с 1.0.0 до 1.0.1, не дожидаясь следующего релиза библиотеки.
Смешение и соответствие UI-композиции
Компоненты SemVer можно использовать для внедрения набора общих компонентов и объединения их со специальными версиями.
Например, можно безконфликтно внедрить набор общих компонентов с версией 1.0.0 и обновить только «Slider» с патчем до версии 1.0.1. В крайних случаях возможно даже представить различные версии компонента на одной странице.
С помощью bit import это можно выполнить локально прямо в приложении. Поскольку HTML-разметка, стиль и сценарий инкапсулированы в компоненте, он не будет конфликтовать с другими типами компонентов.
Сохранение независимости команды
Когда команда принимает библиотеку с единой версией, она связывает разработку своего приложения с разработкой библиотеки, что предполагает управление roadmap’ом продукта и свободу предоставления обновлений.
Версионирование компонентов «узаконивает» внедрение и модификацию компонентов, а такие инструменты, как Bit, «легализуют» разработку общих компонентов. С помощью команды bit import разработчики, использующие общие компоненты, могут изменять и обновлять любой из них, а также смешивать версии и добавлять собственные компоненты и версии в коллективный пул.
Производительность, стабильность и скорость разработки
Версионирование отдельных компонентов ускоряет разработку и повышает производительность созданного приложения.
Производительность. При добавлении и использовании лишь необходимых компонентов уменьшается размер пакета приложения. В результате браузер анализирует меньшее количество кода, что сокращает время выполнения.
Стабильность. Компоненты SemVer повышают стабильность благодаря безопасному внедрению постепенных обновлений в определенные UI. При обновлении отдельных компонентов также упрощается использование модульных тестов. Bit тестирует и собирает каждую версию в отдельности, прежде чем внедрить ее в приложение.
Скорость разработки. Использование общих компонентов повышает скорость работы команды. При необходимости обновление можно как запросить, так и выполнить самостоятельно (т.е. bit import). В результате экономится время на разработку новых функций и на обслуживание текущей базы кода.
Распределение SemVer для каждого компонента с использованием Bit
Bit — это инструмент, выполняющий тегирование различных компонентов на основе SemVer внутри одного проекта (библиотеки или приложения).
С помощью команды bit add Bit отслеживает компоненты в репозитории, анализирует каждый из них и выполняет поиск всех его файлов и зависимостей. Он автоматизирует процесс упаковки компонента, генерирует файл package.json и изолирует его встроенную/тестовую среду. В результате каждый компонент может быть версионирован, собран, протестирован и экспортирован по отдельности.
Команда bit tag тегирует компонент с помощью SemVer, а затем Bit подсказывает, какие компоненты также необходимо обновить, и автоматически тегирует их.
Версионированные компоненты можно экспортировать и распространять между командами и проектами. После обновления до новой версии компонент может независимо обновляться различными приложениями по правилам SemVer.
Bit также помогает сохранить независимость каждой команды, предоставляя возможность импортировать (bit import) общие компоненты в собственный проект.
Пример: тегирование компонентов в проекте
В этом примере показан компонент hello/world. Предположим, что он уже изолирован и добавлен в Bit (с помощью bit add). В таком случае ему уже предоставлены независимые конфигурации сборки и тестирования (Bit также автоматизирует этот процесс). С этого момента компонент становится отдельной единицей, находящейся внутри проекта.
При запуске bit status получаем следующий вывод:
$ bit status
new components
> hello/world... ok
Чтобы тегировать компонент hello/world, используем bit tag:
$ bit tag hello/world
1 components tagged | 1 added, 0 changed, 0 auto-tagged
added components: hello/world@0.0.1
Вы также можете тегировать все новые или модифицированные компоненты в области видимости с помощью --all:
С помощью опции --scope можно тегировать все компоненты, находящиеся в локальной области видимости. Bit согласовывает все компоненты по указанному номеру версии:
bit tag --scope 1.0.1 # все компоненты в локальной области видимости установлены на версии 1.0.1
Bit может устанавливать определенную версию при тегировании компонента:
$ bit tag hello/world 1.0.0
1 components tagged | 1 added, 0 changed, 0 auto-tagged
added components: hello/world@1.0.0
Bit также может тегировать все компоненты с помощью указанного инкремента SemVer. Bit поддерживает такие инкременты, как patch, minor и major:
После тегирования компоненты можно экспортировать с помощью bit export в удаленную коллекцию.
Пример: обновление и автоматическое тегирование зависимостей
Bit управляет зависимостями благодаря сохранению полного графа зависимостей компонентов. После тегирования Bit также помечает другие компоненты, находящиеся в локальной области видимости и зависящие от него.
Зависимые компоненты всегда помечаются patch версией независимо от основного инкремента компонента.
Допустим, у нас есть 2 компонента: navbar и main-menu. navbar импортирует компонент mainmenu следующим образом:
import MainMenu from '../main-menu/main-menu';
Отслеживаем компоненты в bit с помощью команды bit add. bit status отображает добавленные компоненты:
Тегируем оба компонента до версии 0.0.1:
Снова запускаем bit status, который теперь отображает тегированные компоненты:
Теперь внесем некоторые изменения в код main-menu, который является зависимостью navbar, и снова запускаем bit status:
Мы видим, что main-menu изменено, а navbar также тегируется, поскольку его зависимость была изменена.
Теперь тегируем main-menu. В результате мы видим, что navbar также тегирован:
После этого все тегированные компоненты, включая зависимости, переходят в состояние staged. Для проверки можно запустить bit status.
Заключение
Версионирование отдельных компонентов — это важнейший шаг на пути к сохранению независимости команды, безопасному созданию и развертыванию частей приложения, а также совместному использованию и синхронизации компонентов в различных приложениях.
Читайте также:
Читайте нас в телеграмме и vk
Перевод статьи Jonathan Saring: The Case for Versioning Independent UI Components
