Стремится стать наиболее полным решением для микроинтерфейса — qiankun 2.0

внешний фреймворк
Стремится стать наиболее полным решением для микроинтерфейса — qiankun 2.0

исходный адрес

Прошло 11 месяцев с момента открытия исходного кода qiankun, и последнего официальногоголосПрошло 8 месяцев.

Announcing qiankun@2.0

Июнь 2019 г., Micro Frontend FrameworkqiankunВерсия 1.0 была официально выпущена, менее чем за год мы набрали 4k+ звезд, получили поздравления от официальной команды single-spa, поддержали 200+ онлайн-приложений на Ali и стали микроканалом, выбранным многими командами в сообществе. Передние решения.

Сегодня qiankun официально выпустит версию 2.0.

qiankun@2.0 предоставляет некоторые новые возможности и лишь незначительные корректировки API. Пользователи версии 1.x могут легко перейти на версию 2.x. Подробности см. в разделе «Руководство по обновлению» ниже.

Введение в цянькунь

Некоторые друзья могут не знать, что такое микрофронтенд и qiankun.

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

qiankun – это готовый к работе фреймворк микроинтерфейса. Он основан на single-spa и обладает возможностями, необходимыми для систем микроинтерфейса, такими как песочница js, изоляция стилей, загрузчик HTML и предварительная загрузка. qiankun можно использовать в любой среде js, а доступ к микроприложениям так же прост, как встраивание системы iframe.

Дополнительную информацию можно найти в нашемОфициальный сайт

Изменения позиционирования

Самое большое изменение, внесенное qiankun 2.0, заключается в том, что позиционирование qiankun будет изменено наФреймворк микро-фронтендаВЗагрузчик микроприложений.

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

image-20200415232001094

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

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

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

Что дает это обновление?

новая функция

  • Поддерживает параллелизм нескольких приложений и изолированную программную среду с несколькими экземплярами.
  • Поддерживает ручную загрузку/выгрузку микроприложений
  • Поддерживает совместимость с песочницей IE11.
  • Официальное минималистское коммуникационное решение для микроприложений
  • Поддерживает изоляцию стилей на основе Shadow DOM.

Кроме того, мы также сделали

  • Обновите single-spa до версии 5.x
  • Более гибкая стратегия настройки предварительной выборки
  • Сопутствующий плагин веб-пакета
  • Более удобная поддержка сценариев развертывания, например автоматическое внедрение publicPath во время выполнения для микроприложений и т. д.
  • Более простой и понятный API, рефакторинг большого количества кода, чтобы сделать его более понятным и расширяемым.
  • исправлены некоторые ошибки

Кроме того, мы также обновили соответствующиеumi qiankun plugin, в сценарии umi вы можете загрузить микроприложение следующим образом:

import { MicroApp } from 'umi';

function MyPage() {
  return (
  	<div>
      <MicroApp name="qiankun"/>
    </div>
  );
}

журнал выпуска

Поддержка нескольких приложений

В qiankun@1.x наша песочница, изоляция стилей и другие механизмы могут действовать только для одного сценария микроприложения, а возможность поддержки сосуществования нескольких микроприложений еще не завершена.

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

** В сценарии с несколькими приложениями песочницы каждого микроприложения изолированы друг от друга, то есть влияние каждого микроприложения на мир будет ограничено собственной областью действия микроприложения. **Например, A применяется вwindowДобавил атрибут вtest, это свойство может быть передано только в той области, где A применяет собственноеwindow.testПосле получения ни основное приложение, ни другие микроприложения не могут получить эту переменную.

Обратите внимание, однако, что несколько микроприложений, зависящих от маршрутизации, не могут отображаться на странице одновременно, поскольку браузер имеет только один URL-адрес. вероятность того, что один из них приведет к ошибке 404.

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

import { loadMicroApp } from 'qiankun';

/** 手动加载一个微应用 */
const microApp = loadMicroApp(
  {
    name: "microApp",
    entry: "https://localhost:7001/micro-app.html",
    container: "#microApp"
  }
)

// 手动卸载
microApp.mountPromise.then(() => microApp.unmount());

Таким же образом qiankun используется в качестве загрузчика приложений.

На основе этого API вы можете легко инкапсулировать свои собственные компоненты контейнера микроприложений, такие как:

class MicroApp extends React.Component {
  
  microAppRef = null;
  
  componentDidMount() {
    const { name, entry } = this.props;
    this.microAppRef = loadMicroApp({ name, entry, container: '#container' });
  }
  
  componentWillUnmount() {
    this.microAppRef.mountPromise.then(() => this.microAppRef.unmount());
  }
  
  render() {
    return <div id="container"/>;
  }
}

Совместимость с песочницей IE11

Тот, у кого самый высокий голос в области проблемы цянькунь,Совместимость с IE, многие друзья с нетерпением ждут qiankun можно использовать в IE.

Основным препятствием для использования qiankun 1.x в IE является то, что песочница qiankun использует прокси-сервер ES6, который нельзя компенсировать такими средствами, как ployfill. В результате пользователи qiankun в IE не могут включить функцию песочницы qiankun, что приводит к невозможности включить изоляцию js и изоляцию стилей.

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

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

Изоляция стилей на основе теневого DOM

