Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.
Marcos y herramientas
No faltan marcos de interfaz, como Angular y Next.js, pero la mayoría de ellos no se crean pensando en las microinterfaces. Por lo tanto, a veces faltan mecanismos para abordar los desafíos de la arquitectura microfrontend.
Consideraciones generales sobre el marco
El objetivo de esta guía no es recomendar ni comparar marcos individuales. Como a menudo se ejecutan varias microinterfaces en la misma página de aplicación web, las principales preocupaciones son la carga y el rendimiento del tiempo de ejecución. Es importante elegir un marco que presente la menor sobrecarga posible.
Los marcos se dividen en función de la capa de renderizado:
-
Renderización del lado del cliente (CSR)
-
Renderización del servidor (SSR)
Las arquitecturas frontend incluyen otras capacidades, como la generación de sitios estáticos (SSG). Sin embargo, el SSG se realiza solo una vez. Las microinterfaces se componen principalmente en tiempo de ejecución, por lo que las principales opciones son CSR y SSR.
Renderización del lado del cliente
Para la RSE, hay dos opciones populares:
-
Estructura SPA única
-
Federación de módulos
Single SPA es una opción ligera para crear microinterfaces. Resuelve los desafíos más comunes en las arquitecturas de microfrontend, como componer varias microinterfaces en la misma página y evitar conflictos de dependencia.
Module Federation comenzó como un complemento, ofrecido por webpack 5, y resuelve la gran mayoría de los desafíos de las arquitecturas de microfrontend, incluida la gestión de las dependencias entre diferentes artefactos. Module Federation 2.0 funciona de forma nativa con Rspack, webpack, esbuild y, ahora, con. JavaScript
Considere no usar ningún marco en absoluto. Los navegadores modernos, con una cuota de mercado global del 98 por ciento según caniuse.com
Renderización del lado del servidor
Por el lado del SSR, las dos opciones principales son más complicadas:
-
Adopte un marco existente, como Next.js, y aplique un principio de microinterfaces que utilice la federación de módulos.
-
Utilice HTML- over-the-wire para intercambiar fragmentos de HTML que representen microinterfaces y componga estos fragmentos dentro de una plantilla en tiempo de ejecución. Un ejemplo de este enfoque es Podium.
