Как сделать микрофронтенд

Обновлено: 04.07.2024

Webpack Module Federation — микрофронтенд на современных технологиях (часть 2) – deep dive

По мотивам вопросов из предыдущей статьи мы решили написать вторую часть и рассказать, что удалось сделать еще.

На повестке дня:

- Роутинг хостового приложения (React/Vue Routing внутри Angular)

- Полноценные адаптеры для работы удаленных плагинов

- Использование сервисных модулей в рантайме

Микрофронтенд, как не скатиться в ад

Всем доброго времени суток!

Сегодня речь пойдёт о таком страшном звере, как micro-frontend. Знаю: всем эта тема порядком надоела, но просмотрев полтора десятка выступлений осознал, что не все до конца понимают, что это такое и какие сложности следует решать при организации micro-frontend’а. В данной статье я дам универсальные советы, расскажу с чем не стоит связываться и, в целом, как не превратить проект в ад из callback’ов или непонятных интерфейсов. Итак, обо всем по порядку.

Что такое micro-frontend?

Точного определения днём с огнём не сыщешь. Суть в том, что термин micro-frontend подразумевает наличие множества изолированных приложений с интерфейсом, для взаимодействия с ними посредством API. Это позволяет использовать версионированность, не опираясь на рядом стоящие компоненты. Наглядным примером такой реализации являются различные npm-пакеты. Так же micro-frontend подразумевает под собой использование микро-сервисной архитектуры, что в совокупности даёт нам инкапсулированную логику не зависящую от окружения.

Чем был плох предыдущий подход - монолит?

Для того, чтобы понять преимущества micro-frontend’а нам следует разобраться чем именно он отличается от, так называемого, монолита.

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

От одного приложения — к сотне. Путь микрофронтенда в Тинькофф Бизнес

Привет, меня зовут Ваня, недавно я выступил на CodeFest 11, где рассказал про путь Тинькофф Бизнеса на фронтенде от одного приложения к сотне. Но, так как в ИT очень быстро все меняется, а ждать запись еще долго, сейчас я тезисно расскажу о нашем шестилетнем путешествии в дивный мир микрофронтенда!

Как готовить микрофронтенды в Webpack 5

Всем привет, меня зовут Иван и я фронтенд-разработчик из компании DexSys.

На моём комментарии про микрофронтенды набралось целых три лайка, поэтому я решил написать статью с описанием всех шишек, что наш стрим набил и набивает в результате внедрения микрофронтендов.

Начнём с того, что ребята с Хабра (@artemu78, @dfuse, @Katsuba) уже писали про Module Federation, так что, моя статья - это не что-то уникальное и прорывное. Скорее, это шишки, костыли и велосипеды, которые полезно знать тем, кто собирается использовать данную технологию.

Frontend Meetup 20/04

Вместе со спикерами из Devexperts, Почты России, Леруа Мерлен и Райффайзенбанка узнаем об опыте разработки продуктов: как найти подход к Blazor, использовать плагин Figma для работы с white label, разрабатывать картографический раздел отделений и внедрять микрофронтенды.

Микрофронтенды: разделяй и властвуй

Всем привет! Меня зовут Аня, я фронтенд-разработчик в Delivery Club. Хочу рассказать про использование микрофронтендов. Поговорим о том, что же это за зверь такой — микрофронтенд, почему мы решили использовать этот подход в своих проектах и с какими проблемами столкнулись при внедрении.
Читать дальше →

Micro-frontends. Асинхронный подход к мультикомандной разработке

Вы когда нибудь задумывались о том, как в условиях мультикомандной разработки современного продукта избежать задержек из-за синхронизации команд? Далее я поделюсь опытом такой разработки на примере нашей команды Циан.Финансы. Деталями вертикального подхода к разработке и почему мы работаем именно так.

Микрофронтенды. Учимся на ошибках

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

Идея: Микро-интерфейсs

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

Мы нашли несколько реализаций, поддерживающих это:

Мы хотим использовать VueJS в нашем интерфейсе (vue, vue-router, vue-resource, vue-loade, webpack)

Вопросов

Возможен ли составной UI (например, Micro Frontend) с VueJS (стандартные инструменты Vue), есть ли примеры проектов?
У нас более одной страницы, поэтому нам нужно решение для перехода с одной стороны на другую. Как мы можем реализовать переходы между страницами?
Можно ли установить Ивент-автобус между компонентами VueJS?
Как мы можем реализовать двунаправленная связь между компонентами (родитель-потомок, потомок-родитель)?

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

