предисловие
MicroApp — это фреймворк микро-интерфейса, основанный на рендеринге, подобном веб-компоненту.В отличие от современных популярных фреймворков с открытым исходным кодом, он реализует микро-интерфейс на основе компонентного мышления, стремясь упростить начало работы и улучшить работу. эффективность. В настоящее время это самая дешевая платформа для доступа к микроинтерфейсам на рынке, которая предоставляет ряд полных функций, таких как песочница JS, изоляция стилей, изоляция элементов, предварительная загрузка, завершение адресов ресурсов, система подключаемых модулей и передача данных. MicroApp не имеет ничего общего со стеком технологий и не привязан к бизнесу и может использоваться в любой интерфейсной среде и бизнесе.
В этой статье мы представим MicroApp с точки зрения бизнеса и идей реализации, а также подробно представим его использование и технические принципы.
бизнес фон
С быстрым развитием Интернета в последние годы функции веб-приложений многих предприятий становились все более и более сложными в непрерывной итерации, а количество участвующих сотрудников и команд продолжало увеличиваться, что усложняло обслуживание проекта. Эта ситуация особенно распространена на стороне ПК.Команда также ищет решение для эффективного управления сложными приложениями, поэтому микрофронтенды упоминаются все чаще и чаще.
Микро-интерфейс — это не новая технология, а архитектурная концепция, которая разбирает одно веб-приложение на несколько небольших приложений, которые можно независимо разрабатывать, запускать и развертывать независимо, и интегрировать их в одно приложение.
В реальном бизнесе мы также столкнулись с той же проблемой и попробовали различные решения в разных бизнес-сценариях, таких как iframe, пакет npm, микроинтерфейсный фреймворк, и сравнили преимущества и недостатки различных решений.
iframe: среди всех микро-интерфейсных решений iframe является наиболее стабильным и наименее сложным в использовании, но у него есть некоторые неразрешимые проблемы, такие как низкая производительность, сложная связь, двойные полосы прокрутки и всплывающие окна, которые нельзя охватить глобально. , и его рост не Высокий, подходит только для простого рендеринга страницы.
пакет нпм: Инкапсуляция подприложений в пакеты npm и внедрение их через компоненты — лучшее решение с точки зрения производительности и совместимости, но фатальной проблемой являются обновления версий.Каждый выпуск версии должен уведомлять сторону доступа для синхронного обновления.Управление очень сложно.
Микро-фронтальная рамка: Популярные фреймворки микро-интерфейсов включают single-spa и qiankun, которые уравновешивают затраты на обслуживание и функции и в настоящее время являются уважаемыми решениями для реализации микро-интерфейсов.
Поскольку существуют проблемы с пакетами iframe и npm, которые теоретически не могут быть решены, мы сначала использовали qiankun в качестве решения, qiankun инкапсулирован на основе single-spa, предоставляя песочницу js, изоляцию стилей, предварительную загрузку и другие функции, и совместим с технологией Независимость от стека, совместимость с различными фреймворками.
требования бизнеса
Хотя цянькунь превосходен, он все же не может оправдать наших ожиданий. Первый вопрос заключается в том, что в нашем реальном сценарии использования каждый проект, подключенный к микрофронтенду, работает в течение длительного времени, и за каждый проект отвечает разный персонал и команды.Как уменьшить вторжение исходного кода, модификацию кода и стоимость связи, это то, что нас очень беспокоит, поэтому нам нужно решение, которое стоит меньше, чем доступ qiankun. Вторая проблема заключается в том, что в случае многостороннего доступа к приложениям песочница не может полностью избежать всех проблем, а способность qiankun справляться с такими непредсказуемыми проблемами не очень эффективна. В постоянном поиске мы нашли чрезвычайно краткую идею реализации, которая так же проста, как использование компонентов, и может быть подключена к микроинтерфейсу с небольшой модификацией кода, а также предоставляет систему подключаемых модулей, чтобы дать разработчикам возможность гибко решать проблемы.
Реализовать идеи
Микрофронтенд делится на основное приложение и подприложение, основное приложение также называют базовым приложением, которое является контейнером-носителем других приложений, а подприложение является встроенной стороной. С точки зрения основного приложения и подприложения мы изучаем более лаконичный и эффективный способ доступа к микроинтерфейсу.
Мысли о цинкуне и одиночном спа
Как в single-spa, так и в qiankun отслеживается событие изменения URL-адреса, а отображаемое подприложение сопоставляется и отображается при изменении маршрута. Этот вид рендеринга, основанный на мониторинге маршрутизации, является самой ранней реализацией single-spa.Как самый ранний и наиболее влиятельный фреймворк для микроинтерфейса, single-spa использовался для справки многими фреймворками и компаниями, что также приводит к тому, что большинство из текущих реализаций микроинтерфейса основаны на роутинге.монитор.
В то же время single-spa требует, чтобы подприложение модифицировало логику рендеринга и предоставило три метода: начальную загрузку, монтирование и размонтирование, которые соответствуют инициализации, рендерингу и размонтированию соответственно, что также приводит к изменению подприложения. входной файл. Эта функция также унаследована qiankun и требует некоторых изменений в конфигурации веб-пакета.
Нужно ли внедрять мониторинг на основе маршрутов и изменять входной файл подприложений и конфигурацию веб-пакета?
На самом деле это не так.Основа микро-фронтенда заключается в загрузке ресурсов и рендеринге.Типичным примером является метод рендеринга iframe.Пока может быть реализована функция изоляции элементов и роутинг соответствует требованиям,подприложения теоретически может быть встроен в другую страницу без изменения кода.Визуализация, мы пытаемся найти различные идеи реализации с этой точки зрения.
Компонентизация микро-фронтендов
Чтобы упростить этапы реализации микрофронтендов, мы должны отказаться от старых идей реализации и исследовать разные пути.
Мы опираемся на идею WebComponent и на ее основе вводим еще один более компонентный метод реализации: class WebComponent + HTML Entry.
HTML Entry: относится к установке html в качестве записи ресурса путем загрузки удаленного html, анализа его структуры DOM для получения статических ресурсов, таких как js, css и т. д., для реализации рендеринга микроинтерфейса, который также является схемой рендеринга, принятой в настоящее время. по цянькунь.
WebComponent: нативный веб-компонент, он состоит из двух основных компонентов: CustomElement и ShadowDom. CustomElement используется для создания пользовательских тегов, ShadowDom используется для создания теневой DOM, а теневая DOM имеет свойства изоляции естественного стиля и изоляции элементов. Поскольку WebComponent является нативным компонентом, его можно использовать в любом фреймворке, и теоретически это лучшее решение для реализации микрофронтендов. Но у WebComponent есть неразрешимая проблема — совместимость ShadowDom очень плохая, и некоторые интерфейсные фреймворки не могут нормально работать в среде ShadowDom, особенно фреймворк React.
класс веб-компонент: это использование CustomElement в сочетании с пользовательским ShadowDom для достижения в основном той же функции, что и WebComponent.
Из-за проблем с ShadowDom мы используем изоляцию пользовательского стиля и изоляцию элементов для реализации функций, аналогичных ShadowDom, а затем инкапсулируем приложение микроинтерфейса в CustomElement, тем самым имитируя и реализуя компонент, подобный веб-компоненту.Его использование и совместимость являются так же, как WebComponent, является последовательным и позволяет избежать проблемы ShadowDom. А благодаря функции изоляции пользовательского ShadowDom Micro App не нужно требовать от подприложений изменения логики рендеринга и предоставления таких методов, как single-spa и qiankun, а также не нужно изменять конфигурацию веб-пакета.
Мы инкапсулировали пользовательскую метку по приведенной выше схеме.micro-app, его механизм рендеринга и функции аналогичны WebComponent, и разработчики могут получить доступ к микроинтерфейсу точно так же, как и к веб-компонентам. Он совместим с любым фреймворком и более компонентен в использовании и обмене данными, что значительно снижает стоимость доступа к базовым приложениям, а количество изменений в подприложениях значительно уменьшается благодаря свойству изолированности элементов.
Как использовать
Далее мы представим методы доступа основного приложения и вспомогательного приложения соответственно.
Возьмите код реакции в качестве примера
основное приложение
каждая пользовательская этикеткаmicro-appПосле рендеринга это подприложение микроинтерфейса, которое используется аналогично тегу iframe.
Нам нужно передать тегу три основных свойства:
- имя: имя
- url: адрес страницы подприложения
- baseurl: baseurl — это префикс маршрутизации, назначаемый базовым приложением дочернему приложению.
Он используется следующим образом:
дополнительное приложение
Если подприложение имеет только одну страницу и не имеет конфигурации маршрутизации, никаких изменений не требуется.
Если подприложение имеет несколько страниц, вам нужно только изменить конфигурацию маршрутизации и добавить префикс маршрутизации.
следующим образом:
window.__MICRO_APP_BASE_URL__ – это префикс маршрутизации, выдаваемый базовым приложением. В немикроинтерфейсной среде это значение не определено.
После выполнения приведенной выше конфигурации можно реализовать рендеринг микроинтерфейса, а количество изменений в исходном коде очень мало. Конечно, MicroApp также предоставляет некоторые другие возможности, такие как система подключаемых модулей и передача данных, о которых мы подробно расскажем далее.
основной принцип
Основные функции MicroApp построены на основе CustomElement, который используется для создания пользовательских тегов и предоставляет такие функции-ловушки, как отрисовка элементов, выгрузка и изменение атрибутов.Как контейнер, все элементы и области стилей микроприложения не могут избежать границы контейнера, создавая замкнутую среду.
Диаграмма связей
процесс рендеринга
по пользовательскому элементуmicro-appфункция жизненного циклаconnectedCallbackМониторинг рендеринга элементов, загрузка html подприложения и преобразование его в структуру DOM, рекурсивный запрос и загрузка всех статических ресурсов, таких как js и css, установка изоляции элементов, перехват всех динамически созданных тегов, таких как скрипт и ссылка, и извлеките содержимое тега. Поместите загруженный js в песочницу после обработки системой плагинов, изолируйте стиль ресурсов CSS и, наконец, поместите отформатированные элементы в песочницу.micro-app, в конце концовmicro-appРендеринг элемента как подприложение микроинтерфейса. В процессе рендеринга функции жизненного цикла, привязанные разработчиком, будут выполняться для дальнейших операций.
блок-схема
изоляция элемента
Изоляция элементов исходит из концепции ShadowDom, то есть элементы ShadowDom могут повторяться с внешними элементами без конфликта, а ShadowDom может работать только со своими внутренними элементами.
MicroApp моделирует и реализует аналогичные функции.Мы перехватываем методы элементов в базовой цепочке прототипов, чтобы гарантировать, что подприложения могут работать только со своими собственными внутренними элементами, а каждое подприложение имеет собственную область действия элемента.
Изоляция элементов может эффективно предотвратить неправильную работу подприложений с базовым приложением и другими элементами подприложений. Распространенным сценарием является то, что корневые элементы нескольких приложений используют один и тот же идентификатор. Изоляция элементов может гарантировать, что структура рендеринга подприложений может сам правильно находит корневой элемент.
Диаграмма связей
фактический эффект
Как показано на фиг.micro-appЭлемент, отображаемый внутри, является подприложением, которое также имеет два пользовательских элемента.micro-app-head,micro-app-body, роли этих двух элементов соответствуют элементам head и body в html соответственно. Содержимое подприложения в исходном элементе заголовка, а также некоторые элементы ссылок и сценариев, которые динамически создаются и вставляются в заголовок, будут перемещены вmicro-app-head, содержимое исходного элемента body и некоторые элементы, которые динамически создаются и вставляются в body, будут перемещены вmicro-app-bodyсередина. Таким образом, можно предотвратить утечку элементов подприложения во весь мир при выполнении запроса элементов, их удалении и т. д.micro-appВнутренняя обработка является важной основой для изоляции элементов.
могуmicro-appПод ним понимается встроенная html-страница, ее структура и функции аналогичны html-страницам.
Система плагинов
Сценарии использования микрофронтендов очень сложны, и даже при наличии механизма песочницы всех проблем не избежать, поэтому мы предоставляем систему плагинов для решения некоторых непредсказуемых задач.
Под плагином можно понимать объект, который соответствует определенным правилам.В объекте предусмотрена функция для обработки ресурсов.Плагин обычно настраивается разработчиком.
Функция системы подключаемых модулей заключается в выполнении предварительной обработки входящих статических ресурсов, вызове подключаемых модулей, удовлетворяющих условиям, по очереди и передаче предварительно обработанных статических ресурсов в качестве параметров возвращаемому подключаемому содержимому. Система подключаемых модулей дает разработчикам возможность гибко обрабатывать статические ресурсы и изменять проблемные файлы ресурсов.
Сама система плагинов чиста и не повлияет на содержимое ресурсов.Ее функция заключается в координации выполнения каждого плагина.Когда разработчик не устанавливает плагин, входящий и исходящий контент одинаковый.
js песочница и изоляция стилей
Песочница js проксирует глобальные объекты субприложений через прокси, предотвращая конфликты глобальных переменных между приложениями, записывая или очищая глобальные побочные эффекты субприложений и внедряя глобальные переменные в субприложения для индивидуальной обработки.
Изоляция стиля относится к форматированию содержимого CSS ссылки и элементов стиля подприложения, чтобы гарантировать, что стиль подприложения ограничивает только себя и не может влиять на внешние объекты.
MicroApp использует песочницу js и решение для изоляции стилей от qiankun, которое также является широко используемым и зрелым решением.
Предварительная загрузка
В MicroApp предусмотрена функция предзагрузки подприложений, она реализована на базе requestIdleCallback, предзагрузка не повлияет на скорость рендеринга базового приложения и других подприложений, будет подгружать статические ресурсы приложения при бездействии браузера. он фактически рендерится, ресурс берется напрямую из кеша и рендерится.
Завершение адреса ресурса
Феномен потери ресурсов часто возникает в микрофронтенде. Причина в том, что базовое приложение загружает ресурсы суб-приложения в собственную отрисовку страницы. Если статический адрес ресурса суб-приложения является относительным адресом, браузер будет использовать адрес доменного имени, на котором расположено базовое приложение Статические ресурсы, что приводит к потере ресурсов.
Завершение адреса ресурса заключается в завершении относительного адреса статического ресурса подприложения до абсолютного адреса, чтобы убедиться, что адрес указывает на правильный путь к ресурсу.Эта операция аналогична установке publicPath во время выполнения с помощью веб-пакета.
Жизненный цикл
Когда микроприложение отрисовывается,micro-appЭлементы будут запускать соответствующие события жизненного цикла на разных этапах рендеринга, а базовое приложение может выполнять соответствующие операции, прослушивая события.
Список жизненного цикла:
- created: выполняется при создании тега микроприложения перед загрузкой ресурсов.
- beforemount: ресурс загружается и выполняется до официального рендеринга.
- Mounted: выполняется после рендеринга субприложения.
- unmount: выполняется при удалении подприложения.
- error: выполняется, когда происходит деструктивная ошибка, и рендеринг не может быть продолжен.
При удалении подприложение также получает событие удаления для выполнения операций, связанных с удалением.
передача данных
Передача данных — очень важная функция в микроинтерфейсах.Существует множество технических решений для реализации передачи данных.Отличное решение может повысить эффективность разработки и снизить затраты на пробы и ошибки. Также мы изучили методы передачи данных микрофронтенд-фреймворков типа qiankun, но методы их реализации нам не подходят, мы пытаемся реализовать передачу данных в виде передачи сложных данных напрямую через атрибуты элементов.
Для разработки интерфейсной сборки наиболее привычным для обмена данными является пользовательский элемент микроприложения, такой как класс WebComponent, который обменивается данными через свойства компонента обязательно оптимальным образом. Но самая большая проблема, с которой MicroApp столкнулся при передаче данных, заключается в том, что пользовательский элемент не может поддерживать настройку типа свойств объекта, таких как<micro-app data={x: 1}></micro-app>превратится в<micro-app data='[object Object]'></micro-app>, чтобы передавать данные в компонентной форме, элемент должен поддерживать свойства объекта.
Для решения этой проблемы перепишемmicro-appМетод установки свойств в цепочке прототипов элементов, вmicro-appКогда элемент задает свойства объекта, он сохраняет переданное значение в центр обработки данных и распространяет это значение среди подприложений через центр обработки данных.
Данные в MicroApp должны передаваться, т. е. каждыйmicro-appЭлементы могут обмениваться данными только с субприложениями, на которые они указывают, поэтому каждое приложение имеет четкую цепочку данных, чтобы избежать путаницы данных, а MicroApp также поддерживает глобальную связь для передачи данных между приложениями.
Карта концепции передачи данных
сравнение кадров
Чтобы более интуитивно почувствовать разницу между Micro App и другими фреймворками, воспользуемся картинкой для сравнения.Как видно из сравнительной таблицы, текущие интерфейсные микрофреймворки с открытым исходным кодом имеют некоторые функции в MicroApp и предоставляют некоторые функции, которых у них нет, такие как завершение адреса статического ресурса, изоляция элементов, система подключаемых модулей и т. д. .
наконец
MicroApp использовался в десятках бизнес-линий внутри компании и выполнил хорошо, особенно когда некоторые старые проекты были преобразованы в микропроходы. В условиях, что проект не влияет, он может не только уменьшить стоимость доступа, но Также обеспечивают бесперебойную работу проекта. Маленькое сцепление.
Если вы заинтересованы в этом проекте, вы можете принять участие в совместном строительстве, присоединившись к организации или отправив запросы на вытягивание, Мы очень рады и с нетерпением ждем вашего присоединения.
навигация
Адрес гитхаба:GitHub.com/micro-Zoe/no…
Адрес официального сайта:micro-zoe.github.io/micro-app/
Особая благодарность:qiankun