La idea detrás de las micro interfaces es dividir el lado monolítico del cliente de un proyecto web en partes más pequeñas que sean más fáciles de administrar. Con este enfoque, cada equipo involucrado en el proyecto tiene su propia área de trabajo, los equipos son responsables solo de un cierto fragmento del proyecto y están comprometidos de manera completamente independiente en su desarrollo. Entonces, cada equipo trabaja con su propia base de código, independientemente de los demás, lanza nuevas versiones de su subsistema, continuamente realiza pequeñas mejoras incrementales en él. La integración de este subsistema con otros fragmentos de la aplicación en la que están trabajando otros equipos se realiza a través de la API. Con este esquema de trabajo, las partes de interfaz de los proyectos se ensamblan a partir de fragmentos independientes que trabajan juntos.
Dan Abramov, en mayo pasado, escribióen su Twitter que no entiende los microfrontes. Él cree que los problemas que deben resolver ya se han resuelto mediante buenos modelos de componentes. “¿Quizás los microfrontas son una solución a problemas organizativos, no técnicos? Por ejemplo, cuando dos equipos de desarrollo no pueden ponerse de acuerdo en nada, incluida la infraestructura del proyecto ”, reflexiona.
Existen muchos enfoques para el desarrollo de microinterfaces: desde la integración inteligente de componentes durante la construcción del proyecto hasta la organización de diferentes partes de una aplicación para que trabajen juntas durante la ejecución del código mediante enfoques de enrutamiento específicos. En este artículo, he recopilado las herramientas más notables destinadas al desarrollo de dispositivos de microfrente.
1. Plataforma de bits
La plataforma Bit le permite ensamblar interfaces a partir de componentes independientes. Le ayuda a diseñar y administrar componentes. Esta es probablemente la solución más popular de mi lista y es la mejor preparada para el desarrollo de producción.
Si mira la página de inicio de bit.dev , notará que está ensamblado a partir de componentes independientes. Estos componentes son creados por diferentes equipos y tienen diferentes bases de código detrás de estos componentes. Pero todos están integrados entre sí, lo que en última instancia le permite formar una interfaz de proyecto integral.
Página de inicio bit.dev creado utilizando los componentes, el trabajo que se organiza con la ayuda de Bit
Command Line Tool Bit - un software popular utilizado para desarrollar, basado en los componentes. Con Bit, puede crear componentes y ensamblar interfaces a partir de ellos.
Se suele entender micro-frontend como el ensamblaje de la interfaz durante la ejecución del código del proyecto. Y la plataforma Bit tiene como objetivo formar una interfaz durante la construcción del proyecto. Esto les brinda a quienes usan esta plataforma tanto las capacidades útiles de los “monolitos tradicionales” en forma de seguridad y confiabilidad, como las ventajas de las soluciones microfront-end: simplicidad y escalabilidad de las soluciones.
Con Bit, diferentes equipos pueden crear y publicar de forma independiente sus propios componentes, interactuando con otros equipos a nivel de API de componentes. Esto le permite convertir el desarrollo web en un proceso de construcción de proyectos a partir de módulos separados.
Además de las herramientas para el desarrollo basado en componentes, el proyecto Bit ofrece una plataforma basada en la nube para desarrolladores. La plataforma le permite colaborar en componentes, administrar de manera efectiva el proceso de desarrollo y escalarlo. Al mismo tiempo, los equipos involucrados en trabajar en sus propias partes de un determinado proyecto siguen siendo completamente independientes.
Bit proporciona un proceso CI / CD único, completamente basado en componentes, que tiene como objetivo organizar el montaje rápido de proyectos. Esto significa que diferentes equipos pueden, sin temor a consecuencias negativas para el proyecto, realizar cambios en las partes de los proyectos que desarrollan. No tienen que esperar a otros equipos ni competir por cambios en la rama principal del proyecto. Los desarrolladores pueden realizar cambios en sus componentes de forma continua y segura, sin temor a equivocarse en aquellas partes del proyecto que no están haciendo. Estos cambios se aplican a todas las aplicaciones que utilizan estos componentes.
Un sistema de integración continua basado en componentes es 50 veces más rápido que uno convencional
, por lo que el proceso de desarrollo se enriquece con las siguientes capacidades:
- Una base de código simple con partes separadas independientes entre sí.
- Equipos autónomos.
- API compactas y bien definidas.
- Procesos independientes para la liberación de componentes terminados.
- Posibilidad de mejora continua incremental de componentes.
A continuación se muestra un ejemplo de una organización similar del trabajo en proyectos.
Si su equipo se encuentra en un desarrollo basado en componentes que busca una solución que aproveche la tecnología de microfinanzas y un enfoque modular para trabajar en aplicaciones grandes, le recomiendo que eche un vistazo a la plataforma Bit . Es muy posible que esto sea exactamente lo que necesita.
2.Webpack 5 y arquitectura de federación de módulos
La federación de módulos de arquitectura JavaScript (MF) fue propuesta por Zach Jackson. También inició la creación de un complemento de paquete web para implementar esta arquitectura. Gracias a los esfuerzos del equipo de webpack, este complemento apareció en Webpack 5 y ahora está en versión beta.
La idea detrás de MF es que múltiples ensamblajes separados deben formar una sola aplicación. Estos ensamblados separados no deben tener dependencias entre sí, lo que le permite desarrollarlos e implementarlos individualmente. Este es un esquema de estilo microfrente.
El uso de MF permite que una aplicación de JavaScript importe dinámicamente código de otras aplicaciones en tiempo de ejecución. El módulo crea un archivo que exporta sus capacidades, que es el punto de entrada al código que pueden cargar otras aplicaciones. Esto se hace configurando el paquete web en consecuencia.
Este enfoque, entre otras cosas, resuelve el problema de las dependencias de código y el problema de aumentar el tamaño del paquete organizando el intercambio de dependencias. Por ejemplo, si carga un componente de React, una aplicación que ya importó React no volverá a importar el código de la biblioteca. El sistema utilizará el código React ya importado e importará solo el código del componente. Finalmente, puede usar React.lazy y React.suspense para proporcionar un respaldo en caso de que el código importado falle por alguna razón. Esto ayudará a garantizar la experiencia de usuario correcta incluso si el ensamblaje del que depende el proyecto no funciona.
La arquitectura de la Federación de Módulos abre posibilidades muy interesantes para el desarrollo de micro interfaces. Los detalles sobre esta arquitectura y un ejemplo de su uso se pueden encontrar aquí .
3. Proyecto de spa único
Los creadores del proyecto de spa único lo definen como "un marco de JavaScript para usar microservicios en el desarrollo front-end". Si describimos brevemente su esencia, entonces podemos decir que implementa la idea del ciclo de vida de alguna entidad aplicada a cada aplicación individual que conforma el proyecto. Cada aplicación puede responder a eventos de enrutamiento y necesita saber cómo implementar, montar en DOM y desmontar desde DOM. La principal diferencia entre un SPA (aplicación de página única) normal y lo que se obtiene con un spa único es que las aplicaciones de un spa deben poder coexistir con otras aplicaciones que forman parte de un proyecto. Sin embargo, estas aplicaciones no tienen sus propias páginas HTML.
Como resultado, resulta que si necesita usar diferentes marcos o bibliotecas en la misma página que necesitan integrarse entre sí durante la ejecución del código del proyecto, debería echar un vistazo a single-spa. Aquí hay un video que brinda información básica sobre el proyecto. Aquí se pueden encontrar algunos ejemplos.
4. Cargador de módulos SystemJS
El cargador de módulos SystemJS no es un marco para el desarrollo de microfront-end, pero este proyecto resuelve el problema de la gestión de módulos independientes entre navegadores, que es la clave para implementar arquitecturas de microfront-end (este enfoque también se utiliza en spa único).
SystemJS puede considerarse como un orquestador de módulos JS. Le permite utilizar varias funciones de dichos módulos, como importaciones dinámicas y mapas de importación, sin depender de los mecanismos estándar del navegador. Y todo esto, con un nivel de rendimiento cercano al proporcionado por las capacidades integradas de los navegadores. Entre las características interesantes de SystemJS, podemos notar la presencia de polyfills para navegadores obsoletos, importar módulos usando nombres (haciendo coincidir los nombres de los módulos y las rutas a ellos), cargando varios módulos con una solicitud (usando la API para representar varios módulos como un solo archivo).
SystemJS también le permite trabajar con un "registro de módulos" para que el desarrollador pueda saber qué módulos están disponibles en el navegador en un momento dado. aquí Tutorial de introducción a SystemJS.
5. Marco Piral
El marco de Piral está diseñado para facilitar el desarrollo de aplicaciones de portal utilizando tecnologías de microfrente. Piral le permite crear aplicaciones front-end modulares que se pueden extender en tiempo de ejecución usando una arquitectura de microfront-end y usando módulos independientes llamados pilet. Los tickets se pueden desarrollar independientemente de otras partes del sistema, incluido el código y otros recursos necesarios. Aquí hay un video que demuestra cómo trabajar con Piral.
Si desea utilizar Piral, solo necesita tener un editor de código, terminal, navegador y Node.js. La instancia de Piral (envoltorio de la aplicación) y las pilas (módulos) se pueden ejecutar y depurar en el emulador en la máquina de desarrollo local.
Trabajando con Piral
6. Proyecto Open Components
El proyecto Open Components tiene como objetivo "llevar la tecnología sin servidor al mundo del front-end". Más precisamente, este proyecto fue creado como un marco para el desarrollo de microfront-end, que le brinda al desarrollador todo lo que necesita, creando un ecosistema que incluye herramientas para trabajar con componentes, un registro de componentes, plantillas e incluso una herramienta de línea de comandos. El proyecto Open Components tiene dos partes:
- components () — , , , , HTML, JavaScript CSS. , , - , Node.js- , . HTML-, -.
- consumers () — - (, -, , ), - -.
7. Qiankun
El proyecto Qiankun se describe como "una implementación de microinterfaz basada en un solo spa , pero lista para su uso en producción". Este proyecto tiene como objetivo resolver algunos de los problemas básicos asociados con el montaje de grandes aplicaciones a partir de pequeños subsistemas (sub-aplicaciones). Estas tareas incluyen publicar recursos estáticos, combinar subsistemas, garantizar la independencia de los subsistemas entre sí durante su desarrollo e implementación, garantizar el aislamiento del subsistema durante la ejecución del código, procesar dependencias y garantizar un alto rendimiento de las soluciones.
Proyecto Qiankun
8. Marco de Luigi
Luigi es un marco de JavaScript centrado en el negocio para el desarrollo de microinterfaces que le permite crear interfaces de usuario que utilizan componentes locales y externos. Luigi es un marco de desarrollo de aplicaciones web que es independiente de marcos y bibliotecas específicos. Este marco proporciona al desarrollador los medios para garantizar que las partes individuales que componen la aplicación funcionen juntas.
Luigi
El marco de Luigi consta de dos subsistemas. Esta es la aplicación principal y las bibliotecas de cliente. La interacción entre ellos se basa en la API postMessage.
Aquí hay una caja de arena en la que puedes experimentar con Luigi. Y aquí está el repositorio del proyecto. Por cierto, SAP está trabajando en ello.
9. Marco FrintJS
FrintJS es un "marco de JavaScript modular para desarrollar aplicaciones reactivas escalables". Le permite cargar aplicaciones creadas por varios paquetes, ayuda a estructurar sus aplicaciones y mantiene mecanismos como el enrutamiento y el manejo de dependencias funcionando correctamente. Este marco, además de React (el trabajo con esta biblioteca está bien documentado y probado), soporta, a través de paquetes adicionales, React Native y Vue.
FrintJS
→ Aquí está el sandbox interactivo FrintJS
10. Mosaico 9
Mosaic es un conjunto de servicios y bibliotecas unidos por especificaciones que definen cómo interactúan los componentes al organizar sitios web a gran escala creados con una arquitectura de microservicio. Mosaic utiliza los llamados "fragmentos", que son mantenidos por servicios separados y se combinan en tiempo de ejecución de acuerdo con el orden especificado en la plantilla.
Arquitectura de mosaico El
proyecto Mosaic está representado por una variedad de paquetes destinados a resolver varios problemas. Entre ellos: enrutamiento, formación de diseños de página, almacenamiento de plantillas, presentación de interfaces.
11. Framework PuzzleJS
PuzzleJS es un "marco de micro interfaz para desarrollar sitios web escalables y rápidos". Le permite crear proyectos llamados "puertas de enlace" e "interfaces" (escaparate) que se comunican entre sí. Los creadores de PuzzleJS se inspiraron, en términos de arquitectura de micro interfaz, en el proyecto Facebook BigPipe .
PuzzleJS
PuzzleJS le permite crear "portales" e "interfaces" independientes personalizando su interacción mediante un archivo de configuración. Le permite convertir plantillas HTML a funciones JavaScript en tiempo de compilación. Esta operación es independiente de las solicitudes de carga de datos. Como resultado, la función, en respuesta a una solicitud, comienza a transferir datos muy rápidamente, lo que mejora un indicador de rendimiento de las páginas web como el tiempo hasta el primer byte. Este marco, debido al uso de la representación del lado del servidor de los materiales que contiene, es bueno en términos de SEO. Además, si la API requerida para el funcionamiento de un determinado fragmento de la página deja de responder a las solicitudes, esto no interrumpe el trabajo de otros fragmentos. Aquí hay un ejemplo del mundo real usando PuzzleJS.
Salir
Otros marcos que se pueden utilizar para el desarrollo de micro interfaces incluyen Podium .
Como puede ver, si decide crear un proyecto basado en la arquitectura de microfrente, definitivamente tiene mucho para elegir.
¿Qué opinas de los microfrontes?
