Microfrontend(MF) — использование паттерна MVP (модель, представление, презентация)

МОТИВАЦИЯ

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

MVP

Шаблон проектирования MVP помогает нам отделить слой представления от логики, проводить модульные тесты и писать более чистый код.

Вид: слой, отвечающий за разработку пользовательского интерфейса, выполнение запросов и отображение результатов. В этом слое не должно быть бизнес-логики, здесь находятся действия, фрагменты и т.д.
Presenter: слой, отвечающий за взаимодействие с представлением и моделью. Следует отметить, что представление делает запрос, затем Presenter запрашивает информацию у слоя модели, после получения информации Presenter доставляет ее представлению.
Модель: Уровень, отвечающий за доступ к базе данных, API Rest, кэш-памяти и т.д.

Диаграмма взаимодействия компонентов

Структура

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

Мы можем наблюдать внешний объект, single-spa, отвечающий за вызов страниц, доступных в MF. Они выступают в качестве макетов для распределения компонентов, которые отвечают за выполнение микродействий, таких как отображение списка товаров или кнопки для заполнения заказа на покупку, среди прочих действий. Эти компоненты открываются через @inputs или @outputs для связи со страницами, которые организуют взаимодействие с менеджерами.

В случае, когда требуется информация от внешнего объекта, будь то другой FM, API, локальная база данных или другой источник данных, менеджеры должны взаимодействовать со службами, отвечающими за доступ к этим ресурсам. В этот момент информационный поток начинает возвращаться к своим истокам, сервис возвращает данные, менеджер выполняет свою бизнес-логику, компонент показывает ожидаемые результаты в соответствии с правилом визуализации, а страница в соответствии с макетом показывает компоненты, которые являются недействительными в качестве ответа от single-spa. Исходя из предыдущего описания, предлагается следующая структура:

├───e2e
│   └───src
└───src
    ├───app
    │   ├───components
    │   │   └───test-component
    │   ├───managers
    │   │   └───test-manager
    │   ├───mocks
    │   │   └───services.mocks.ts
    │   ├───models
    │   │   └───test-model
    │   ├───pages
    │   │   ├───empty-route
    │   │   └───test-page
    │   ├───services
    │   │   ├───healthCheck
    │   │   └───translation
    │   └───utils
    ├───environments
    └───single-spa

Войдите в полноэкранный режим Выход из полноэкранного режима

Описание структуры

Модели
- Папки моделей: содержит модели, которые будут служить объектами обмена в рамках архетипа.
- Model.index.ts: файл-экспортер объектов внутри папки модели для облегчения импорта в микрофронтенд.
Утилиты
- Utils.ts: базовый файл для создания функций-утилит в общем виде в микрофронтенде.
Услуги
- Папки сервисов: содержит объекты сервисов, которые взаимодействуют с внешними по отношению к МП объектами, например, доступ к API, базе данных браузера, событие от другого микрофронтенда и т.д.
- Service.index.ts: файл экспортера объектов внутри папки services для облегчения импорта в микрофронтенд.
Менеджеры
- Папки Managers: содержит объекты менеджеров, отвечающие за бизнес-логику в микрофронтенде. Эта концепция введена в новой версии архетипа, чтобы отделить бизнес-логику от компонентов. Эти менеджеры становятся доступными благодаря инъекции зависимостей.
- Manager.index.jt : файл экспортера объектов внутри папки managers для облегчения импорта в микрофронтенд.
Компоненты
- Папки компонентов: это часть микрофронтенда с входами (@inputs) и выходами (@ouputs) для переопределения содержимого в соответствии с правилами отображения и их входами, таким же образом компонент через свои выходы может сообщать о выполнении действий для представления новой информации. Идея такого разделения заключается в том, чтобы сделать компоненты доступными для повторного использования на других страницах.
- Component.index.ts: файл-экспортер объектов внутри папки компонентов для облегчения импорта в микрофронтенд.
Страницы
- Страницы папок: эта концепция добавлена в данной версии для управления двумя потребностями. Первый из них выполняет роль макета для распределения компонентов, их расположения и визуализации. Вторая обязанность — выступать в роли оркестратора между компонентами и менеджерами. Например, если компонент хочет выполнить операцию «BusinessCalculation», он должен предоставить вывод, позволяющий идентифицировать запрос на это действие. Для этого страница должна предварительно зарегистрировать эти выводы и таким образом иметь возможность выполнить соответствующую бизнес-логику непосредственно менеджеру. После завершения вызова менеджера и получения ответа страница обновляет информацию с помощью входов компонентов и может обновить свое содержимое.
- Pages.index.ts: файл экспортера объектов внутри папки pages для облегчения импорта в micrfrontend.
Издевательства
- Services.mocks.ts: файл для создания макетов сервисов для использования в наших модульных тестах, чтобы повторно использовать эти макеты во всех наших спецификациях.

Авторы:
Джонатан Сосапанта https://www.linkedin.com/in/jhonatansosapanta/
Альфредо Ромеро https://www.linkedin.com/in/sir-david

Microfrontend(MF) — использование паттерна MVP (модель, представление, презентация)

Рекомендуем почитать: