Вы уже слышали о CDD (Component Driven Development, именно так она будет рассматриваться в этой статье и далее) из различных источников, и есть технологические гиганты, которые искренне следят за этим. Я начну с очень короткого введения, а также добавлю некоторые особенности, которые вы можете добавить к своим сценариям в вашей организации. Для начала, CDD - это компоненты уровня представления, которые можно поддерживать и управлять версиями отдельно, чтобы вы могли легко интегрировать их в различные продукты в вашей организации. Теперь в разных организациях и продуктах у вас будут свои собственные варианты использования. Очевидно, с точки зрения лидера, вопрос должен заключаться в том, почему я должен инвестировать в что-то подобное, потому что масштаб инвестиций от усилий и мышления как таковых не будет маленьким.

Теперь давайте сделаем шаг назад и подумаем о том, что происходит при создании продукта (ов) и его функций. У вас будет команда UX, работающая в тандеме с командой дизайнера продукта, которая будет работать над рабочими процессами, каркасами, взаимодействиями и документацией, связанной с требованиями. У нас также будут визуальные дизайнеры, которые будут указывать цвета, связанные с брендом, в соответствии с этими требованиями. После подписания этот документ будет передан группе инженеров (обратите внимание, что в идеале группа инженеров участвует на предыдущем этапе, совместно работая над техническими деталями, необходимыми для обсуждаемых деталей). Теперь команда инженеров (я включаю организацию QA в англоязычную организацию) будет продолжать разработку с использованием LLD, тестовых проектов, написания сценариев модульного тестирования, кода и т. Д. Это будет рассмотрено и в конечном итоге перейдет в производство. Теперь в этом сценарии мы можем предположить, что несколько команд работают параллельно и разрабатывают много похожего кода / компонентов в разных областях приложения и для разных продуктов в рамках организации. Это может привести к дополнительным часам работы (что, в свою очередь, является долларом для организации) и привести к дублированию кода, влияющему на обслуживание кода приложения (ов). Также существует риск различного взаимодействия одинаковых компонентов в одном приложении, если не проверять их вручную и централизованно.

Теперь давайте вернемся к CDD, здесь мы говорим о центральном репозитории, в котором осуществляется сотрудничество всей организации, при этом все рабочие процессы, которые мы обсуждали в предыдущем абзаце, происходят в одном пространстве. Это приведет к проектированию, разработке и документированию очень детализированных и сложных компонентов в центральном репозитории. Это могут быть чисто визуальные компоненты, простые компоненты, составные компоненты или компоненты, которые могут быть полезны и могут быть повторно использованы в кодовой базе разных команд. Выбор того, как и что будет зависеть от сценариев в разных местах, и в этом прелесть CDD. Теперь у нас есть репозиторий с документацией, который сэкономит усилия команд UX, продукта и инженеров, а также станет источником истины. При правильном управлении версиями это также позволит вам выпускать разные приложения в разные циклы. Таким образом, в основном мы улучшили скорость разработки и тестирования, расширили охват документации по коду, сделали код поддерживаемым, многоразовым, сделали ваши компоненты и, следовательно, приложения более доступными, а также в некоторой степени улучшили масштабируемость. Это также помогает в сценариях микропрограмм. Также ниже включена блок-схема очень высокого уровня

Пара платформ, на которые вы можете ссылаться для этой цели, - это сборник рассказов или bit.dev. Storybook также предоставляет Chromatic - платформу автоматизированного рабочего процесса. У них также есть интересная функция для обзора пользовательского интерфейса. Обе платформы очень активно используются, и у Storybook есть очень активное сообщество с множеством надстроек, которые можно использовать в таких фреймворках, как Angular, React, Vue и т. Д. Storybook также позволяет создавать собственные развертывания и интеграции CI / CD для людей, которые предпочитают на заказ, а также размещать документацию по вашему выбору. Дополнения для Storybook можно найти по адресу https://storybook.js.org/addons. Несколько моих любимых дополнений - Storyshots (тестирование снимков), Accessibility (тестирование A11y). Есть много других интересных дополнений, если интересно, ознакомьтесь с ними.

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