Ответ на все эти вопросы - да. Vue хорошо подходит для микро-интерфейса. Вы хотите добавить vuex в свой список используемых библиотек vue, и это также позаботится о вашей шине событий. Двунаправленная связь осуществляется посредством передачи свойств от родителя к дочернему и передачи событий от дочернего элемента к родительскому. Но вы можете использовать автобус и для этого.

ПРИВЕТ, Мне нужна такая же архитектура для большого большого приложения, которое мы собираемся создать на VueJS, поэтому вы имеете в виду, что если у меня, например, 20 модулей, то лучше создать 20 приложений VueJS (каждое по модулю?) Если это правда, как сделать вы разделяете управление состоянием между ними, или как вы используете компонент, который находится в другом приложении VueJS, из другого приложения VueJS? Все это звучит действительно очень интересно. Спасибо

Что касается микро-интерфейсов, вы можете подумать о смешивании нескольких интерфейсных технологий (Vue, React, веб-компоненты . ) в зависимости от того, что лучше всего подходит для команды / домена, связанного с микро-интерфейсом. Это тоже объясняется здесь

Ответы 2

Осуществимость: составной интерфейс.

Is it possible to create a composite UI (micro front end) based on vue by using standard vue tools?

Переходы страниц: маршрутизация

We have more than one page, so we need a solution to navigate from one side to another. How can we realize page transitions?

vue-router - инструмент для этой работы. Он разработан основной командой, поэтому ожидайте тесной интеграции и отличной поддержки функций.

Ивент-автобус

Is it possible to established a Event-Bus between the VueJS components?

Каждый экземпляр Vue реализует интерфейс событий. Это означает, что для связи между двумя экземплярами или компонентами Vue вы можете использовать Пользовательские события. Вы также можете использовать Vuex (см. Ниже).

Двунаправленная связь

How can we implement a bidirectional communication between the components?

Объявить props (массив или объект) в дочернем элементе
Передайте ребенку через .

См. Демонстрацию ниже:

Вы также можете получить Рекомендации для Дочерние компоненты ( ref s) и вызвать для них методы.

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

Заключительное примечание: Как видите, одним из огромных преимуществ Vue является то, насколько легко вы можете прототипировать и тестировать функциональность. Нет шага сборки, несколько абстракций поверх сырого JS. По сравнению с другими фреймворками я бы сказал, что это важный бонус.

Отличный ответ, случайно зашел зайти, хотя оно того стоило !.

@acdcjunior . отличная работа! Спасибо за подробный и обоснованный ответ. Мы приняли ваши предложения и уже успешно их протестировали. VueRouter и Vuex оказались очень полезными. Будем и дальше придерживаться подхода…

Исчерпывающий ответ, конкретно демонстрирующий все рассматриваемые вопросы suggested Я предложил отредактировать, чтобы улучшить структуру.

Мне было любопытно найти быстрый способ реализовать архитектуру Микро-интерфейс. Некоторые хорошие ресурсы, которые я нашел, находятся по адресу:

: методы, стратегии и рецепты для создания современного веб-приложения с несколькими командами, которые могут поставлять функции независимо. : маршрутизатор Javascript для интерфейсных микросервисов

Однако проблема, с которой я столкнулся, - сложность настройки. Мне нравится видеть результаты довольно быстро.

Пираль

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

Подход Vue

Мне удалось придумать подход, и я надеюсь вскоре написать об этом статью среднего размера, однако на данный момент

Вышеупомянутый подход работает лучше всего, если вы хотите:

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

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

piral.io - это супер круто - если бы оболочка приложения работала за считанные минуты, развернула ее в корзине S3, настроила канал с feed.piral.io и развернула мои первые модули. Все за один проход! Однако я полностью использовал React.

@amustapha - у меня возникла проблема в моем микро-приложении vue с тем, что вы написали в пункте № 2, т.е. вы можете использовать vue-router, а с динамическим сопоставлением маршрутов (например, / apps /: app_name) вы можете загружать под-приложения по мере необходимости. В каждом подприложении вы также можете иметь систему маршрутизации . На самом деле мой веб-компонент vue использует маршрутизатор vue для управления своей навигацией, и когда я использую этот веб-компонент в приложении оболочки vue, которое также использует свой собственный vue роутер. он не запускает приложение оболочки и выдает ошибку: Uncaught TypeError: невозможно переопределить свойство: $ router. Что я могу здесь сделать? спасибо в нареч.

Для чего они нам понадобились

Сложно жить с монолитом. Быстро писать код мешали устаревание подходов, фреймворков и зависимостей, а также связанность логики.
Совместная разработка. Долго решать конфликты, противоречивость изменений.
Проблема с тестированием. Когда прилетали баги от других задач и команд, было непонятно, в чём причины.
Развёртывание было зависимое и блокирующее.

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