Изоляция стилей также является важной проблемой, с которой сталкиваются микро-интерфейсы.В qiankun@1.x мы поддерживаем изоляцию стилей между микро-приложениями (эффективно только при включенной песочнице).Есть еще некоторые проблемы:

  1. Изоляция стилей между основными и вспомогательными приложениями зависит от ручной настройки плагинов.
  2. Необходимо срочно решить проблему изоляции стилей между микроприложениями в сценариях с несколькими приложениями.

Для этого мы ввели новую опцию,sandbox: { strictStyleIsolation?: boolean }.

Когда эта опция включена, мы встроим микроприложение в виде Shadow DOM, чтобы добиться настоящей изоляции стилей приложения:

import { loadMicroApp } from 'qiankun'

loadMicroApp({xxx}, { sandbox: { strictStyleIsolation: true } });

Shadow DOM может обеспечить истинную изоляцию между стилями (вместо того, чтобы полагаться на изоляцию, основанную на соглашении, такую ​​как назначение префиксов) в следующей форме:

image.png

Изображение изMDN

наstrictStyleIsolation, мы вставим микроприложение в Shadow Tree, созданное qiankun, а стили микроприложения (включая динамически вставленные стили) будут смонтированы под узлом Shadow Host, поэтому стили микроприложения будут только применяется к теневому дереву, что обеспечивает внутреннюю изоляцию стиля.

Но включение Shadow DOM вызовет и другие проблемы:

Типичная проблема заключается в том, что некоторые компоненты могут вставлять узлы за пределы теневой границы во внешнее дерево документов, и стили этих узлов будут потеряны.Modalотобразит узел вducument.body, вызывая потерю стиля; для сцены antd прямо сейчас вы можете передатьConfigProvider.getPopupContainerAPI для назначения узла внутри Shadow Tree в качестве узла монтирования, но некоторые другие библиотеки компонентов или часть вашего кода также столкнутся с той же проблемой, вам нужно уделить особое внимание.

Кроме того, в сцене Shadow DOM будут возникать некоторые дополнительные проблемы с обработкой событий, обработкой границ и т. д. В будущем мы будем постепенно обновлять официальную документацию, чтобы помочь пользователям более плавно включать Shadow DOM.

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

Официальное минималистское коммуникационное решение

Мы считаем, что в сценарии микроинтерфейса наиболее разумным коммуникационным решением является обработка его через URL и CustomEvent. Но в некоторых простых сценариях решение на основе реквизита будет более прямым и удобным, поэтому мы предоставляем такой набор API для пользователей qiankun, чтобы завершить связь между приложениями:

Основное приложение создает общее состояние:

import { initGloabalState } from 'qiankun';

initGloabalState({ user: 'kuitos' });

Микроприложения получают общее состояние через реквизиты и слушают:

export function mount(props) {
  props.onGlobalStateChange((state, prevState) => {
    console.log(state, prevState);
  });
};

Более подробное введение в API можно посмотретьофициальная документация.

Что мы будем продолжать приносить вам

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

  1. Официально поддерживаемый плагин qiankun webpack для решения некоторых проблем из-за неправильной настройки
  2. Пользовательские правила песочницы
  3. Поддержка вложения микроприложений
  4. Удобный опыт отладки
  5. Объедините с Webpack5 Module Federation, чтобы предоставить официальные инструкции по использованию или плагины.
  6. Более экспериментальные (экспериментальные) попытки, такие как нативныеPortalОтрисовка меток в микроприложениях на основе упрощенной схемы изоляции стилей во время выполнения.

Руководство по обновлению

В версии 2.0 было скорректировано довольно много имен внутренних API, но внешние API, которые вы используете, не сильно изменились (в основном полностью совместимы с 1.x), и вы можете выполнить обновление в течение десяти минут.

рендер изменен на контейнер

import { registerMicroApps } from 'qiankun'

registerMicroApps(
  [
    {
      name: 'react16',
      entry: '//localhost:7100',
-     activeRule: location => location.pathname.startsWith('/react'),
+     activeRule: '/react',
-     render: renderFn,
+     container: '#subapp-viewport',
    },
  ]
)

Теперь вы можете просто указать узел монтирования вместо того, чтобы самостоятельно писать соответствующую функцию рендеринга. в простых сценарияхactiveRuleНет необходимости писать функции для настройки (конечно, пользовательские функции по-прежнему поддерживаются), нужно указать только строку правила префикса, а также поддерживаются динамические правила класса react-router, такие как/react/:appId/name(поддержка от single-spa 5.x).

При этом микроприложение получаетpropsдобавитcontainerатрибут, это DOM вашего узла монтирования, который очень полезен для работы с динамически добавляемыми контейнерами и когда включен Shadow DOM.

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

Изменения конфигурации для запуска

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

import { start } from 'qiankun'

start({
-  jsSandbox: true,
+  sandbox: {
+    strictStyleIsolation: true
+  }
})

новый APIloadMicroApp

Этот API используется для ручного монтирования микроприложения.

/** 用于加载一个微应用 */
loadMicroApp(app: LoadableApp, configuration?: FrameworkConfiguration)

Сведения об использовании см. в разделе «Поддержка нескольких приложений» выше.

Категории