Структура React приложения

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

Технологии

Поскольку эта статья будет носить характер мнения. Сделаем несколько предположений о том, какие технологии будут использоваться в проекте:

• Приложение - React (Hooks)
• Глобальное управление состоянием - Redux, Redux Toolkit
• Маршрутизация - React Router
• Стили - CSS, Sass, Styled Components
• Тестирование - Jest, React Testing Library

Нет четкого мнения по поводу стилей, идеальны ли Styled Components, CSS-модули или пользовательский набор для Sass, поэтому можно использовать любой подходящий вариант. Также предполагается, что тесты находятся рядом с кодом, а не в папке tests на верхнем уровне. Все, что здесь написано, может быть применимо, если вы используете обычный Redux, а не Redux Toolkit. Можно настроить ваш Redux как feature slices. Также будет удобно визуализировать созданные компоненты с помощью, например, Storybook. Также покажем, как проект будет выглядеть с этими файлами, если вы решите использовать его в своем проекте. Для примера будем использовать приложение “Библиотека”, который имеет страницу со списком книг, страницу со списком авторов и систему аутентификации.

Структура каталога

Структура каталогов верхнего уровня будет выглядеть следующим образом:

• assets - глобальные статические файлы, такие как изображения, svg, логотип компании и т.д.
• components - глобальные общие/повторно используемые компоненты, такие как макеты (обертки), компоненты форм, кнопки
• services - JavaScript модули
• store - глобальное хранилище Redux
• utils - утилиты, помощники, константы и т.п.
• views - можно также назвать pages, здесь будет содержаться большая часть приложения. Лучше сохранять привычные соглашения, где это возможно, поэтому src содержит все, index.js является точкой входа, а App.js устанавливает аутентификацию и маршрутизацию.

.
└── /src
    ├── /assets
    ├── /components
    ├── /services
    ├── /store
    ├── /utils
    ├── /views
    ├── index.js
    └── App.js

Также в проекте могут присутствовать некоторые дополнительные папки, которые у вас могут быть, такие как types, если это проект TypeScript, middlewares (промежуточное программное обеспечение), если необходимо, возможно, контекст для работы с Context API и т.д.

Псевдонимы (алиасы)

Полезно настроить систему на использование псевдонимов, чтобы все, что находится в папке компонентов, можно было импортировать как @components, изображения как @assets и т. д. Если у вас Webpack, это делается через конфигурацию resolve.

module.exports = {
  resolve: {
    extensions: ['js', 'ts'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@assets': path.resolve(__dirname, 'src/assets'),
      '@components': path.resolve(__dirname, 'src/components'),
      // ...etc
    },
  },
}

Это просто облегчает импорт из любого места в проекте и перемещение файлов без изменения импорта, и вы никогда не получите что-то вроде ../../../../../../../components/.

Компоненты

В папке components компоненты сгруппированы по типам - формы, таблицы, кнопки, макеты и т.д. Специфика зависит от конкретного приложения. В данном примере предполагается, что вы либо создаете собственную систему форм, либо создаете привязку к существующей системе форм (например, комбинируя Formik и Material UI). В этом случае вы создадите папку для каждого компонента (TextField, Select, Radio, Dropdown и т.д.), а внутри будет файл для самого компонента, стили, тесты и Storybook, если он используется.

• Component.js - собственно компонент React
• Component.styles.js - файл стилей для компонента
• Component.test.js - тесты
• Component.stories.js - файл Storybook.

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

.
└── /src
    └── /components
        ├── /forms
        │   ├── /TextField
        │   │   ├── TextField.js
        │   │   ├── TextField.styles.js
        │   │   ├── TextField.test.js
        │   │   └── TextField.stories.js
        │   ├── /Select
        │   │   ├── Select.js
        │   │   ├── Select.styles.js
        │   │   ├── Select.test.js
        │   │   └── Select.stories.js
        │   └── index.js
        ├── /routing
        │   └── /PrivateRoute
        │       ├── /PrivateRoute.js
        │       └── /PrivateRoute.test.js
        └── /layout
            └── /navigation
                └── /NavBar
                    ├── NavBar.js
                    ├── NavBar.styles.js
                    ├── NavBar.test.js
                    └── NavBar.stories.js

Обратите внимание, что в каталоге components/forms есть файл index.js. Часто справедливо советуют избегать использования файлов index.js, поскольку они не являются явными, но в данном случае это имеет смысл - в конечном итоге он будет индексом всех форм и будет выглядеть примерно так:

// src/components/forms/index.js

import { TextField } from './TextField/TextField'
import { Select } from './Select/Select'
import { Radio } from './Radio/Radio'

export { TextField, Select, Radio }

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

import { TextField, Select, Radio } from '@components/forms'

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

Сервисы

Каталог services менее важен, чем компоненты, но если вы создаете простой модуль JavaScript, который используется остальной частью приложения, он может быть полезен. Обычный пример - модуль LocalStorage, который может выглядеть следующим образом:

.
└── /src
    └── /services
        ├── /LocalStorage
        │   ├── LocalStorage.service.js
        │   └── LocalStorage.test.js
        └── index.js

