Помочь вам сравнить различные микро интерфейсные решения

внешний фреймворк

1. Пишите впереди

В предыдущих статьях мы подробно рассмотрелиЧто такое микро-фронтенд и какую пользу он может принести?, теперь давайте рассмотрим концепцию микро-фронтендов:

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently.

Китайское определение:

可以由多个团队独立开发的现代web应用程序的技术、策略和方案。

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

2. Существующие микроинтерфейсные решения

После поиска большого количества информации я обобщил следующие основные решения, которые действительно могут реализовать концепцию микроинтерфейсов.Если есть какие-либо упущения, пожалуйста, не стесняйтесь добавлять~

1. iframe

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

Самая большая особенность iframe заключается в том, что он обеспечивает встроенное решение жесткой изоляции браузера.Будь то изоляция стиля или изоляция js, все проблемы могут быть решены идеально. На данный момент я считаю, что мои друзья, как и я, считают, что концепция iframe и микроинтерфейса, упомянутые в концепции独立开发,独立维护,相互隔离Очень последовательно.Есть идея перейти на iFame напрямую,но почему это не основной метод реализации микро-фронтенда до сих пор?Позже мне посчастливилось прочитать.qiankun技术圆桌Статья о микрофронтендахWhy Not Iframeподумав, резюмировал очень хорошо, теперь повторю абзац описания

iframe虽然基本能做到微前端所要做的所有事情，但它的最大问题也在于他的隔离性无法被突破，导致应用间上下文无法被共享，随之带来开发体验、产品体验的问题。

Вот мое резюме сводного раздела статьи:

  1. Это не одностраничное приложение, из-за которого браузер обновляет состояние URL-адреса iframe и теряет кнопки «Назад» и «Вперед».
  2. Функцию класса всплывающего окна нельзя применить ко всему большому приложению, а можно отобразить только в соответствующем окне.
  3. Поскольку приложения могут находиться в разных доменах, файл cookie основного приложения должен быть прозрачно передан подприложениям с разными корневыми доменными именами.Нет входаЭффект.
  4. Каждая запись подприложения — это процесс реконструкции контекста браузера и перезагрузки ресурсов, который занимает много ресурсов, а также сильно потребляет ресурсы.

После вышеизложенного у меня также есть некоторые расширенные выводы:

  1. Характеристики iframe делают невозможным получение поисковыми системами содержимого в нем, что делает невозможным реализацию приложенияseo

Я предполагаю, что причина выше в том, чтоiframeЕго нельзя использовать в качестве причины для официального микроинтерфейсного решения.

2. Веб-компоненты

Может много друзейWeb Componentsне очень хорошо знаю, это сделаноgoogleПредставлены нативные компоненты браузера,MDNправильноWeb ComponentsОпределение такое:

作为开发者，我们都知道尽可能多的重用代码是一个好主意。这对于自定义标记结构来说通常不是那么容易 — 想想复杂的HTML（以及相关的样式和脚本），有时您不得不写代码来呈现自定义UI控件，并且如果您不小心的话，多次使用它们会使您的页面变得一团糟。

Web Components旨在解决这些问题 — 它由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。

этоТри основные технологииОтносится к:

  • Пользовательские элементы: набор API-интерфейсов JavaScript, которые позволяют вам определять пользовательские элементы и их поведение, которые затем можно использовать по мере необходимости в вашем пользовательском интерфейсе.
  • Тень ДОМ: Набор API-интерфейсов JavaScript для прикрепления инкапсулированного «теневого» дерева DOM к элементу (отображаемому отдельно от DOM основного документа) и управления связанными с ним функциями. Таким образом, вы можете сохранить функциональность своих элементов в секрете, чтобы их можно было запрограммировать и стилизовать, не беспокоясь о конфликте с остальной частью документа.
  • HTML-шаблоны:<template>а также<slot>Элементы позволяют писать шаблоны разметки, которые не отображаются на отображаемой странице. Затем их можно повторно использовать несколько раз в качестве основы для пользовательских структур элементов.

