«Это пятый день моего участия в ноябрьском испытании обновлений. Подробную информацию об этом событии см.:Вызов последнего обновления 2021 г."
По мере того, как технология разделения клиентской и серверной частей становится все более и более зрелой, серверная часть развивается в сторону микросервисов, а фронтенд-проекты становятся все более и более раздутыми, и им приходится выполнять более мелкое разделение. Таким образом, идея микро-интерфейса стала популярной, и некоторые крупные производители также представили некоторые решения, в этой статье мы рассмотрим микро-интерфейсы.
1 Как интерфейс превращается в микро интерфейс?
С самых первых дней интерфейс и серверная часть не разделены, а внутренняя часть используется для рендеринга страниц, и преобладают технологии JSP, ASP и PHP. По мере расширения проекта постепенно обнажаются недостатки такой формы разработки: фронтенд и бэкенд становятся все более сложными, с серьезной фронтальной связью, неудобной для разделения труда и сотрудничество. Затем родилась модель разделения клиентской и серверной части.Инженеры, которым нравится работать с пользователем, концентрируются на исследованиях клиентской части, любят оптимизировать производительность сервера, а инженеры, которым нравится работать с данными, изучают внутреннюю часть. Front-end и back-end разделены, и соответствующие технологии постоянно совершенствуются. Back-end начал развиваться в сторону микросервисов. Front-end тоже вырос за эти годы, проект раздулся, скорость упаковки и компиляции тоже замедляется, а когда хочется попробовать новые технологии, возрастает риск масштабной замены старого кода, да и фронтенд тоже сталкивается с расщеплением, поэтому фронтенд перерастает в микро - эпоха фронтенда.
2 Что такое микрофронтенд?
Чтобы понять, что такое микро-интерфейс, вы должны сначала понять, что такое микро-сервис.Микро-сервис — это обновление серверной сервис-ориентированной архитектуры.С помощью облегченных коммуникационных протоколов один за другим сервисы организованы для формирования полного набора услуг.Каждая служба Слабая связь между ними может быть разработана на разных языках, каждая служба обеспечивает различные обязанности и, наконец, организуется вместе для обеспечения внешних функций.
Можно сказать, что микроинтерфейс поглощает идею микросервисов и разделяет проекты интерфейса.Каждый проект может использовать разные технологии и может быть развернут отдельно.Наконец, суб-приложение загружается с помощью единое основное приложение, и страница интегрирована.
микро интерфейсЭто разделение различных функций на несколько подприложений в соответствии с разными размерами. Эти подприложения загружаются основным приложением.
Ядром микрофронтенда являетсядемонтировать, после демонтажакомбинировать!
3 Каковы преимущества микрофронтендов?
- Простой, слабо связанный
- Меньшая кодовая база, высокая связность, простота обслуживания, более быстрая компиляция
- Инкрементальные обновления снижают риск рефакторинга внешнего кода.
- Может быть развернут независимо
- Разным командам (разным стекам технологий) удобно разрабатывать и в итоге интегрироваться вместе
- Старые приложения нельзя выбросить
- общие компоненты
4 Каковы схемы реализации микроинтерфейса?
-
Для интеграции на стороне сервера, при необходимости, набор структур, соответствующих внешнему интерфейсу, также может быть установлен на стороне сервера, а несколько приложений могут быть перенаправлены с использованием маршрута HTTP-сервера.
-
iframe
Самая большая особенность заключается в том, что он предоставляет собственное решение жесткой изоляции браузера, будь то изоляция стиля, изоляция js и другие проблемы, которые могут быть идеально решены.
-
Веб-компоненты 3 в 1
- Пользовательские элементы: набор API-интерфейсов JavaScript, которые позволяют вам определять пользовательские элементы и их поведение, которые затем можно использовать по мере необходимости в вашем пользовательском интерфейсе.
- Shadow DOM: набор API-интерфейсов JavaScript для прикрепления инкапсулированного «теневого» дерева DOM к элементу (отображаемому отдельно от DOM основного документа) и управления связанными с ним функциями. Таким образом, вы можете сохранить функциональность своих элементов в секрете, чтобы их можно было запрограммировать и стилизовать, не беспокоясь о конфликте с остальной частью документа.
- HTML-шаблоны:
<template>а также<slot>Элементы позволяют писать шаблоны разметки, которые не отображаются на отображаемой странице. Затем их можно повторно использовать несколько раз в качестве основы для пользовательских структур элементов.
-
ESM
ЕСМ существуетсовместимостьЭтот существенный недостаток,Большинство старых браузеровПо-прежнему нельзя использовать напрямую, он может стать совместимым кодом через webpack, rollup, esbuild, snowpack и другие инструменты компиляции.
-
qiankun
Настоящая одностраничная микроинтерфейсная структура, основанная на инкапсуляции single-spa.
-
EMP
Одностраничное микро-интерфейсное решение, самостоятельно разработанное бизнес-центром JOY Times
-
...
5. Вывод
Мне, как бэкенд-инженеру, не хватает некоторых деталей фронтенда, но микросервисы и микрофронтенды привнесли в наш проект больше возможностей, и направление развития этой технологии заслуживает нашего глубокого внимания. Может быть, это приведет к следующему В век технологий, это каждый, кто просматривает.