Устройство проекта

Основное старое приложение на AngularJS, к которому мы планируем подключать новые микроприложения.
Dashboard-приложение на Angular 6, подключенное через iframe (но оно со временем разрослось и от описанных выше проблем не избавило). К нему подключаются приложения, здесь хранятся старые страницы.
Приложения на VueJS, которые используют самописную библиотеку компонентов на VueJS.

Мы поняли, что ограничения тормозят развитие проекта. Поэтому сформулировали возможные пути:

Разделение приложения на страницы по маршрутам.
iframe.
Микрофронтенды.

Что такое микрофронтенды

По сути, это микросервисы в браузере. В бэкенд-разработке микросервисы используют повсеместно, а в мире фронтенда этот подход встречается редко. Вот что можно почитать и посмотреть о микрофронтендах:
Сейчас наш проект только переходит на микрофронтенды, наша команда стала первопроходцем. И мы столкнулись с рядом проблем.

Проблемы внедрения микрофронтендов

1. Ещё один iframe? Может, уже хватит?

К великому разочарованию, наше dashboard-приложение открывается внутри iframe (исторически так сложилось), и нам очень не хотелось делать один iframe внутри другого. Однако это был запасной план. Если вдруг что-то пойдёт не так, то просто заворачиваем микрофронтенд в iframe — и готово рабочее приложение.

Мы видели несколько недостатков:

Неудобная навигация. Каждый раз для редиректа на внешнюю ссылку нужно использовать window.postMessage .
Сложно верстать в iframe.

Что мы сделали:

2. А где стили?

Первое: импортировать все стили в один файл и передать его во vue-wrapper (но это слишком топорно и пришлось бы добавлять вручную каждый новый файл со стилями).
Второе: подключить стили с помощью CSS-модулей. Для этого пришлось подкрутить webcomponents-loader.js , чтобы он вшивал собранный CSS в shadow dom. Но это лучше, чем вручную добавлять новые CSS-файлы :)

3. Теперь про иконки забыли!

4. Без авторизации никуда!

5. Нас волнуют зависимости

В микрофронтенд-приложении указываем в webpack.config.prod.js в разделе externals те зависимости, которые хотим вынести:
Здесь мы указываем, что под именем Vue в window можно будет найти зависимость vue .
В рамках оболочки (в нашем случаем в dashboard-приложении) выполняем npm install vue (и другие npm install -зависимости).
В dashboard-приложении импортируем все зависимости:
Получаем удовольствие.

6. Разные окружения

Мы имеем три окружения: локальное, тестовое и прод. Сначала у нас была проблема при переходе с тестового окружения на прод: для микрофронтенда приходилось явно прописывать в проекте ссылку.

Решили мы это следующим образом:

Выводы

Реализация микрофронтендов, их подключение и решение проблем при работе с ними тянулись довольно долго, но это того стоило. Микрофронтенды помогли нам отделить релизы команд друг от друга, разделить кодовую базу и избавиться от долгих решений конфликтов при git merge .

Думаю, со временем всё больше проектов будут отказываться писать монолит и переходить на более универсальные подходы. Одним из таких подходов могут стать и микрофронтенды. Надеюсь, эта статья поможет кому-то в реализации :).

Поздравляю! Вы нашли самый популярный, наиболее полный и актуальный онлайн-ресурс для обучения использованию микрофронтендов!

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

Разница между этим курсом и всеми остальными: вы поймете шаблоны проектирования, используемые ведущими компаниями для создания массово популярных веб-приложений.

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

Меньшие по размеру, проще для понимания кодовые базы
Используйте разные наборы библиотек для каждого субприложения - используйте лучший инструмент для работы!
Разверните каждую часть отдельно - ограничьте вероятность прерывания ваших пользователей
Позвольте каждой из ваших инженерных команд работать независимо

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

Что ты построишь?

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

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

Ниже приведен частичный список тем, которые вы найдете в этом курсе:

Изучите шаблоны проектирования, используемые крупнейшими компаниями мира
Поймите, когда использовать микрофронтенды
Свяжите несколько приложений вместе с помощью многоуровневой системы маршрутизации
Разместите CSS на своей странице, чтобы предотвратить заражение кросс-приложений
Избегайте совместного использования состояния между приложениями для обеспечения изоляции
Развертывайте каждую часть вашего приложения независимо, чтобы избежать продакшн ошибок
Создайте CI / CD для автоматизации процесса доставки
Используйте несколько интерфейсных фреймворков в одном приложении
Максимизируйте производительность с помощью объединения модулей

Читайте также: