Совместное использование компонентов всех масштабов для оптимизации взаимодействия через интерфейс.
Атомный дизайн
Термины атомы, молекулы и страницы взяты из основополагающей работы Брэда Фроста Атомный дизайн. В своей книге он призывает нас думать о нашем пользовательском интерфейсе как о иерархической структуре, состоящей из независимых модулей, упорядоченных по ролям и структуре - от простейшего компонента, атома, до целой страницы.
Атомарные компоненты - это компоненты, которые нельзя разбить на более мелкие части (и если они это сделают, они станут совершенно бесполезными). Атомы могут быть кнопочными элементами, входами, метками и т. Д. Молекулы - это относительно простые группы элементов пользовательского интерфейса, функционирующие вместе как единое целое. Например, метка формы, ввод для поиска и кнопка, которая формирует молекулу формы поиска. Как упоминалось ранее, эта иерархия продолжается вплоть до полных страниц.
Сложность и возможность повторного использования
Иерархия «атомарного дизайна» коррелирует с уровнями абстракции и возможности повторного использования. Например, страница - это очень конкретная сущность. Его нельзя использовать повторно, и он не будет появляться в приложении более одного раза. Более простые компоненты, атомы, молекулы и даже организмы могут появляться много раз в одном приложении.
Эта возможность многократного использования чрезвычайно важна для организаций, стремящихся создать систему проектирования или библиотеку компонентов.
Совместное использование компонентов как средство сотрудничества между независимыми командами
Мы традиционно используем простые компоненты, атомы и молекулы, чтобы поддерживать единообразный пользовательский интерфейс, но нет веских причин, по которым мы не должны использовать аналогичные методологии для обеспечения сотрудничества между независимыми командами. Мы можем сотрудничать в стиле микро-интерфейсов, чтобы команды могли независимо создавать большие составные части - организмы, шаблоны и даже страницы.
Хватит говорить, давайте код!
Для этой демонстрации я буду использовать Bit (Github). Bit - это инструмент, который позволяет вам изолировать компоненты и композиции из любой кодовой базы и делиться ими с коллекцией компонентов в bit.dev.
В качестве краткого POC я выделю и расскажу о компонентах разных масштабов. Затем я установлю организм toDoList в новый проект React.
Чтобы следовать этому POC, клонируйте это репо:
$ git clone https://github.com/giteden/basic-todo-app $ cd basic-todo-app $ yarn
Компоненты экспорта
Установите Bit CLI:
$ yarn global add bit-bin
Авторизоваться:
$ bit login
Инициализировать рабочее пространство:
$ bit init --package-manager yarn
Отслеживайте все компоненты приложения (находящиеся в библиотеке «components»):
$ bit add src/components/*
Мое репо больше не версируется исключительно как бессмысленный код. Теперь у него есть дополнительный семантический уровень, на котором код версируется как компоненты.
Давайте проверим, есть ли какие-либо проблемы с графом зависимостей, которые необходимо решить:
$ bit status
new components
(use "bit tag --all [version]" to lock a version with all your changes)
> button ... ok
> h1 ... ok
> list ... ok
> removable-list-item ... ok
> text-input ... ok
> to-do-list ... ok
Все хорошо :)
Настройте компилятор для общих компонентов, чтобы их можно было использовать в других средах (с другими конфигурациями сборки).
$ bit import bit.envs/compilers/react --compiler the following component environments were installed - bit.envs/compilers/[email protected]
Пометьте компоненты, чтобы собрать их в изолированной среде и зафиксировать изменения версии.
$ bit tag --all 1.0.0
6 component(s) tagged
(use "bit export [collection]" to push these components to a remote")
(use "bit untag" to unstage versions)
new components
(first version for components)
> [email protected]
> [email protected]
> [email protected]
> [email protected]
> [email protected]
> [email protected]
Экспорт отслеживаемых компонентов:
$ bit export <username>.basic-todo-app
Например:
$ bit export eden.basic-todo-appКомпоненты теперь доступны в моей (или вашей) basic-demo-app коллекции в bit.dev.
Установить компонент в новом проекте
Давайте установим весь to-do-list в новом проекте:
$ npx create-react-app new-project $ cd new-project $ yarn add @bit/eden.basic-todo-app.to-do-list
Давайте добавим пакет в наше приложение:
import React from 'react';
import './App.css';
import ToDoList from '@bit/eden.basic-todo-app.to-do-list';
function App() {
return (
<div className="App">
<h1>New Project</h1>
<ToDoList />
</div>
)
}
export default App;
Заключение
Это был очень простой POC, но вы можете легко представить, как использование одной и той же методологии позволит нескольким группам независимо предоставлять функции, при этом одна команда объединяет все это в одно полное приложение (с помощью $ bit list --outdated группа составителей может идентифицировать компоненты, у которых есть более новые версии)
