Задание 1

Метод реализации микрофронтендов:

Метод реализации микрофронтендов был выбран Run Time в гибридном подходе для использования преимуществ как серверной компоновки, так и клиентской. В нашей реализации клиент будет инициировать взаимодействие с сервером, отправляя HTTP-запросы. Сервер будет возвращать клиенту JSON с данными, которые клиент будет парсить и передавать в React-компоненты для рендеринга. После этого данные могут изменяться разными микрофронтендами при взаимодействии с пользователем, используя глобальное состояние приложения.

Выбор метода Run Time был сделан по следующим причинам:

1. Гибкость и динамичность: Этот метод позволяет загружать и изменять компоненты приложения на лету, что повышает гибкость и позволяет быстрее реагировать на изменения требований.
2. Меньшая зависимость от сборки: В отличие от Build Time, Run Time метод не требует повторной сборки всего приложения при изменении одного из микрофронтендов.
3. Упрощенная интеграция и развертывание: В случае развертывания новых функций или исправлений можно обновлять только соответствующие микрофронтенды без необходимости полного разворачивания всего приложения.
4. Поддержка модульности и изоляции: Микрофронтенды могут быть разработаны и развернуты независимо друг от друга, что улучшает модульность и изоляцию компонентов.

Таким образом, использование метода Run Time предоставляет значительные преимущества в гибкости, масштабируемости и простоте управления приложением.

Выбор фреймворка микрофронтендов:

Для создания микрофронтендов я использовал фреймворк Webpack Module Federation.

Этот выбор обусловлен следующими причинами:

• Общий код: В проекте есть общий код, который будет использоваться несколькими микрофронтендами. Webpack Module Federation позволяет эффективно шарить (разделять) общий код между микрофронтендами, избегая дублирования и улучшая производительность.

• Единый фреймворк: Поскольку все микрофронтенды используют один и тот же фронтенд-фреймворк (React), Webpack Module Federation позволяет легко интегрировать их между собой без необходимости использования разных фреймворков.

• Гибкость и масштабируемость: Webpack Module Federation поддерживает динамическую загрузку модулей, что упрощает разработку и развертывание микрофронтендов, позволяя обновлять или заменять части приложения без перезагрузки всей страницы.

Список микрофронтендов состоит из выделенных в проекте доменов, а также дополнительных микрофронтов для реализации архитектуры микрофронтов.

Вот список микрофронтов:

• host - главное приложение, которое импортирует и рендерит компоненты из микрофронтендов.
• auth - отвечает за аутентификацию пользователей. Включает в себя все компоненты, необходимые для регистрации, входа в систему и проверки токенов пользователя.
• profile - отвечает за управление профилем пользователя. Здесь находятся компоненты для просмотра и редактирования информации профиля пользователя.
• shared-components - каталог содержит общие компоненты, которые используются в различных микрофронтендах. Сюда входят такие компоненты, как заголовки, подвали, формы, попапы, а также утилиты и контексты.
• photo - отвечает за работу с изоборажениями.

Для внедрения инструмента нужно убедиться, что мы используем не ниже Webpack 5. Затем необходимо создать конфигурационный файл webpack.config.js для каждого из микрофронтендов, включая главное приложение. В этих конфигурационных файлах следует указать импортируемые и экспортируемые модули.

Компоненты

host:

• App – основной компонент приложения
• ProtectedRoute – компонент проверки авторизации
• InfoTooltip – компонент работы с сообщениями
• Main – основной компонент для отображения списка карточек изображений

auth:

• Login – компонент для логина пользователя
• Register – компонент регистрации пользователя

profile:

• EditAvatarPopup – компонент для редактирования аватарки пользователя
• EditProfilePopup – компонент для редактирования профиля пользователя

shared:

• Footer – подвал сайта
• Header – шапка сайта
• PopupWithForm – диалоговое окно сохранения

photo:

• AddPlacePopup – компонент добавления изображения
• ImagePopup – компонент просмотра изображения
• Card – компонент карточки с изображением

---

Задание 2

Ссылка на диаграмму: https://drive.google.com/file/d/1UGVBsH1HYO3MskghCT9O41w5sFV0ir1T/view?usp=sharing