Говоря о разработке библиотеки компонентов React (2): лучшие практики для библиотек компонентов

В большой экосистеме React относительно зрелая фронтенд-команда столкнется с проблемой:Как повысить эффективность разработки команды?

Система имеет большое количество бизнес-сценариев и бизнес-кодов, и похожие страницы и коды возникают бесконечным потоком.Как управлять и абстрагировать эти похожие коды и модули, безусловно, является проблемой, с которой столкнутся многие команды. Постоянно копируете код? Или абстрагироваться от компонентов пользовательского интерфейса или бизнес-компонентов? Очевидно, что последний более эффективен.

Итак, теперь мы стоим перед выбором: одно — выбрать уже существующую библиотеку компонентов в экосистеме React, такую как antDesign, Material-UI и другие зрелые библиотеки компонентов; другое — разработать набор собственной библиотеки компонентов для команды. . Команда фронтенда Youzan выбрала последнее, произведенное и открытое.Zent, Zent предоставляет полный набор основных компонентов пользовательского интерфейса и общих бизнес-компонентов.В настоящее время у нас есть более 45 компонентов, которые широко используются в различных ПК-компаниях Youzan. В этой статье поговорим о том, как разработать отличную библиотеку компонентов React и составить полный набор библиотек компонентов.

1. Выбрать открытый исходный код? Или сделать колеса своими руками?

В среде React есть множество отличных библиотек UI-компонентов, известные antDesign в Китае и Material-UI в зарубежных странах — относительно стабильные и отличные библиотеки компонентов. Так зачем нам самим разрабатывать библиотеку компонентов? Причины примерно следующие:

Продукты Youzan для ПК для каждого направления бизнеса имеют независимые спецификации дизайна, включая, помимо прочего, стили компонентов и режимы взаимодействия.
Бизнес-сценарии продуктов для ПК, таких как Youzan Micro Mall, Retail и Beauty Industry, сложны, и некоторые общие компоненты, такие какDesignа такжеSKUкомпоненты.
Продукты для ПК, которые должны поддерживать несколько бизнес-подразделений одновременно.
Члены команды участвуют в разработке библиотеки компонентов в режиме open source, в этот период будет много обсуждений и столкновений друг с другом, что также является тренировочным процессом для команды.

Во-вторых, состав библиотеки компонентов

Создание полной библиотеки компонентов требует рассмотрения:

Идеи дизайна компонентов
Спецификация кода компонента
Процесс разработки компонентов
тестирование компонентов
Сопровождение компонентов (включая управление связями с общественностью/проблемами, выпуск пакетов, документацию)

1. Идеи дизайна компонентов

Компонент — это абстракция некоторого кода с тем же бизнес-сценарием и режимом взаимодействия.Библиотека компонентов должна сначала убедиться, что визуальный стиль и спецификация взаимодействия каждого компонента согласованы.Xкомпонент вAБизнес-сценарий — это взаимодействие, в которомBБизнес-сценарии — это еще один стиль пользовательского интерфейса, поэтому невозможноXАбстракция значительно увеличивает стоимость сборки компонентов. Поэтому в начале проектирования компонентов вам сначала нужно абстрагироваться и согласовать единый набор визуальных стилей и спецификаций взаимодействия.

Во-вторых, определение свойств библиотеки компонентов должно быть достаточно расширяемым, а компоненты полностью контролируются внутри, сохраняя компоненты с унифицированным вводом и выводом, давайте возьмем пример кнопки.

// Button is a react component of Zent
<Button
  type="primary"
  className="customer-classname"
  loading={true}
  disabled={false}
  size="large"
  onClick={this.handleClick}
>
  {children}
</Button>

Это компонент кнопки, мы определяем множество реквизитов для обозначения состояния, например, тип представляет визуальный стиль кнопки, размер представляет размер, отключено отключено, состояние загрузки и т. д. Эти состояния не будут поддерживать состояние внутри компонент, а все состояния передаются по пропсам ввода, кастомный className удобен нам для настройки стиля, а дочерний нам удобен для настройки отображаемого содержимого кнопки.

Кнопка даже обеспечиваетaФункция метки, просто передайте в props: href кнопку.

// Button as <a>
<Button
  type="primary"
  className="customer-classname"
  href="https://www.youzan.com"
  target="_blank"
>
  有赞首页
</Button>

Нам нужно сделать несколько соглашений:

Все состояние компонента контролируется пропсами
Дочерние компоненты поддерживают пользовательскую структуру Dom
Не пишите структуру Dom внутри компонента

2. Спецификация кода компонента

Внешняя библиотека внутренних компонентов Youzan с использованием инструментов lint с открытым исходным кодом — felint .

Felint — это интерфейсный инструмент проверки кода, который объединяет eslint, stylelint и git hook. Felint делает три вещи для вашего проекта:

Инициализируйте файл конфигурации eslint/stylelint, будь то проект реагирования, проект vue, es5 или es6, он обеспечивает целевую схему конфигурации.
Установите eslint/stylelint и его зависимости в node_modules текущего проекта.
Смонтируйте git hooks для принудительной проверки при фиксации кода

