Введение В этой статье мы подробно и простым языком обсудим Микро-интерфейсархитектурный образец——MicroApp,Из основных понятий Микро-интерфейса, его основных преимуществ и способов его внедрения в существующие современные веб-развития.,Подробное объяснение того, как микроинтерфейс позволяет разбивать большие приложения на небольшие, простые, независимо развертываемые подприложения.,В то же время можно сохранить целостность и координацию между различными субприложениями. также,В этой статье также будут рассмотрены возможные проблемы и лучшие практики при внедрении микроинтерфейса.,Обеспечьте четкий путь реализации инноваций,Помогите ему создать более гибкую и легко поддерживаемую интерфейсную экосистему.

01 Предисловие

В ходе формирования команды по гибкому подходу в этом году я внедрил автоматическое модульное тестирование в один клик с помощью Suite executor. Кроме экзекьютора Suite, какие еще экзекьюторы есть у Juint? Здесь начинается мое путешествие по исследованию Раннера!

Эта статья вдохновлена ​​проектом, над которым недавно работал автор, потому что раньше я уже делал некоторую унификацию стеков технологий, чтобы использовать ant. Pro-table и ПК используют React, но некоторые старые проекты основаны на vue. На этот раз больше новых страниц и меньше изменений в старых страницах. Кроме того, старые проекты хотят изменить меню, поэтому я хочу это сделать. воспользуйтесь этой возможностью развиваться с помощью React, прошло После некоторых размышлений я обнаружил, что для выполнения этого требования очень подходит использование микроинтерфейса. В конце концов я решил использовать реакцию для создания базы (основного приложения) и подключения исходного проекта vue к базе. новая страница реагирует на разработку, а старые проекты также можно интегрировать с новыми проектами.

02 Концепция микроинтерфейса

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

Что такое микроинтерфейс? Микроинтерфейс опирается на архитектурную концепцию микросервисов.,Он может объединить несколько проектов в один,Это также может уменьшить связь между проектами.,Улучшить масштабируемость проекта,По сравнению с полным фронтальным складом,Внешний склад в рамках архитектуры микроинтерфейса имеет тенденцию быть меньше и более гибким.,Есть док-приложение (основное приложение),Приходите, чтобы управлять загрузкой и выгрузкой различных субприложений.,Таким образом, «Микроинтерфейс» не относится к конкретной библиотеке.,Не ссылаясь на конкретную структуру,Не ссылаясь на конкретные инструменты,Скорее, это идеальная и архитектурная модель.,Три основных принципа микроинтерфейса: независимая работа, независимое развертывание и независимая разработка.

03 Когда использовать микроинтерфейсы?

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

(1) Очень большой проект становится все больше и больше, что затрудняет его поддержку в будущем.

(2) На некоторых крупных заводах часто существуют совместные проекты разработки между отделами и командами, что приводит к снижению эффективности команды и увеличению затрат на связь. В настоящее время мы можем использовать микроинтерфейсы и каждую команду или. Отдел ведет свои собственные проекты самостоятельно. Для проектов нам нужен только один основной проект, чтобы объединить разрозненные подпроекты.

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

(4) Хотите развернуть каждое одностраничное приложение независимо.

(5) Улучшить время начальной загрузки и задержать загрузку кода.

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

04 Как создать микро-фронтенд-базу?

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

4.1 Выбор микрофронтенд-фреймворка

4.1.1 Существующая структура

1. single-spaЭто приложение, которое объединяет несколько одностраничных приложений в одно целое. JavaScript Микрофронтенд-фреймворк.

2. qiankun на основе single-spa инкапсулированный Микрофронтенд-фреймворк.

3. MicroApp Создано JD.com, основеWebComponentмысли,легкий、Эффективный、Мощный Микрофронтенд-фреймворк.

В этом проекте используется стек технологий umi+react+ts. На самом деле, Qiankun наследует фреймворк umi, но его сложнее настроить.

4.1.2 Преимущества микроприложений

1. Это самый дешевый вариант использования. Он инкапсулирует все страницы в компонент, подобный веб-компоненту, поэтому микро-интерфейсное приложение можно визуализировать путем внедрения строки кода в основную базу приложения.

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

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

4. Нет зависимостей, что дает небольшой размер и большую масштабируемость.

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

Концептуальная карта MicroAppКак показано ниже：

4.2 Демонстрация сценария

Возьмем в качестве примера систему управления серверной частью.

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

(1) Интеграция субприложений, предоставление контейнера рендеринга для субприложений.

(2) Управление разрешениями

(3) Управление сеансами

(4) Маршрутизация и управление меню

(5) Управление темами

(6) Общие зависимости

(7) Многоязычное управление (самый важный момент)

Вы можете разместить в контенте любые подприложения различных технологий. Вам нужно только разработать основное приложение (основное приложение также может свободно выбирать язык, в настоящее время поддерживает реакции, vue, vite, angular, next.js, nuxt.js). ), и интегрировать некоторые разрозненные приложения. Кроме того, основное приложение также может управлять разрешениями, чтобы разные учетные записи видели разные меню, то есть могли видеть страницы разных систем и получать доступ к разным субприложениям по одному и тому же адресу.

4.3. Создайте микроинтерфейсную базу

Возьмем базу реагирования в качестве примера

1. Создать проект

（1）Сначала убедитесь, что местныйnodeВерсия>= 14（РекомендуетсяnvmПриходитьуправлять node версия, винда Рекомендуется использовать nvm-windows)

(2) Вы можете быстро создать на, предоставив команды на официальном сайте. основе UMI проект как основное приложение,Также известен как база