Пример сервиса:

// src/services/LocalStorage/LocalStorage.service.js
export const LocalStorage = {
  get(key) {},
  set(key, value) {},
  remove(key) {},
  clear() {},
}

import { LocalStorage } from '@services'

LocalStorage.get('foo')

Хранилище (стор, store)

Глобальное хранилище данных будет содержаться в директории store - в данном случае Redux. Каждая функциональность будет иметь свою папку, в которой будет содержаться слайс Redux Toolkit, а также экшены и тесты. Эта настройка также может быть использована с обычным Redux, вы просто создадите файл .reducers.js и .actions.js вместо slice. Если вы используете саги, это может быть .saga.js вместо .actions.js для действий Redux Thunk.

.
└── /src
    ├── /store
    │   ├── /authentication
    │   │   ├── /authentication.slice.js
    │   │   ├── /authentication.actions.js
    │   │   └── /authentication.test.js
    │   ├── /authors
    │   │   ├── /authors.slice.js
    │   │   ├── /authors.actions.js
    │   │   └── /authors.test.js
    │   └── /books
    │       ├── /books.slice.js
    │       ├── /books.actions.js
    │       └── /books.test.js
    ├── rootReducer.js
    └── index.js

Вы также можете добавить что-то вроде ui секции стора для обработки модальных окон, всплывающих уведомлений, переключения боковой панели и других глобальных состояний пользовательского интерфейса, что, лучше, чем иметь const [isOpen, setIsOpen] = useState(false) повсюду. В rootReducer вы импортируете все свои фрагменты и объединяете их с помощью combineReducers, а в index.js настраиваете магазин.

Утилиты (Utils)

Нужна ли вашему проекту папка utils - решать вам. Но обычно существуют некоторые глобальные функции, такие как валидация и конвертеры, которые могут легко использоваться в различных разделах приложения. Если вы упорядочите их - не будете иметь один файл helpers.js, содержащий тысячи функций, - она может стать полезным дополнением к организации вашего проекта.

.
└── src
    └── /utils
        ├── /constants
        │   └── countries.constants.js
        └── /helpers
            ├── validation.helpers.js
            ├── currency.helpers.js
            └── array.helpers.js

Опять же, папка utils может содержать все, что вы захотите, и что, по вашему мнению, имеет смысл держать на глобальном уровне. Если вам не нравятся "многоуровневые" имена файлов, вы можете просто назвать его validation.js. Однако, это облегчает навигацию по именам файлов при поиске в IDE.

Views

Здесь находится основная часть вашего приложения: в каталоге views. Любая страница в вашем приложении - это "представление" (view). В этом небольшом примере представления довольно хорошо согласуются со стором Redux, но не обязательно, что стор и представления будут полностью совпадать, поэтому они разделены. Кроме того, книги могут тянуть за собой авторов, и так далее. Все, что находится внутри представления, является сущностью, которая, скорее всего, будет использоваться только в этом конкретном представлении - BookForm, который будет использоваться только на маршруте /books, и AuthorBlurb, который будет использоваться только на маршруте /authors. Это могут быть специфические формы, модальные окна, кнопки, любые компоненты, которые не будут глобальными. Преимущество хранения всего в домене вместо объединения всех страниц в компоненты/страницы заключается в том, что это позволяет легко взглянуть на структуру приложения и узнать, сколько в нем представлений верхнего уровня, и понять, где находится все, что используется только этим представлением. Если есть вложенные маршруты, вы всегда можете добавить папку вложенных представлений в основной маршрут.

.
└── /src
    └── /views
        ├── /Authors
        │   ├── /AuthorsPage
        │   │   ├── AuthorsPage.js
        │   │   └── AuthorsPage.test.js
        │   └── /AuthorBlurb
        │       ├── /AuthorBlurb.js
        │       └── /AuthorBlurb.test.js
        ├── /Books
        │   ├── /BooksPage
        │   │   ├── BooksPage.js
        │   │   └── BooksPage.test.js
        │   └── /BookForm
        │       ├── /BookForm.js
        │       └── /BookForm.test.js
        └── /Login
            ├── LoginPage
            │   ├── LoginPage.styles.js
            │   ├── LoginPage.js
            │   └── LoginPage.test.js
            └── LoginForm
                ├── LoginForm.js
                └── LoginForm.test.js

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

Итоги

Эта структура приложения и организация React, которая хорошо масштабируется для большого enterprise приложения, удобна для тестирования и стилизации, а также сохраняет все вместе в функционально ориентированном виде. Она более вложенная, чем традиционная структура, в которой все находится в компонентах и контейнерах. Легко взглянуть на эту систему и понять, что нужно для вашего приложения и куда идти, чтобы поработать над конкретным разделом или компонентом, который влияет на приложение глобально.

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

Что такое многоуровневая архитектура и зачем ее использовать?

