Очистите MVVM с помощью React и React Hooks

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

Я проиллюстрирую подход к этому, основанный на чистой архитектуре.

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

  1. Список продуктов
  2. Создать продукт
  3. Удалить существующий продукт
  4. Обновите существующий продукт

Чтобы получить более наглядное представление о нашей функции управления продуктами. Используем вайрфрейминг:

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

Наше приложение будет иметь следующие экраны пользовательского интерфейса для управления продуктами:

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

Давайте проиллюстрируем, как представления будут подключаться к серверной части системы, на следующей схеме:

Мы будем использовать React и React Hooks для этого проекта.

Хорошей отправной точкой для этого приложения React является создание групп (папок) и контейнеров (файлов) кода:

├─ Data
│   ├─ DataSource
│   │   └─ ProductDataSource.js
│   └─ Repository
│       └─ ProductRepository.js
├─ Domain
│   └─ UseCase
│       └─ Product
│           ├─ GetProducts.js
│           ├─ GetProduct.js
│           ├─ CreateProduct.js
│           ├─ UpdateProduct.js
│           └─ DeleteProduct.js
└─ Presentation
    └─ View
        └─ Product
            ├─ List
            │   ├─ Components
            │   │   ├─ ProductList.js
            │   │   └─ AddButton.js
            │   ├─ View.js
            │   └─ ViewModel.js
            ├─ New
            │   ├─ Components
            │   │   ├─ NameTextField.js
            │   │   ├─ PriceTextField.js
            │   │   └─ SaveButton.js
            │   ├─ View.js
            │   └─ ViewModel.js
            ├─ Detail
            │   ├─ Components
            │   │   ├─ NameTextField.js
            │   │   ├─ PriceTextField.js
            │   │   ├─ UpdateButton.js
            │   │   └─ DeleteButton.js
            │   ├─ View.js
            │   └─ ViewModel.js
            └─ index.js

Просмотр списка продуктов

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

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

Эти компоненты могут разрабатываться изолированно, и им нужно только придерживаться интерфейса или точек взаимодействия, указанных в представлении (например, onClick, onRowClick, данные).

Модель просмотра списка продуктов

Новый вид продукта и модель просмотра

Просмотр сведений о продукте и просмотр модели

Заключение:

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

Репозиторий GitHub: https://github.com/nanosoftonline/clean-mvvm-react

Первоначально опубликовано на https://nanosoft.co.za.