Микрофронтенды — архитектурный подход, вдохновлённый микросервисами. Рассмотрим преимущества и недостатки, а также практическую реализацию на React и Vue.
Микросервисы и их влияние на фронтенд-разработку
Архитектурный стиль микросервисов для бэкенда предполагает разделение приложения на небольшие, независимые сервисы. В отличие от монолитного подхода, где всё обрабатывается в одном месте, микросервисы обеспечивают модульную разработку (например, отдельные модули для авторизации, работы с файлами). Эта идея легла в основу архитектуры микрофронтендов.
Монолитный фронтенд, использующий один фреймворк (Angular, Vue, React), в больших приложениях может стать проблематичным. Микрофронтенды предлагают решение: функционал делится на независимые части, каждая из которых разрабатывается отдельной командой (включая фронтенд, бэкенд и базу данных). Это подобно созданию небольших, самостоятельных приложений, объединяемых в одно целое.
Пример: в Instagram навигация, блок сохранённых историй и блок постов могут быть реализованы как отдельные микрофронтенды. Каждая часть может разрабатываться отдельной командой и на разных фреймворках.
Практическая реализация на Single-Spa
Для организации микрофронтендной архитектуры используется пакет Single-Spa (более 40 000 еженедельных скачиваний). Он выступает хостом, запускающим различные приложения внутри одного.
Приложение состоит из двух частей: навигация (React) и карточка (Vue), взаимодействующие между собой. Запуск — командой npm start.
Структура проекта
В корне проекта находятся файлы конфигурации и package.json. Директория source содержит файлы React и Vue приложений, а также main.js (запуск приложения). index.html содержит два корневых div для React и Vue приложений.
React и Vue приложения
React-приложение использует single-spa-react для инициализации, указывая корневой компонент, DOM-элемент для монтирования и параметры. Экспортируемый объект содержит информацию о запуске и монтировании. Код базовый, включает навигацию и стили. Структура Vue-приложения аналогична, использует single-spa-vue. Включает функционал карточки и стили.
Общий Store
Основная сложность микрофронтендов — взаимодействие между приложениями. Пример использует простой store (отдельная папка store), реализованный функцией, создающей локальный store с аккаунтом и массивом подписчиков. Он предоставляет функции для увеличения счётчика и подписки на изменения.
main.js делает store доступным для React и Vue приложений. При изменении счётчика в Vue, через store, обновление происходит и в React-компоненте (и наоборот). Это достигается подпиской на изменения store в useEffect (React) и onMounted (Vue) хуках.
Микрофронтенды — мощный, но сложный подход, требующий взвешенного применения. Он позволяет модульную разработку больших приложений, но добавляет абстракцию и сложность. Выбор архитектуры зависит от масштаба и специфики проекта.