Конференция раннего чата по интерфейсу, новая отправная точка для развития интерфейса, была проведена совместно с Nuggets. Добавьте WeChat codingdreamer в эксклюзивную группу микро-интерфейса конференции и выиграйте на новом стартовом рубеже.
14-е | Сессия по развитию и продвижению интерфейса, 8-29 будет в прямом эфире, 9 лекторов (Ant Financial Services / Tax Friends и т. д.),Нажмите на меня, чтобы сесть в машину 👉 (Адрес регистрации):
Текст выглядит следующим образом
Эта статья — 38-я сессия фронтенд-раннего чата, седьмой микро-фронтенд, отСун Сяокай Внешний технический эксперт - Вэй ЛиньСовместное использование - Кратко организованная версия выступления (пожалуйста, смотрите записанное видео и PPT для полной версии, включая демонстрацию):
Введение хозяина
Этим сообщением поделился Вэй Лин из группы общей архитектуры внешнего интерфейса Song Xiaocai, поэтому Вэй Линь является одним из основных членов группы по инфраструктуре команды внешнего интерфейса Song Xiaocai. время, особенно средние и внутренние леса и вспомогательные средства НИОКР, а также обновление архитектуры инженерной системы микроинтерфейса.
основное содержание
поделиться планом
- Микрофронтенды (концепция) Cognitive History
- Зачем нужны микрофронтенды
- От исследований до практики посадки
основное содержание
- Интеграция нескольких приложений - Qiankun
- Монолитный раскол - Исследование Федерации
Микрофронтенды (концепция) Cognitive History
Я услышал о концепции микрофронтендов только в 2017 году. Это был коллега по Java, который поделился статьей ThoughtWorks о микрофронтендах. Позже выяснилось, что понятие начало циркулировать в 16 лет.
В 2018 году вебмастер microfrontend.org выступил с докладом на JS конференции, на самом деле я тогда особо не обращал на это внимания, да и без кейса говорить было слишком пусто. В то время Дэн Амбрамов также написал в Твиттере, что он был озадачен микроинтерфейсом и чувствовал, что его ценность не так уж велика. Некоторые люди даже жалуются, что само одностраничное приложение написано плохо, и все еще думают о прибамбасах микрофронтенда. Позже появилась односпальная библиотека, и постепенно стала формироваться окружающая ее экология.
Впервые я узнал о Цянькуне в Чжиху в 2019 году. Он основан на инкапсуляции single-spa в сочетании с уникальной схемой изоляции и механизмом песочницы для устранения недостатков single-spa, что бросается в глаза.
За последние 20 лет я столкнулся с некоторыми потребностями и болями в своей компании.После исследования нескольких библиотек и фреймворков (соответственно, Luigi, feature-hub, Single-spa, qiankun и федерация Webpack5) он начал официально внедряться . Я начал это делать после 1 мая, если позже, то обмена не будет. Недавно я увидел твит от Дэна, в котором говорилось, что он понимает, что могут дать микрофронтенды.
Прежде чем мы начнем, я также резюмирую предложение «Микро-интерфейс — это не серебряная пуля, он не такой непостижимый»..
Зачем нужны микрофронтенды
Технология, которая не служит бизнесу, ничего не стоит, и нам нужно начать с окончания. Micro-Frestends принесет несколько специальных ценностей нашей компании, которые являются двумя типами ценностей в абстрактном.
ценность бизнеса
Со стороны пользователя это повышает ценность продукта и бизнеса, особенно преимущества интеграции нескольких приложений.
Мы столкнулись со следующими болевыми точками:
- Студенты, изучающие новую операцию, считают, что в середине и в фоновом режиме слишком много приложений, и они не могут их запомнить.
- UED считает, что многие взаимодействия с приложениями противоречивы. Обычно ширина и высота меню и заголовка несовместимы. Хотя используется дизайн Ant, глобальный пользовательский интерфейс каждой системы несовместим.
- Операции иногда отключаются, когда они работают в нескольких приложениях, и они ожидают ощущения рабочей среды (и мы ожидаем, что они будут). В то же время в будущем нам потребуется доступ к единым уведомлениям о нарядах, мы хотим сохранить это в одном приложении, чтобы каждое приложение не нужно было подключать по одному разу.
Вышеупомянутые болевые точки могут быть решены путем интеграции нескольких приложений с помощью возможностей микроинтерфейса.
Стоимость строительства
Со стороны разработчика он смещен в сторону инженерной ценности. В сценарии интеграции с несколькими приложениями мы можем управлять приложениями унифицированным образом, чтобы можно было поддерживать жизненный цикл приложения, конфигурацию приложения, стыковку платформы публикации и т. д. Раньше это сбивало с толку, и была ситуация, когда appKey и SysID запрашивались устно. Эти проблемы могут быть решены при наличии единой платформы входа и управлении ими в рабочем режиме.
Использование микроинтерфейсов для разделения огромных монолитных приложений принесет большую инженерную ценность, лично я считаю, что инженерная ценность выше. Разделение огромного приложения на модули позволяет команде поддерживать его отдельно, позволяя инженерам выбраться из трясины некоторых модулей. После демонтажа отдельные и независимые модули выпуска по мере необходимости также улучшают скорость выпуска.Со стороны продукта и бизнеса будет меньше беспокойства, и пользователи, естественно, выиграют. (В нашем доме есть приложение, которое часто не запускается из-за слишком большого модуля.)
От исследований до практики посадки
Я не практиковал спа, цянькунь, люцзи и т. д. до разработки. Но мы можем себе представить, какие проблемы возникнут, когда несколько приложений или модулей будут интегрированы вместе.
возможные проблемы
Во-первых, глобальный стиль конфликта. Наша первая мысль - это тень Дом, но она имеет проблемы совместимости, но и в мероприятии Broker React PIT для подкрепляющих приложений будет огромные затраты на преобразование. Кроме того, мы также можем подумать об использовании префикса CSS PREFIXES, чтобы добавить свойство стилей или использовать решение CSS-In-JS для решения, но есть определенная стоимость реконструкции, но она также приемлема.
Во-вторых, JS возможное глобальное загрязнение. tc39 браузер песочницы Realms не поддерживает это предложение, которое вам может потребоваться реализовать. На самом деле, я думаю, что это не особо сильные проблемы, в конце концов, большинство пакетов представляют собой хороший набор.
В-третьих, некоторые библиотеки имеют несколько версий. Например, существует несколько версий React. В прошлом некоторые системы могли захотеть упаковать и ускорить и использовать возможности внешних Webpack, но мы не можем унифицировать версии React всех приложений одновременно, поэтому нам нужно использовать библиотеки DLL для достижения цели повторного использования.
Использовать iframe для решения?
Что касается первых двух проблем, мы можем подумать об использовании фреймов для их решения. Кажется, это решает вышеуказанные проблемы загрязнения и конфликтов. Но мы можем представить себе сценарий: откройте приложение в iframe и несколько раз перейдите к нему, обновите страницу в это время, и состояние iframe исчезнет. Кто-то скажет, что недостаточно настойчиво записывать? Да, но есть и другие проблемы, такие как недостаточная скорость загрузки, проблема общения между родителями и детьми, короче говоря, стоимость использования очень высока. У меня нет особых надежд на этот план.
После размышлений о некоторых более подробных проблемах и размышлениях о степени детализации разделения и интеграции, в конечном счете, микро-интерфейс — это своего рода проблема разборки.
Это изображение, которое я люблю использовать для разбора проблем. В сценарии нашей компании в первую очередь мы обращаемся к интеграции приложений, и только небольшое количество более крупных приложений требует демонтажа одного приложения. Интеграция нескольких приложений заключается в том, чтобы уменьшить количество приложений предыдущего уровня приложений на стороне модуля, а затем использовать хост-приложение (основное приложение) для загрузки, в то время как разделение одного приложения заключается в дизассемблировании одного приложения в соответствии с разные размеры выше. Из разных пакетов уровня модуля или класса.
Интеграция приложений
Выступая перед исследованиями технологий, SAP основан на открытом исходном котеле Iframe Luigi, играя под напрямую исключено. Функциональный концентратор представляет собой уровень модуля, более строки с мономером разделить сцену, но большие затраты преобразования, расходы на обучение. Тогда единственный однопальный спа и сравнение Цянькуна.
single-spa относительно прост, он просто перехватывает преобразование маршрутизации одностраничных приложений (заинтересованные студенты могут увидеть его тестовые примеры) и не принимает во внимание изоляцию стилей и песочницу выполнения JS, эти два момента необходимо сделать сами Осуществить интеграцию. При этом у него нет возможности подгружать модули, он вообще дополняется SystemJS, ну и, конечно же, его можно комбинировать с федерацией, о которой мы упомянем позже.
Напротив, qiankun помогает нам реализовать механизм песочницы и уникальную схему изоляции стилей, которая очень подходит для сценариев интеграции нескольких приложений. Почему по-другому? Нормальная идея, то есть, когда я был на стадии фантазии, я думал, что могу использовать манифест, упакованный Webpack для загрузки, но о HTML-части нельзя было позаботиться.
Конечно, qiankun не идеален, потому что единственный способ — использовать import-html-entry для загрузки и анализа HTML. Это определенный проигрыш, но при компромиссе Qiankun самый простой и прямой, а механизм предзагрузки преднагружен, для нас это на самом деле вполне приемлемо.
Его общее использование также очень простое.Основному приложению нужно только зарегистрировать информацию о подприложении, такую как узел монтирования, имя приложения (обратите внимание, что имя приложения уникально), правила маршрутизации, а затем установить загружаемый по умолчанию приложение и, наконец, запустите его. Для подприложений все еще проще: вам нужно всего лишь изменить конфигурацию упаковки Webpack, упаковать себя в модуль umd, а затем указать жизненный цикл, требуемый основным приложением.
Возникшие практические проблемы
Мы столкнулись с некоторыми проблемами, когда официально реализовали разработку.
Сначала повторите настройку. Мы извлекли повторяющуюся конфигурацию из приложения в подключаемый модуль решения.
Во-вторых, конфигурация dll. Помимо установки libraryTarget загружаемого приложения в umd, вам также необходимо установить dll, иначе загрузка не будет выполнена. Видно, что песочницу qiankun выполняет eval, она не обязана помогать вам в разрешении этой var (dll по умолчанию является методом экспорта типа var), и в строгом режиме она не разрешена.
В-третьих, проблема модального разрушения Ant Design. Частично визуализированные узлы можно указать с помощью getContainer. В новой версии Ant Design вы можете просто установить его в false. В старой версии вам нужно указать конкретный узел DOM. Вы можете обернуть Modal самостоятельно, чтобы добиться повторного использования.
В-четвертых, общение отца и сына. Сначала я думал, что мне нужно найти способ, например, использовать нативные события или связать модуль в окне для связи. Здесь qiankun такой же, как single-spa, и его можно внедрить через параметры жизненного цикла с помощью реквизита.
В-пятых, мы продвигаем некоторые распространенные модели Redux в основное приложение, а суб-приложения не нужно загружать заново. На этом этапе в субприложение будет внедрено несколько хранилищ. Вы можете использовать расширенное использование реакции-редукции подключения.В новой версии используется контекст.Некоторые из нас все еще 5.x, которые можно решить с помощью storeKey.
Интеграция также делится на простой режим и точный режим.
Простой режим предназначен для преобразования подприложения, основное приложение предоставляет пустую полную страницу для отображения, а для навигации используется плавающий навигатор (фиксированный), но это очень просто и грубо.
Детальный режим означает, что основное приложение предоставляет область содержимого только подприложениям. При этом сделать некоторые дополнительные преобразования, согласовать структуру данных меню, передать класс управления кастомизированным меню в подприложение, добавить или удалить при загрузке подприложения.Эти данные можно кэшировать , чтобы в следующий раз было быстрее. Для нестандартных хедеров и футеров мы также предоставляем кастомизированные интерфейсы, которые можно восстановить при размонтировании. Для загрузки интерфейса мы единообразно запрашиваем библиотеку, а затем используем возможность LRU кэшировать интерфейс для достижения цели мультиплексирования интерфейса между несколькими приложениями.
Выше приведены практические проблемы и решения, с которыми мы столкнулись при интеграции нескольких приложений.Давайте поговорим о разделении одного тела.
Расщепление мономера
Монолитное разделение просто означает разделение части большого приложения и удаленную загрузку. Вообще говоря, по сравнению с интеграцией нескольких приложений разделение одного приложения больше подходит для ситуации, когда большие модули разделены на задачи и управляются и обслуживаются отдельно. Такое приложение само по себе имеет определенные ограничения. Например, единый стек технологий (React), использующий ту же библиотеку пользовательского интерфейса (Ant Design), как правило, также имеет единый стандарт взаимодействия. Из документа single-spa я взял сравнительную таблицу метода дизассемблирования.Для краткого сравнения только метод динамической загрузки модулей может соответствовать требованиям раздельного построения, раздельного развертывания и независимых складов кода.
Монолитный сплит - динамическая загрузка
Поскольку одна из наших систем большая (пользовательский модуль, управление WeChat, модуль анализа отчетов, управление контентом и т. д.), выпуск выполняется очень медленно, а иногда и сбоем. Следовательно, необходимо разделить часть и управлять ею отдельно.
Сначала я использовал qiankun@1.6.x, который не подходил для наших нужд. Потому что, когда мы делим бизнес-модули по полям, некоторые бизнес-модули в настоящее время имеют небольшое количество страниц, и нет особых причин убеждать пользователей изменить привычки использования меню. Но если это приложение с большим количеством блоков и раздутых меню, так много меню или переключателей, которые отделены от бизнес-домена первого уровня, qiankun можно использовать полностью. А как насчет посылок single-spa и SystemJS? Или qiankun@2.0 (2.0 поддерживает посылки)? На самом деле все они осуществимы, но не идеальны.
Это недавний твит от автора Webpack. Студенты, обеспокоенные динамикой Webpack, могут знать, что федерация поддерживается в течение длительного времени, но в тот день у федерации был только концептуальный документ, а документа по API еще не было. Тогда давайте посмотрим, чем федерация сильнее предыдущих решений по демонтажу.
federation
Экстерналы просты и грубы и не могут справиться с проблемой сосуществования нескольких версий. dll импортирует все пакеты, и код не может использоваться совместно модулями. И федерация может не только осуществлять контроль версий, но и динамически определять, отсутствуют ли отсутствующие пакеты поставщиков, и загружать их. В то же время он также преодолевает неудобство разработки общих модулей с пакетами npm.
Эти две картинки были украдены из статьи автора федерации, ха-ха. Можно сказать, что они очень ярко описывают роль федерации. Например, модуль лендинга может быть получен медиа-сайтом, аналогично лендинг может делиться модулями с медиа-сайтом. Для этих общедоступных модулей вы можете напрямую извлечь их в отдельный репозиторий и импортировать их по запросу.После загрузки модуля, если другие модули также импортируют этот общедоступный модуль, в это время не будет запрашиваться ресурсы. Подробнее вы можете посмотреть на примере на складе в левом нижнем углу.
Давайте посмотрим, как это используется в примере.
Первый шаг — добавить плагин федерации в Webpack5. Давайте сначала посмотрим на параметры плагина.Первое имя параметра — это имя федерации, которая объявляет федерацию, вторая библиотека параметров — это тип и имя объявленной библиотеки при ее открытии, а третий параметр имя файла — это имя упакованный файл конфигурации среды выполнения.имя. Четвертый параметр exposes указывает, какие конкретные файлы (модули) вы хотите предоставить. Пятый параметр remotes — указать имя приложения, загруженного с пульта, и его имя при импорте. Шестой параметр shared предназначен для указания модуля (пакета), которым необходимо поделиться.
Второй шаг — введение конфигурации времени выполнения в HTML приложения, как в SystemJS.
Третий шаг, в приложении мы можем загрузить его в соответствии с удаленным модулем, настроенным в пультах, который ничем не отличается от обычного кода.
Для нас это означает разделить открытый модуль и модуль бизнес-домена, а затем поделиться ими.
Еще один совет для вас. Это огромное монолитное приложение было разработано несколькими людьми, поэтому размещение вторичных меню и вторичных страниц было запутанным, а разделение различных модулей занимало много времени. Обычно при разработке мы должны обращать внимание на разделение второстепенных подстраниц по полям, чтобы подготовиться к черному дню.
Последней частью реализации является проблема публикации. Режим короткого ответа заключается в том, что вам не нужно ни о чем думать, просто опубликуйте его в обычном режиме. Тонкий режим должен учитывать проблему плавного онлайна.
Тщательно представим сценарий: сначала успешно выпущен подмодуль, но это зависит от апи основного приложения, которое не было выпущено, затем приложение вылетит, и наоборот. Требования к доступности для этого такие же, как и для бэкенда.
Как это решить? Во-первых, мы хешируем HTML подприложения. Но механизм управления версиями HTML означает, что конфигурация является динамической. Давайте подумаем о конфигурации Qiankun перед вами Нам нужно изменить адрес подприложения, прописанного в основном приложении. Эту динамику конфигурации необходимо получить с сервера, поэтому необходимо разработать центр конфигурации. В то же время, когда подприложение публикуется, ему необходимо уведомить центр конфигурации об успешном выпуске и передать index_[hash].html или адрес конфигурации среды выполнения федерации в центр конфигурации. Наконец, порядок выпуска должен быть гарантирован на платформе выпуска. Изменения в основном приложении должны быть запланированы для последней версии.
Подводить итоги и планировать
Делайте простые вещи, пусть ваша архитектура меняется с размером вашего бизнеса, а то, что вам подходит лучше. Возможно, не всем нужны сценарий многоквартирной интеграции, но одновольное расщепление действительно является огромным инженерным значением, привлеченным к микропроходу.
Наконец, давайте поговорим о нашем общем плане. Мы хотим быть бортовой платформой, которая соединяет и управляет жизненным циклом приложений. Проще говоря, приложение устанавливается из приложения => [регистрация центра конфигурации, конфигурация распределения центра конфигурации, стыковка платформы мониторинга, стыковка конфигурации сервера] => базовая структура получает проект инициализации конфигурации => среда выполнения получает конфигурацию => стыковка платформы публикации => Весь процесс [получения конфигурации на стороне пользователя, механизма уведомления и добавочного выпуска] управляется.
Сказав много, время разработки в мае невелико, а некоторые еще планируются и реализуются. В настоящее время схема выпуска все еще находится в простом режиме, а схема оттенков серого и механизм уведомлений не интегрированы. При интеграции нескольких приложений также возникает объем разработки платформы мониторинга, поскольку доменное имя становится дополнительным путем.
В этой статье используетсяmdniceнабор текста