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

Когда я впервые присоединился к команде, наша система по-прежнему не полностью отделяется шаблон передней и задней части архитектуры, предоставляет запись для установки приложений React / Vue Repearing / Vue корневого контуса на корневом узле.

Мы находим, что есть некоторые недостатки этой архитектуры:

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

Но к счастью, в это время в нашей системе уже есть некая идея разделяй и властвуй.Основное приложение (надо сказать, что это слой макета на данный момент) и под-приложения монтируются на разные фрагменты шаблона отдельно, который также предназначен для следующего преобразования интерфейса iframe и Micro, что снижает большую нагрузку.

На самом деле в такой архитектуре тоже есть некая тень микрофронтенда :).

iframe архитектура

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

Нет необходимости полагаться на бэкэнд-шаблоны;
Необходимо управлять и контролировать маршрутизацию и формулировать единые правила маршрутизации;
Изоляция песочницы главного приложения;
Постарайтесь свести к минимуму изменения в подбизнесах, многие бизнесы несут тяжелое бремя;
Быстрая посадка и высокая доступность (ни в коем случае, время разработки всегда важнее многих вариантов...);

Но с приездом и последующими итерациями архитектуры IFrame мы также нашли некоторые недостатки сценариев IFrame:

Метод связи прост, а простой API для почтовых сообщений не может удовлетворить потребности бизнеса;
Стили разделены, и iframe приведет к тому, что глобальные маски, такие как Dialog, будут отображаться только в блоке ifame, что делает нашу систему более похожей на «лоскутное одеяло»;
Узкое место в производительности, переключение маршрутов вызовет перезагрузку подприложений в iframe, а производительность вызывает беспокойство;
Междоменная проблема, политика того же сайта в chrome80 приведет к тому, что междоменный файл cookie схемы iframe не будет перенесен на серверную часть;

Архитектура микроинтерфейса

Наконец, в середине этого года я обновил архитектуру iframe до архитектуры сосуществования микро-интерфейса + iframe и разработал серию цепочек инструментов разработки, связанных с микро-интерфейсом (Xida Puben...).

Итак, почему нет iframe?

На мой взгляд, микро-фронтенд - это идея, эволюция способа разработки и архитектуры. Такие фреймворки, как qiankun и icestark, являются лишь реализацией реализации микро-фронтенда. Разумная реализация iframe - это не разновидность микро-фронтенда. завершение реализации. . Наш оригинальный дизайн архитектуры iframe также в определенной степени является своего рода идеей микро-интерфейса, и, на мой взгляд, iframe по-прежнему имеет естественное преимущество для таких гигантских межкомандных средних и серверных проектов. являются следующими:

независимый от фреймворка: iframe загружает только ссылку развернутого приложения;
автономная песочница: у iframe есть независимая песочница для браузера, а подприложению и основному приложению вообще не нужно учитывать загрязнение js&css;
Для разработки простого: только тег iframe;

Тем не менее, это о некоторых болевых точках для IFrame:

Плохой опыт пользовательского интерфейса
Сложность общения: Побочным эффектом мощного механизма песочницы iframe является то, что между родительским и дочерним приложениями сложно общаться, трудно добиться только одного API-интерфейса postmessage, междоменных файлов cookie, промисов и т. д.;
Долгое время для загрузки: Каждая запись суб-приложения представляет собой процесс реконструкции контекста браузера и перезагрузки ресурсов;

Хотя вышеперечисленные болевые точки более-менее сочетаются с некоторыми хак-инструментами и спецификациями разработки, есть определенные решения, но есть варианты получше, почему бы и не попробовать :)

Итак, что такое микрофронтенд?

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

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently

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

одна страница

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

несколько страниц

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

Но в это время мы должны быть начеку: если подключено больше бизнес-модулей и они все еще остаются в текущем режиме, как поддерживать проект?

больше страниц? Боулдер приложение!

С дальнейшим ростом бизнеса становится доступным все больше и больше бизнес-модулей.Мы не только увеличиваем количество подприложений в навигационном измерении, но даже такие страницы, как домашняя страница, будут иметь блоки, принадлежащие нескольким бизнес-доменам. Подводя итог, можно разделить на два сценария:

единственный экземпляр
Несколько экземпляров

Затем, если нет хорошего лечения и разделения подсистемы, то наше приложение станет применением валунов ...

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

Микро интерфейс, разделяй и властвуй!

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

Как видно, микро передняя часть взята

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

Наш выбор

Сейчас Micro Front-End Frame на рынке много, таких как внутренний Ali имел Icestark, Qiankun еще два зрелых передней панели с открытым исходным кодом для Micro и Singlespa Community. Итак, как мы выбираем Micro Framework Framework для нашего проекта, я просто перечисляю здесь некоторые из моего мышления в выборе фронтальных фреймов микросхем:

стоимость изменения: Ни одна бизнес-команда не может уйти от этой темы, как вы убедите продукт и босса в том, что на техническую трансформацию уходит так много времени (все равно есть определенный риск), как вы убедите сторону субприложения сотрудничать с трансформацией ( поверьте мне, сторона суб-приложения не захочет этого делать) > 1 день реконструирован...);
изоляция песочницы: Нечего сказать об этом, многие подприложения будут интегрировать свои собственные системы отслеживания и мониторинга, такие системы часто монтируют или перехватывают глобальные переменные;
Инвариантность маршрутизации: В нашей архитектуре iframe уже есть относительно полный набор правил маршрутизации, так как же обновить архитектуру, не меняя маршрутизацию?
Общение инвариантности: Как и выше, в нашей архитектуре iframe у нас уже есть набор относительно зрелых инструментов связи, поэтому можем ли мы завершить взаимодействие с микро-интерфейсом, оставив неизменным API? Или просто микрофронтенды могут использовать средства коммуникации iframe?
Совместимость с фреймами: Такая огромная система не будет мигрировать на микро-фронтенд всю сразу, и мы не планируем отказываться от архитектуры iframe (не сможем мигрировать весь бизнес...). Итак, как обеспечить сосуществование двух архитектур? Кроме того, как обеспечить сосуществование двух архитектур и совместно использовать набор правил маршрутизации?
Управление оттенками серого: Выпуск больших версий подприложений часто сопровождается управлением градациями серого, так как же обеспечить достижение полного процесса градаций серого после подключения микрофронтенда? Это инструмент контроля версий или напрямую использовать htmlEntry?
Доступ к «древним» приложениям: Лучше всего держать iframe встроенным в древнее приложение, так можем ли мы поддерживать плавный доступ "Древнего Дракона" с небольшой долей жадности?

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

Эпилог

Вышеуказанная реформа в сочетании с интерфейсом Micro Business System, если я делаю, если что-то не так, пожалуйста, поправьте меня. Принципиальный анализ, то я буду разрешать вывод источника Цянькуна, а также какой-то инструмент Micro-Tip, который я сделал статьи (Sahua ...).

🏆 Технический специальный выпуск 4 | Расскажите о тех вещах, которые касаются микроинтерфейса...