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

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

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

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

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

Чтобы помочь в достижении взаимопонимания между разработчиками пользовательского интерфейса и разработчиками приложений, я использовал Storybook.js для визуализации компонентов в качестве интерактивного руководства по стилю.

Настройка библиотеки компонентов

Библиотека - это новый проект npm, но в конечном итоге она будет использоваться основным приложением, поэтому следует учесть несколько моментов:

  • Версия React, используемая в основном приложении (добавьте это как одноранговую зависимость)
  • Управление жизненным циклом, используемое в основном приложении (сторонние компоненты могут вызывать проблемы)
  • Поскольку основное приложение является частным, как можно установить библиотеку без загрузки в общедоступное репозиторий npm?

Создание нового проекта React Native

Чтобы начать сборку библиотеки, мне нужно было создать новый проект React Native.

Для этого я использовал create-react-native-app (после глобальной установки), который дал мне базовый проект для работы.

Я также установил инструменты Expo CLI для запуска приложения с помощью Expo, поскольку библиотека компонентов в настоящее время не использует код, отличный от JS.

Как только у меня был запущен пример приложения React Native, пришло время приступить к настройке сборника рассказов.

Добавление сборника рассказов

Самый простой способ настроить сборник рассказов - это установить глобальный интерфейс командной строки S torybook, а затем запустить команду getstorybook », которая сделает за вас всю тяжелую работу по настройке Storybook для вашего проекта.

Затем мне просто нужно было добавить export default from './storybook'; в App.js, а Expo позаботилась обо всем остальном, когда я запустил приложение.

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

После того, как я запустил Storybook, я мог добавлять компоненты.

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

Я создал папку src для компонентов, которая будет папкой, упакованной при создании библиотеки, и добавил свой первый компонент.

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

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

Улучшения процесса

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

Чтобы уменьшить количество повторяющегося кода в тестах и ​​сборнике рассказов, я решил использовать storyshots - аддон для Storybook, который заботится о тестах моментальных снимков.

Однако я не совсем уверен, что Storyshots - правильный подход, поскольку он объединяет все снимки в один большой файл, и я предпочел бы больший контроль над этим, чтобы было четкое соответствие между тестируемым компонентом и файлом снимка.

Чтобы помочь с тестированием и отображением компонентов в Storybook, я создал папку data, содержащую объекты данных для передачи компонентам.

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

Работа с модальными окнами

Одной из трудных для решения проблем было то, как отобразить модальный компонент, поскольку модальный будет накладываться на пользовательский интерфейс Storybook, и если нет средств для управления состоянием видимости, это делает Storybook непригодным для использования.

Добавить этот тип функциональности в историю не так просто, как объявить логическую переменную для хранения значения и изменить ее с помощью функций, поскольку Storybook не будет повторно отображать компонент при изменении значения. Вместо этого вам понадобится надстройка управления состоянием, чтобы удерживать ценность.

Есть два государственных аддона для Storybook dump247 / storybook-state и sambego / storybook-state.

Я обнаружил, что dump247 столкнулся с ошибкой, когда из-за состояния гонки в версии Storybook React Native он пытался получить доступ к значению, которое еще не было установлено, и взорвался, но аддон sambego / storybook-state работает нормально. очарование .

Используя надстройку Storybook-State, я смог создать начальный компонент кнопки, который при нажатии представлял модальный компонент, а затем я мог отклонить модальный компонент при нажатии кнопки закрытия.

Резюме

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

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

Примечание команды Plain English

Вы знали, что у нас четыре публикации? Проявите немного любви, предложив им следующие слова: JavaScript на простом английском, AI на простом английском, UX на простом английском , Python на простом английском - спасибо и продолжайте учиться!

Кроме того, мы всегда заинтересованы в продвижении хорошего контента. Если у вас есть статья, которую вы хотели бы отправить в какую-либо из наших публикаций, отправьте электронное письмо на адрес [email protected] с вашим именем пользователя Medium и тем, о чем вы хотите написать, и мы вернуться к вам!