Серия обучающих микроинтерфейсов (1): введение в микроинтерфейс

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

image.png

содержание

предисловие

В настоящее время на основеvue,react,angularизРежим разработки одностраничных приложенийстал мейнстримом в отрасли. Благодаря их богатой экологии мы можем использовать эти технологии для быстрого создания нового приложения и быстрого реагирования на потребности рынка. С непрерывным развитием бизнеса компании приложение начало становиться огромным и раздутым, и постепенно превратилось вПриложение для валунаРазве не так сложно поддерживать, разрабатывать время, онлайн новые требования также потребуются провести много времени для создания проекта, эффективность и опыт развития разработчиков вызвал плохое влияние. Так будет А.Приложение для валуна

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

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

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

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

микро интерфейс, давно ставшее клише, впервые появилось в 2016 году вThoughtWorks Technology Radarна спинеМикросервисыКонцепция распространяется на внешний мир.

Микросервисы, который определяется на вики как:Технология разработки программного обеспечения - ориентированная на обслуживание архитектура (SOA) - это вариант архитектурного стиля, приложение настроен как набор свободно связанных сервисов, а легкий, организованный протоколом связи..具体来讲，就是Разделить одно приложение на набор сервисов по определенным правилам. Эти службы, каждая со своим репозиторием, могут разрабатываться независимо, развертываться независимо, иметь независимые границы, управляться разными командами и даже могут быть написаны на разных языках программирования. Но для переднего конца это все еще полный сервис.

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

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

микро интерфейсОбщая структура выглядит следующим образом:

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

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

  • Простой, несвязанный, слабосвязанный репозиторий кода

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

  • Независимая разработка, независимое развертывание

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

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

  • Независимость от стека технологий

    В реальных проектах каждый проект будет использовать разные технологические стеки по разным причинам. Например, среда разработки имеетreact,vue,angularи т. д., инструменты сборки имеютwebpack,rollup,parcelд., и версии тоже могут не совпадать. Используя архитектуру микро-фронтенда, можно агрегировать суб-приложения, использующие разные стеки технологий (разные версии).

  • миграция устаревшей системы

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

    Большая часть причин для использования решения микроинтерфейса заключается в решении проблемы миграции устаревшей системы.

  • Технологический стек обновления

    В дополнение к миграции устаревшей системы микроинтерфейсы также могут помочь в обновлении версий стека технологий.

    Некоторые проекты в начале своего создания использовали новейшие технологии, такие как antd2. С развитием технологий antd был обновлен до версии 4, но проект по-прежнему использует antd2, потому что он итерировался. Сразу перестроить их все точно нереально, это долго и трудозатратно, да и риски велики.

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

  • Технический рост команды

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

  • Сосуществуют несколько подприложений;
  • Хранение статуса пользователя - без входа в систему;

Общие технические решения для микроинтерфейсов

В настоящее время основные решения по внедрению микроинтерфейса в отрасли в основном включают:

  • Маршрутно-распределенные микрофронтенды
  • iframe
  • single-spa
  • qiankun
  • webpack5: федерация модулей
  • Web Component

Маршрутно-распределенные микрофронтенды

Маршрутно-распределенные микрофронтендыреализовать.

Ниже приведена конфигурация Nginx, основанная на распределении маршрутов:

 http {
        server {
            listen 80;
            server_name  xxx.xxx.com;
            location /api/ {
                proxy_pass http://localhost:3001/api;
            }
            location /web/admin {
                proxy_pass http://localhost:3002/api;
            }
            location / {
                proxy_pass /;
            }
        }
    }

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

преимущество:

  • Простота реализации;
  • Нет необходимости модифицировать существующие приложения;
  • Полностью не зависит от стека технологий;

недостаток:

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

iframe

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

преимущество:

  • Простота реализации;
  • CSS и js естественно изолированы и не мешают друг другу;
  • Полностью не зависит от стека технологий;
  • Несколько подприложений могут сосуществовать;
  • Нет необходимости модифицировать существующие приложения;

недостаток:

  • Пользовательский опыт не очень хорош, браузер должен перезагружать страницу каждый раз, когда приложение переключается;
  • Пользовательский интерфейс не синхронизирован, структура DOM не используется совместно;
  • Глобальный контекст полностью изолирован, переменные памяти не используются совместно, а процесс связи и синхронизации данных между подприложениями усложнен;
  • Не оптимизирован для SEO;
  • Вам может потребоваться снова войти в систему при переключении подприложений, и это не очень хорошо;

single-spa

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

Мы знаем, что основная модель разработки клиентских приложений основана наvue / react/ angularизРежим разработки одностраничных приложений.在这种模式下，我们需要维护一个реестр маршрутизации, каждыймаршрутизацияСоответствующийКомпоненты страницы URL., еслиновая страница,нужноДинамически получить скрипт js, соответствующий маршруту, затем выполните скрипт и отобразите соответствующую страницу; если этоуже посещенные страницы, то сразуПолучить метод кэшированной страницы из кеша, выполнить и отобразить соответствующую страницу.