(3) Установить зависимости

npm i @micro-zoe/micro-app --save

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

"@micro-zoe/micro-app": "^1.0.0-alpha.7"

(4) Установите микроприложение на входе.

Сначала создайте файл global.tsx в корневом каталоге.

import microApp from '@micro-zoe/micro-app'

microApp.start()

(5) Введение дополнительных приложений в основное приложение.

a. Назначьте маршрут субприложения

 {
    path: '/yp',
    name: 'yp',
    linkHidden: true,
    linkDisable: true,
    breadcrumbClose: true,
    component: '@/pages/yp-app',
  }

б. файлы субприложений.

Создайте yp-приложение (файл вспомогательного приложения) в файле страниц.

// имя (обязательно): имя приложения // URL (обязательно): адрес приложения, который будет автоматически дополнен как http://localhost:3000/index.html

import React from 'react';
import config from '@/config';

// /** @jsxRuntime classic */
// /** @jsx jsxCustomEvent */
// import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event';

export default (): React.ReactElement => {

  // Субприложение нажимает на навигационную цепочку, чтобы вернуться на домашнюю страницу.
  const onDispathChild = (e: any) => {
    const { isBackHome } = e.detail.data;
    if (isBackHome) window.location.href = '/';
  };

  return (
    <>
      <micro-app name="yp" url={config?.yp} onDataChange={onDispathChild} />
    </>
  );
};

Описание: метод onDataChange — это метод передачи информации между подприложением и основным приложением. Микроприложение монтирует глобальный объект под окном. Вам нужно только запустить методы, которые оно предоставляет, для завершения связи между основным приложением и. основное приложение, независимо от логики взаимодействия или логики передачи данных, все работает.

c. Основное приложение успешно представляет подприложение (подприложение является проектом VUE).

На данный момент, если в проекте нет междоменных проблем, субприложение успешно подключено к основному приложению. Левая часть проекта — это основное приложение, а средний модуль — субприложение. содержит все меню модуля и список субприложения. С учетом единого меню. Вынести в основное приложение (базу) для удобства управления. Нужно удалить меню и некоторые ненужные вещи на страницах субприложения. затем унифицированно настройте некоторые общие стили и общедоступные макеты подпроектов. Наконец, вы можете получить основное приложение. + Последняя страница страницы дополнительного приложения. На этом этапе вы успешно получили доступ к первому дополнительному приложению. . Выполните те же действия для последующих приложений.

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

2. Прыжок по маршруту

Перейти к маршруту соответствующего субприложения через меню основного приложения.

//config.ts
let config = {
  yp: 'https://xxx.xxx.com:7000',//префикс маршрутизации субприложения локальной среды
};

const isEnvPro = process.env.NODE_ENV === 'production';

if (isEnvPro) {
  config = {
    yp: 'https://xxx.xxx.com',//префикс маршрутизации субприложения предварительной среды
  };
}

export default config;
//Выше приведен весь файл config.ts-----конец


//Кликните в меню по содержимому внутри события

history.push('/yp'); //Переходим в подприложение

setTimeout(() => {
    microApp.router.push({
      name: 'yp', //и Имя субприложения должно быть согласованным, чтобы соответствовать маршрутизации соответствующего субприложения.
      path: `${config.yp}${item.url}`,
    }); //Перейти к маршрутизации субприложения, где config — это файл конфигурации, указанный выше, а субприложение, соответствующее среде, берется в соответствии с различными средами. Пункт — это информация о пути меню, по которому в данный момент щелкают.
}, 500);

Вот объяснение того, почему используется setTimeout. Сначала переключитесь на субприложение через History.push('/yp'), чтобы маршрут субприложения не был найден в течение короткого времени после переключения. задержка может точно перейти к субприложению, применить соответствующий маршрут.

3. Настройте междоменный доступ

(1) Если это только локальный междоменный режим, вы можете установить его для субприложения и установить междоменную поддержку в заголовках webpack-dev-server:

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
  }
},

Он имеет соответствующие документы и устанавливает различную междоменную информацию в зависимости от языка субприложения.

(2) Если интерфейс является междоменным.

Затем вам нужно найти настройки серверной части, позволяющие интерфейсу использовать междоменный код. Возьмем в качестве примера Java:

@Override
    public void init(FilterConfig filterConfig) {
        this.origins = Lists.newArrayList("http://localhost:8088",
            "https://xx.xxx.com",
            "https://xx.aaa.com:8088",
            "https://xx.bbb.com:7000");
    }

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

4. Конфигурация агента

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

proxy: (() => {
  return {
    //  Предварительная версия с локальным доступом
    '/avoid': {
      target: 'https://xx.xxx.com',
      changeOrigin: true,
      bypass: (req) => {
        if(req.headers.accept.indexOf('html') !== -1 ) {
          return '/index'
        }
      },
    }
  }
})()

Первоначально локальный агент пересылался на предварительно выданный сервер, если маршрут содержал «/». Обычно ссылка субприложения осуществлялась отдельно, и к предварительно выданному интерфейсу локального агента можно было получить доступ в обычном режиме. не удалось разместить в основном приложении. Наконец, агент был изменен. Он стал общедоступной частью всего проекта/избегайте, что решает эту проблему. Проект может быть не вызван этим, но вы можете начать с агента. чтобы найти проблему.

5. Передача данных

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

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

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

Субприложение получает данные из базового приложения, а базовое приложение отправляет данные в субприложение. Для получения подробной информации о глобальной передаче данных см. https://zeroing. jd.com/docs.html#/ zh-cn/data

05 Подвести итог

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

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

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