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

В нашей команде сошлись сразу несколько вещей:

  1. Наша команда разработчиков пользовательского интерфейса создала систему дизайна, которая позволила нам использовать одни и те же стили пользовательского интерфейса во всех приложениях.
  2. Нам понравилась концепция нашей библиотеки стилей БЭМ, но мы сочли многословным добавлять так много имен классов ко всему.
  3. Мы быстро получали больше проектов, поэтому нам нужно было упростить процесс разработки для быстрого прототипирования.
  4. Моя команда обнаружила React Storybook, среду разработки компонентов React.

Все это имело смысл - давайте создадим общую библиотеку компонентов!

  • Мы можем импортировать эти компоненты в каждый проект.
  • Код разрабатывается только один раз в одном месте.
  • Мы можем абстрагироваться от длинных имен классов.
  • Мы можем использовать Storybook для самостоятельного документирования нашей библиотеки и предоставления примеров для использования.
  • Как команда, мы все можем внести свой вклад в этот проект и разработать передовой опыт. И отклик был отличным! Мы даже работаем в разных командах, чтобы создать это вместе.

Наша библиотека компонентов

Первое, что нам понадобится, это библиотека. В новом проекте мы создали папку компонентов и начали с наших самых основных компонентов.

Вот пример урезанного компонента. Наш значок включает текст для отображения в значке и контекст, который представляет собой цвет, применяемый к значку с помощью нашей системы дизайна. Мы также применяем некоторые стандартные свойства к каждому компоненту: className, style и … otherProps, что позволяет передавать любые другие классы, стили , или реквизит, который вам нужен, что делает ваш компонент очень гибким.

import React, { PropTypes } from ‘react’;
const Badge = ({
    text,
    context,
    className,
    style,
    ...otherProps
}) => {
    const classes = `${context} ${className}`;
    return (
        <span
            className={ classes }
            style={ style }
            { ...otherProps }
        >
            { text }
        </span>
     );
};
Badge.defaultProps = {
    text: ‘’,
    context: ‘default’,
    className: ‘’,
    style: {}
};
Badge.propTypes = {
    text: PropTypes.string,
    context: PropTypes.string,
    className: PropTypes.string,
    style: PropTypes.object
};
export default Badge;

Сборник рассказов

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

  • Параметры - позволяет настроить несколько параметров сборника рассказов. Мы изменили имя по умолчанию на GumGum Storybook, добавили URL-адрес и разместили надстройки справа, а не снизу по умолчанию.
  • Readme - позволяет писать документацию в формате markdown в виде файла readme. Раньше у нас была вся наша документация в файлах сборника рассказов, но мы были ограничены, потому что не вся уценка поддерживалась. Наши файлы также начали становиться длинными и беспорядочными. Хранение всей документации в собственном файле уценки позволяет очень легко писать документацию. Теперь мы организуем наш сборник рассказов с папкой для каждого компонента, содержащей README.md и index.js:
/_stories
    /Badge
       index.js
       README.md
    /Button
       index.js
       README.md
  • Knobs - превращает ваш реквизит в предмет действия. Например, в нашем компоненте Badge у нас есть контекстная опора. Есть несколько вариантов, включая [по умолчанию, основной, дополнительный, успех, информация, предупреждение, опасность]. Используя ручки, мы можем передать все эти параметры в нашу книгу рассказов, и пользователь увидит выбор, который позволяет им динамически переключать любые параметры. Это действительно мощно, потому что кто-то может поиграть с компонентом и увидеть все параметры, не создавая ничего.
  • Информация - отображает источник вашей истории и отображает свойства компонента и свойства по умолчанию. В сочетании с Ручками это дает пользователю возможность изменить реквизит на то, что ему нужно, а затем скопировать источник истории в свой проект.
  • Действия - некоторые из ваших компонентов могут быть более сложными и отслеживать действия. Этот аддон показывает пользователю, когда выполняется действие, поэтому вы знаете, что компонент правильно подключен.

Для начала запустите эту команду в своем проекте, а затем следуйте инструкциям в документации Storybook:

yarn i --save-dev @storybook/react

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

И, наконец, нам нужно было добавить ссылку на наш собственный файл css для нашей дизайн-системы. Это входит в .storybook/preview-head.html

Экспорт вашей библиотеки

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

Во-первых, у нас есть единственный файл index.js, который экспортирует каждый компонент.

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

Наш .babelrc:

{
// whichever presets your projects use should match here
    "presets": [
        "es2015", 
        "stage-0",
        "react"
    ],
    "plugins": [
        "transform-runtime", // for polyfills
        "transform-react-remove-prop-types" // we use this to remove the propTypes
    ]
}

Чтобы справиться с собственно задачами сборки, мы добавили несколько скриптов в наш package.json:

“module”: “dist-es6/index”,
“prebuild”: “rimraf dist dist-es6”, // removes the /dist-es6 folder before building
“build”: “babel components — out-dir dist-es6 — source-maps inline”, // builds everything in /components/index.js to /dist-es6
“postinstall”: “postinstall-build --only-as-dependency dist”

Postinstall позволяет нам автоматически создавать нашу библиотеку как модули es6, когда библиотека добавляется в проект. Таким образом, нам не нужно создавать файлы и хранить их как часть нашей библиотеки. Чтобы справиться с зависимостями от других наших проектов, мы используем postinstall-build --only-as-dependency для получения любых зависимостей, которые нам нужны для создания нашей библиотеки, и удаления их после их сборки.

Импорт вашей библиотеки в другие приложения

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

Мы не публикуем это в NPM, поэтому при добавлении библиотеки в проект мы можем использовать эту команду:

yarn add git+ssh://[email protected]/YOUR_PROJECT.git#0.

(Мы выпускаем релизы и используем управление версиями для этого проекта. Настоятельно рекомендуется!)

А затем в файле компонента вы можете импортировать компоненты из своей библиотеки:

import { Badge } from 'YOUR-LIBRARY';

Наслаждайтесь своей новой библиотекой! Особая благодарность команде GumGum Web Engineering за их постоянную поддержку и вклад в этот проект. Посетите нашу библиотеку на gumdrops.gumgum.com.

Мы всегда ищем новые таланты! Просмотр вакансий.

Следуйте за нами: Facebook | Твиттер | | Linkedin | Инстаграм