Для конкретного использования, пожалуйста, обратитесь к официальному документу --фетровый адрес документа.

3. Процесс разработки компонента

После согласования дизайнерских идей и спецификаций кода компонентов мы можем участвовать в разработке компонентов.Основной процесс разработки библиотеки компонентов включает следующие пункты:

Инициализация компонента
Кодирование компонентов
Демонстрация компонентов

В Zent есть команда инициализации компонента:yarn new-component, эта команда выполняет большую часть работы по инициализации компонента, включая автоматическое создание каталога и кода шаблона, необходимых компоненту, а также добавление кода компонента js и css. Затем можно приступать к написанию кода компонента, стиль кода и спецификации написаны строго в соответствии со спецификациями lint, если спецификации не соблюдены, код не может быть отправлен. После написания компонента вам необходимо написать демо-версию компонента и запустить его.Способ состоит в том, чтобы запустить сервер локально для запуска демо-версии компонента, которую можно использовать в качестве инструмента отладки для компонента.

4. Тестирование компонентов

Существует множество фреймворков модульного тестирования js, таких как chai, jest, mocha, karma и т. д. Библиотека компонентов Zent использует комбинацию jest + энзим.Давайте рассмотрим пример:

// Button UI test
import { mount } from 'enzyme';

describe('Button', () => {
  it('Button UI test', () => {
    const wrapper = mount(<Button>OK</Button>);
    expect(wrapper.hasClass('zent-btn')).toBe(true);
    expect(wrapper.text()).to.equal('OK');
  });
});

Использование jest для тестирования пользовательского интерфейса имеет ограничения. С его помощью можно тестировать только базовые структуры и стили DOM. Некоторые логические взаимодействия невозможно измерить, и они могут охватывать только большинство ситуаций.yarn testИспользуется для выполнения тестового сценария, результаты теста будут отображаться в терминале.

5. Обслуживание компонентов

Ежедневное обслуживание компонентов составляет большую часть всего жизненного цикла библиотеки компонентов.После того, как библиотека компонентов будет построена, функции компонентов будут продолжать повторяться позже, возможно, исправления ошибок или новые функции.Мы управляем итерацией этих компоненты через пиар и выдачу., в то же время нам нужно управлять чейнджлогом компонента. В общем, обслуживание компонентов в основном включает в себя: PR/обработку проблем, выпуск пакетов и управление журналом изменений.

Давайте возьмем Zent в качестве примера, чтобы представить спецификацию PR.

Правило заголовка PR: [исправление ошибки/критическое изменение/новая функция] Имя компонента: Изменить описание контента

Предыдущие квадратные скобки используются для обозначения типа PR/проблемы: исправление ошибки — исправление ошибки компонента, критическое изменение — несовместимое изменение, новая функция — новая функция.
Изменения должны быть максимально краткими, обобщая изменения PR или описывая проблемы.
Пожалуйста, опишите на китайском
Пожалуйста, используйте английский язык для имени компонента, первая буква заглавная

PR используется для создания журналов изменений. Стандартные PR помогают создавать более четкие журналы изменений. Давайте посмотрим на пример Zent:

Компонентный аутсорсинг

Пакет компонентов может управляться только теми, у кого есть разрешение на выпуск пакетов.Zent выпускает пакеты в единицах библиотек компонентов.yarn buildУпакует весь код Zent, используйте командуyarn publishПри отправке пакета тест компонента будет запущен до отправки пакета, и пакет можно будет отправить только после прохождения теста.

Документация по компонентам

Хороший документ — это стандарт отличной библиотеки компонентов. Хороший документ может улучшить общее качество и удобство библиотеки компонентов. Если команда готова потратить время на написание документа, создаваемая ими библиотека компонентов не должна быть слишком плохой. Go, обслуживание документов библиотеки компонентов также является важной частью жизненного цикла библиотеки компонентов, иногда вам даже нужно сделать двуязычный документ на китайском и английском языках.

Вот адрес документа библиотеки компонентов Zent:Zent.

3. Резюме

В этой статье мы объясним, как создать библиотеку компонентов React, исходя из пяти аспектов: идей проектирования компонентов, стандартов кодирования, процесса разработки, тестирования и ежедневного обслуживания, а также возьмем Zent в качестве примера, чтобы описать, как это делает Youzan. все должны пройти через этот жизненный цикл, но нам нужно подумать о следующем:Как создать хорошую экологическую среду библиотеки компонентов?Нам нужно найти способ, чтобы больше людей участвовали в этом и вместе выступали в качестве сопровождающих библиотеки компонентов.Причина выбора открытого исходного кода заключается в том, чтобы вывести экологическую среду React.Сегодня компонентизация интерфейса стала установленным фактом. , и нам не нужно многократно строить колеса. , а нужно пробовать новые прорывы в компонентизации, отрываться от оков фронтенд-технологии и абстрагировать имеющийся код с высоты инженера. На пути к компонентизации нам еще многое предстоит сделать, и Zent — это только начало.