Так,микро интерфейсНет подобных реализаций, и одностраничное приложение, чтобы получить тот же пользовательский опыт?

Ответ положительный.single-spaОпыт.

существуетsingle-spaДок-приложениеа такжедополнительное приложение. в,дополнительное приложениеЭто субприложение, которое необходимо агрегировать, как описано выше в статье; иДок-приложение, это еще одно отдельное приложение дляПриложение-агрегатор.

Подобно принципу реализации одностраничных приложений,single-spaБудет вДок-приложениеподдерживатьреестр маршрутизации,Каждый маршрут соответствует подприложению. После запуска базового приложения, когда мы переключаем маршруты, если это новое подприложение, оно будет динамически получать js-скрипт подприложения, затем выполнять скрипт и отображать соответствующую страницу; если это уже посещенная подприложение, то оно получит кешированное подприложение из кеша, активирует подприложение и отобразит соответствующую страницу.

Здесь только эта статьяsingle-spaСделайте предварительное введение, для более глубокого понимания см.Официальный сайт: single-spaа такжеСерия обучения микро-интерфейсу (2): одно спа.

преимущество:

  • Полностью не зависит от стека технологий;
  • Множество субседеров может сосуществовать;

недостаток:

  • sing-spa
  • Есть дополнительные расходы на обучение;
  • Используйте комплексную загрузку подприложений, изоляцию приложений, проблему связи подприложений, которая требует от пользователей достижения собственной структуры;
  • Многократная загрузка одних и тех же ресурсов между подприложениями;
  • При запуске приложения сначала запустите базовое приложение;

qiankun

а такжеsingle-spaТакой же,qiankunтакже может предоставить нам аналогичныеодностраничное приложениеПользовательский опыт.qiankunвsingle-spaсделано на основеВторичное развитие,существуетРамкаИспользуйте уровень, чтобы решитьsingle-spaПри необходимостиРазработчики пишут свою собственную логику для загрузки подприложений, связи, изоляции и т. д.проблема, являетсяsingle-spa

Здесь эта статья также лишь кратко объясняет цянькунь.Для более глубокого понимания, пожалуйста, обратитесь кОфициальный сайт: Цянькуна такжеСерия обучения микро-интерфейсу (3): qiankun.

преимущество:

  • При переключении приложений браузеру не нужно перезагружать страницу, обеспечивая тот же пользовательский интерфейс, что и одностраничное приложение;
  • в сравнении сsingle-spa, который решает проблемы загрузки подприложений, изоляции приложений и связи между ними и относительно прост в использовании;
  • Полностью не зависит от стека технологий;
  • Несколько подприложений могут сосуществовать;

недостаток:

  • Исходное приложение должно быть преобразовано, и приложение должно быть совместимо с доступом qiankun и независимым использованием;
  • Есть дополнительные расходы на обучение;
  • Многократная загрузка одного и того же ресурса;
  • При запуске приложения сначала запустите базовое приложение;

webpack5: федерация модулей

Новый релизwebpack5module federation.基于这个特性，我们可以И достичьРазделение зависимостей между приложениями.

пройти черезmodule federationАгрегация нескольких подприложений.

module federationДля использования см.Серия Micro-Front Surlege (4): Федерация модуля.

преимущество:

  • Нет необходимости преобразовывать исходные приложения, просто модифицируйте сценарий пакета;
  • При переключении приложений браузеру не нужно перезагружать страницу, обеспечивая тот же пользовательский интерфейс, что и одностраничное приложение;
  • Несколько подприложений могут сосуществовать;
  • Один и тот же ресурс не нужно загружать повторно;
  • Стек технологий разработки не имеет значения;
  • После запуска приложения нет необходимости загружать несвязанные с ним ресурсы;
  • Бинтанг дружелюбный;

недостаток:

  • Инструмент сборки можно использовать только через webpack5;
  • Есть дополнительные расходы на обучение;

Web Component

на основеWeb ComponentизShadow DomСпособность, мы можем достичьмикро интерфейс, который объединяет несколько подприложений.

Shadow DomИспользование заключается в следующем:

const shadow = document.querySelector('#hostElement').attachShadow({mode: 'open'});
// url 为应用的地址，基于 fetch，我们可以获取到应用的 html 模板，添加到指定节点下
fetch(url).then(res => {
    shadow.innerHTML = res
});

преимущество:

  • Простота реализации;
  • CSS и js естественно изолированы и не мешают друг другу;
  • Полностью не зависит от стека технологий;
  • Несколько подприложений могут сосуществовать;
  • Нет необходимости модифицировать существующие приложения;

недостаток:

  • в основномПроблемы с совместимостью браузера;
  • Высокая стоимость разработки;

заключительные замечания

Здесь, чтобы представить микро интерфейс закончился. Эта статья представляет собой серию уроков микро-интерфейса, затем мы начнем,,module federation, я надеюсь, что благодаря изучению этих статей каждый сможетмикро интерфейсЕсть более глубокое понимание, 😁.

Ссылки на эту статью:

Категории