С помощью приведенного выше описания в сочетании с концепцией микроинтерфейса давайте посмотримWeb ComponentsКак сделать микро интерфейс:

  1. Независимость от стека технологий:Web ComponentsЭто нативный компонент браузера, то есть его можно использовать в любом фреймворке.
  2. Самостоятельная разработка:использоватьWeb ComponentsРазработанное приложение не должно иметь каких-либо связей с другими приложениями.
  3. Изоляция между приложениями:Shadow DOMХарактеристики каждого внедряемого микроприложения позволяют добиться эффекта взаимной изоляции.

В итоге,Web Components— это средство интеграции микро-приложений с компонентной загрузкой в ​​качестве микро-интерфейса, но, к сожалению,Web ComponentsЭто новая функция браузера, поэтому его совместимость не очень хорошая.Если проект с требованиями совместимости по-прежнему не может быть использован, пожалуйста, проверьте детали.can i use.

3. ЭСМ

ESMдаES Moduleсокращение отEcma script 2015Модульный подход к интерфейсу, предложенный в , как он обеспечивает микроинтерфейс? По сути, микроинтерфейс — это не что иное, как три характеристики,无技术栈限制,应用单独开发,多应用整合, пока эти три характеристики уяснены, нетрудно понятьESMКак это сделать:

  1. Нет ограничения стека технологий:ESMТо, что загружается, это только js-контент, независимо от того, какой фреймворк, он в конечном итоге будет скомпилирован в js, поэтому независимо от того, какой фреймворк,ESMможно загрузить.
  2. Приложение разработано отдельно: ESM — это просто спецификация js и не повлияет на режим разработки приложения.
  3. Интеграция нескольких приложений: Пока микроприложение начинается сESMМетод выставлен, и его можно нормально загрузить.
  4. Удаленная загрузка модулей: ESMвозможность запросить напрямуюcdnресурс, что является его врожденной способностью.

ESMЭто основная идея микроинтерфейса, но она также существуетсовместимостьЭтот большой недостаток, хотяESMуже отлично, ноБольшинство старых браузеровВсе еще не может использоваться напрямую, что является причиной появления babel и других инструментов компиляции, к счастью, он может пройтиwebpack,rollup,esbuild,snowpackПодождите, пока инструменты компиляции станут совместимы с кодом.

4. Небо и Земля

На границе микрофронтаqiankunЕго можно считать самым ранним и самым известным фреймворком, в полном смысле это одностраничный микроинтерфейсный фреймворк.qiankunКаковы характеристики, вОфициальный сайтЯ нашел следующее резюме:

  • на основеsingle-spaИнкапсуляция, обеспечивающая более готовый API
  • Независимость от стека технологий, приложения любого стека технологий могут быть использованы/доступны, будь то React/Vue/Angular/JQuery или другие фреймворки
  • Метод доступа к записи HTML, что позволяет получить доступ к микроприложениям так же просто, как с помощью iframe
  • изоляция стиля, чтобы стили между микроприложениями не мешали друг другу
  • JS-песочницаУбедитесь, что глобальная переменная / события между микроэсами
  • Предварительная загрузка ресурсов, для предварительной загрузки неоткрытых ресурсов микро-приложений во время простоя браузера для ускорения открытия микро-приложений
  • уми плагин, предоставляет @umijs/plugin-qiankun, чтобы приложение umi переключалось на систему микроинтерфейсной архитектуры одним щелчком мыши.

За исключением последнего пункта расширения, эффект, которого хочет добиться микро-фронтенд, достигнут.

5. ЭМИ

