Обмен технологиями

Микро-фронтенд-фреймворк без ограничений

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

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

1. Предыстория и обзор

Микро-интерфейс — это технические средства и методическая стратегия, позволяющая нескольким командам совместно создавать современные веб-приложения путем независимой публикации функций. Неограниченная микрофронтенд-инфраструктура предоставляет разработчикам эффективное и гибкое микрофронтенд-решение за счет внедрения веб-компонентов и технологии iframe. Эта структура направлена ​​на удовлетворение основных требований пользователей к существующим микро-интерфейсным решениям с точки зрения стоимости адаптации, изоляции стилей, производительности, белого экрана страниц, связи субприложений, поддержки активности субприложений, активации нескольких приложений, Vite. поддержка фреймворка, совместное использование приложений и т. д. Проблема.

2. Основные функции

  1. бюджетный: Основное приложение неограниченной микроинтерфейсной среды имеет низкую стоимость использования, а стоимость адаптации субприложения также относительно невелика.
  2. высокоскоростной : быстро открывается первый экран дополнительного приложения, и дополнительное приложение быстро запускается. Это связано с оптимизированным управлением ресурсами и стратегией предварительной загрузки неограниченной платформы.
  3. родная изоляция : стили CSS могут обеспечить строгую встроенную изоляцию с помощью веб-компонентов, а JS, работающий в iframe, также обеспечивает строгую встроенную изоляцию. Этот механизм изоляции обеспечивает независимость между субприложениями и позволяет избежать конфликтов стилей и конфликтов сценариев.
  4. Мощный : Неограниченная микрофронтальная платформа поддерживает поддержку субприложений, вложенность субприложений, активацию нескольких приложений, совместное использование приложений, децентрализованную связь и т. д. Эти функции делают неограниченную платформу более гибкой и масштабируемой при работе со сложными интерфейсными приложениями.

3. Техническая реализация

Неограниченная микрофронтенд-инфраструктура использует режим «песочницы» веб-компонентов + iframe и обеспечивает встроенную изоляцию и эффективную работу, наследуя преимущества iframe и устраняя его недостатки. Конкретные методы реализации включают в себя:

  1. Создайте iframe, который имеет то же происхождение, что и основное приложение.: Путь содержит информацию о маршрутизации подмаршрутов. Тот же источник предназначен для облегчения связи между приложениями.
  2. Разобрать входной HTML-код подприложения: Определите часть HTML, отделите стиль и js, обработайте CSS и повторно вставьте HTML; создайте веб-компонент и смонтируйте HTML;
  3. Перехватить объект документа в iframe: Унифицированно направьте DOM наshadowRoot, чтобы решить проблему всплывающих окон или всплывающих окон, которые не могут охватить основное приложение.
  4. механизм связи: iframe и основное приложение находятся в одном домене и, естественно, используют общую память для связи. Unbounded предоставляет децентрализованный механизм событий для решения проблем связи.
  5. Управление статусом маршрута: перемещение браузера вперед и назад может естественным образом повлиять на iframe. В это время изменения маршрутизации iframe отслеживаются и синхронизируются с основным приложением. Если браузер обновляется, сохраненный маршрут можно прочитать обратно по URL-адресу. .

4. Преимущества и применение

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

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