Многоуровневая архитектура — это шаблон проектирования программного обеспечения, который организует приложение на несколько уровней, каждый из которых имеет определенный набор обязанностей. Эти слои организованы иерархически, при этом уровни более высокого уровня полагаются на слои более низкого уровня. Большинство многоуровневых архитектур имеют три или четыре стандартных уровня. Каждый слой может быть разработан и протестирован независимо в многоуровневой архитектуре, и изменения в одном слое не влияют на другие. Такое разделение позволяет разработчикам создавать организованные, модульные и масштабируемые системы, которые легче поддерживать и обновлять. Кроме того, такой подход позволяет вносить изменения в приложение без необходимости переписывать большие участки кода, снижая риск внесения ошибок или нарушения существующей функциональности. Давайте рассмотрим трехуровневую архитектуру в качестве примера, чтобы увидеть, как она может улучшить процесс разработки.

Трехуровневая архитектура

Вот эти три основных слоя: Презентационный слой (уровень представления, presentation layer) Уровень бизнес-логики (business logic layer, BLL) Уровень доступа к данным (data access layer, DAL) Уровень представления управляет взаимодействием с пользователем и представляет данные пользователю. Этот слой может представлять собой форму веб-интерфейса, десктопного или мобильного приложения. Он взаимодействует с уровнем бизнес-логики для выполнения действий и извлечения данных. Уровень бизнес-логики отвечает за реализацию бизнес-правил и рабочих процессов приложения. Этот уровень должен быть полностью независимым от уровня представления и не иметь представления о пользовательском интерфейсе. Он должен содержать всю логику и алгоритмы приложения и взаимодействовать с уровнем доступа к данным для получения необходимых данных. Уровень доступа к данным отвечает за взаимодействие с источниками данных приложения. Этот уровень отвечает за извлечение и хранение данных и должен быть отделен от уровня бизнес-логики. Он должен включать весь код, связанный с доступом к базе данных, вызовами API и другими внешними источниками данных.

Как использовать трехуровневую архитектуру в React

Давайте теперь рассмотрим, как мы можем применить принцип многоуровневой архитектуры к нашим React приложениям.

Уровень доступа к данным

Этот слой обычно реализуется в виде набора служебных функций (утилит), которые могут быть повторно использованы различными кастомными хуками. Рассмотрим следующую служебную функцию fetchData(), которая используется для получения данных из API.

export default async function fetchData() {
  const response = fetch('https://jsonplaceholder.typicode.com/users/1').then(
    (res) => {
      if (res.ok) return res.json();
      return Promise.reject(res);
    }
  );
  return response;
}

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

Уровень бизнес-логики

Этот слой обычно реализуется в виде набора пользовательских хуков, которые можно повторно использовать в разных компонентах. Рассмотрим следующий пользовательский хук seUserData(), который используется для получения данных о пользователе.

import React from "react";
import fetchData from "../util/fetchData";

const useUserData = () => {
  const [userData, setUserData] = useState([]);
  useEffect(() => {
    fetchData()
      .then((data) => setUserData(data))
      .catch((res) => console.error(res.status));
  }, []);
  return [userData];
};

export default useUserData;

Как видите, здесь вызывается функция fetchData() из слоя доступа к данным. Чтобы сделать этот хук более переиспользуемым, передайте путь URL-адреса в качестве аргумента кастомному хуку и передайте его в функцию fetchData().

Презентационный слой

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

import React from "react";
import useUserData from "./customHooks/useUserData";

const UserProfile = () => {
  const [userData] = useUserData();
  return (
    <div>
      {userData.id ? (
        <div>
          <ul> {userData.name} </ul>
          <ul> {userData.email} </ul>
        </div>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default UserProfile;

Пользовательский хук useUserData() используется в компоненте для взаимодействия с уровнем бизнес-логики и получения пользовательских данных для отображения пользователю. Помимо функции return, единственное, что должно быть включено в UI компоненты, как показано в этом примере, — это вызовы функций для уровня бизнес-логики. Это дает вам четкие UI компоненты, что значительно упрощает поиск и исправление ошибок, связанных с пользовательским интерфейсом.

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

• Переусложнение — поддерживайте простую и масштабируемую архитектуру и отказывайтесь от использования подходов, которые не соответствуют шаблонам React, таких как подходы на основе наследования.
• Сильная связанность — когда слои плотно связаны, то заменить один, не затрагивая другие, может быть стать сложной задачей. Уменьшите связанность, используя соответствующие шаблоны и методы, такие как внедрение зависимостей и интерфейсы.
• Игнорирование производительности — при неправильной реализации многоуровневая архитектура может повлиять на производительность приложения. При оптимизации архитектуры для повышения производительности учитывайте такие факторы, как разделение кода, отложенная загрузка и кэширование.
• Плохие соглашения об именах — используйте четкие и согласованные соглашения об именах для слоев, компонентов и функций. В противном случае разработчикам будет сложно понять и поддерживать код в долгосрочной перспективе.
• Отсутствие тестирования — каждый слой должен быть тщательно протестирован, чтобы убедиться, что он работает должным образом. Неспособность протестировать каждый слой может привести к ошибкам и другим проблемам в приложении.
• Отсутствие связности — каждый слой должен иметь высокую степень связности. Связность относится к тому, насколько тесно связаны функции и обязанности внутри слоя. Низкая связность может привести к тому, что код будет трудно понять и поддерживать.

Итоги

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