EMPЭто самая молодая разработка компании JOY Times Business Zhongtai.Одностраничные микроинтерфейсные решения Итак, каковы его характеристики, давайте разберемся:

  • на основеWebpack5новые особенностиModule Federationдостигать, достигатьСовместное использование зависимостей третьими сторонами, что сокращает количество ненужного кодацель того, что естьModule FederationЯ не буду здесь вдаваться в подробности.
  • Каждое микроприложение развертывается и запускается независимо, и вводится в основную программу с помощью cdn, поэтому его нужно развернуть только один раз, и его можно предоставить любомуModule Federationиспользование приложения. И эта часть кода импортируется удаленно, и нет необходимости участвовать в упаковке приложения.
  • Динамически обновлять микроприложения:EMPчерезcdnЗагружайте микроприложения, чтобы при изменении кода в каждом микроприложении его можно было загрузить в новейшее микроприложение без повторной упаковки и выпуска нового интегрированного приложения.
  • децентрализация, другие микроприложения могут быть введены между каждым микроприложением без концепции центрального приложения.
  • Вызовы компонентов через технологические стеки, который предоставляет возможность вызывать другие компоненты фреймворка в фреймворке основного приложения (фреймворки, поддерживающие в настоящее время взаимные вызовы, и способы их использования см.официальная документация).
  • нагрузка по требованию, вместо принудительной загрузки всего приложения разработчики могут выбрать загрузку только тех частей, которые им нужны в микроприложении.
  • связь между приложениями, каждое приложение может совместно использовать состояние, как при разработке с помощью модулей npm.
  • Создайте соответствующий шаблон стека технологий, это может быть какcreate-react-appтакой же какcreate-vue-appТочно так же вы можете создать среду разработки одним нажатием инструкций, чтобы снизить нагрузку на разработчиков.
  • Заявление TS Потяните удаленный файл,emp-cliВстроенная возможность извлекать файлы объявлений кода в удаленных приложениях, поэтому разработчики, использующие разработку ts, больше не беспокоятся об ошибках кода.

Заботливые друзья должны обнаружить, что,EMPВ дополнение к возможностям микро-интерфейсов, он также реализует возможность совместного использования состояния между приложениями и вызова компонентов между платформами, что является отличной функцией, которой нет в существующей среде!

3. Резюме

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

  1. Существующие решения для микрофронтенда:
  • iframe
  • Web Components
  • ESM
  • qiankun
  • EMP
  1. Плюсы и минусы каждого решения:

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

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

  • qiankunВ основном то, что можно назвать одностраничной версией iframe сизоляция песочницыа такжеПредварительная загрузка ресурсовхарактеристики практически безупречны. Но может быть следующеенедостаточный:

    • Для проектов глубокой настройки React невозможно добиться хорошего управления состоянием.
    • Для нестандартных AMD, UMD, SystemJS и других методов загрузки будут проблемы с зависимостями (требуется целевая модификация)
    • Реализация с несколькими фреймворками слишком громоздка и требует определенных затрат на отладку.

  • EMPКак самое молодое фронтенд-решение, оно было рождено после того, как вобрало в себя множество замечательных возможностей Интернета, и на основе реализации микрофронтенда расширило возможностиСовместное использование состояния между приложениями,Межкадровые вызовы компонентов,Извлеките файл декларации ts удаленно,Динамически обновлять микроприложенияравные способности. В то же время осторожные друзья должны были обнаружить, что,EMPможет сделать этоСторонний зависимый обмен, сделайте так, чтобы код повторно использовался как можно чаще, и загружайте меньше контента.

В следующей таблице приведены все решения:

решение Относительные характеристики недостаток
iframe Естественно изолировать стили и сценарии, несколько страниц Это не одностраничное приложение, из-за которого браузер обновляет состояние URL-адреса iframe и теряет кнопки «Назад» и «Вперед».
Функция класса всплывающего окна не может быть применена ко всему большому приложению, а может отображаться только в соответствующем окне.
Поскольку приложения могут находиться в разных доменах, файл cookie основного приложения должен быть прозрачно передан в подприложения с разными именами корневого домена для достижения эффекта отсутствия входа в систему.
Каждая запись суб-приложения — это процесс реконструкции контекста браузера и перезагрузки ресурсов, который потребляет много ресурсов и потребляет много ресурсов одновременно.
Характеристики iframe делают невозможным получение поисковыми системами содержимого в нем, что делает невозможным реализацию SEO приложения.
Web Components Естественная изоляция стилей и сценариев Не совместим со всеми браузерами
ESM Удаленная загрузка модулей Не совместим со всеми браузерами (но может быть решен с помощью инструментов компиляции)
Необходимость вручную изолировать стиль (можно решить с помощью модуля css)
qiankun Метод доступа к записи HTML -
Предварительная загрузка ресурсов
EMP Каждое микроприложение развертывается и запускается независимо -
Динамически обновлять микроприложения
децентрализация
Вызовы компонентов через технологические стеки
нагрузка по требованию
связь между приложениями
Создайте соответствующий шаблон стека технологий
Извлеките файл декларации ts удаленно

Это конец обмена, даМикро интерфейсное решение EMPЕсли вам интересно, вы можете узнать больше здесь:

Категории