La investigación corre a cargo de Marielle
La velocidad es el latido del mundo digital y hace que las expectativas de los usuarios sean más altas que nunca.
Ahí es donde los micro frontales vienen al rescate: un enfoque moderno y ágil del desarrollo de frontales que promete revolucionar la forma de crear aplicaciones web.
En este blog nos adentraremos en los micro frontends. Exploraremos por qué han ganado popularidad, cuándo usarlos y cómo integrarlos a la perfección en tus proyectos.
Sumerjámonos.
¿Qué son los Micro Frontends?
Los microservicios son un enfoque de arquitectura popular utilizado para crear aplicaciones distribuidas. Suponen dividir el backend en servicios separados, garantizando un funcionamiento sin fisuras y evitando cuellos de botella. Y los micro frontends extienden este concepto al mundo del frontend, permitiendo un desarrollo modular y escalable.
Imagínese esto: una aplicación web perfectamente dividida en módulos, cada uno con sus propias funciones, implementadas de forma independiente. Este es el reino de la arquitectura de micro frontales, que ofrece a los equipos de frontales la misma agilidad y velocidad que los microservicios ofrecen a los equipos de backend.
¿Cuál es el objetivo? Liberar a los equipos de trabajo de la dependencia, acelerar el desarrollo y simplificar la complejidad de los productos digitales.
Arquitectura monolítica frente a arquitectura micro Frontend
Cuando se ponen lado a lado la arquitectura monolítica y la arquitectura micro frontend, queda claro que son dos enfoques fundamentalmente diferentes para construir aplicaciones web.
Profundicemos en la comparación entre estos dos estilos arquitectónicos:
Frontales monolíticos
La imagen siguiente muestra las diferentes arquitecturas con frontales monolíticos:
El Monolith cuenta con un único equipo que se encarga de todo, desde crear y mantener la aplicación completa hasta compartir bases de datos, backend y frontend.
El front y el back dividen la aplicación monolítica en dos, dividiendo también el equipo de trabajo para poseer su backend o frontend monolítico.
Con los microservicios, la arquitectura de backend ha evolucionado hacia una configuración más escalable. Esto hace que cada microservicio pertenezca a equipos diferentes, haciendo las cosas más eficientes y flexibles.
Aunque el usuario no note la división del backend, las cosas pueden complicarse cuando se intenta integrar los microservicios en el frontend monolítico. Es entonces cuando entra en juego el cuello de botella de la aplicación, causando algunos problemas. Es como tener las desventajas de un sistema monolítico, tales como:
- Demasiado grande y complejo para que cualquiera pueda entenderlo y hacer cambios rápida y correctamente.
- Un cambio en el código del frontend podría afectar a todo el sitio web.
- Cualquier modificación en el código del frontend debe volver a implementarse, lo que aumenta el tiempo de compilación.
Micro frontales
La organización vertical divide la aplicación en pequeñas funciones independientes, cada una implementada simultáneamente, desde el backend hasta el frontend, por un equipo de trabajo.
La razón por la que este enfoque ha ganado popularidad es debido a los problemas con el enfoque monolítico. Verás, el frontend ha estado creciendo a un ritmo rápido, y con una arquitectura monolítica, se hace más difícil mantener las cosas en orden.
Los micro frontends ofrecen la misma escalabilidad, flexibilidad y adaptabilidad que la arquitectura de microservicios backend. Además, hacen que la aplicación sea menos engorrosa y más fácil de usar. ¿Y lo mejor? Cada micro frontend puede desarrollarse con diferentes frameworks.
Las ideas centrales de un micro frontend son las siguientes:
- Fomentar la independencia tecnológica - Los equipos de trabajo tienen libertad para elegir su pila tecnológica preferida, lo que les permite optimizar los flujos de trabajo e impulsar la innovación sin limitaciones.
- Código de solicitud independiente para cada equipo - No existen variables globales o de tiempo de ejecución compartidas entre distintos equipos de trabajo que utilicen el mismo marco, lo que garantiza estados de aplicación independientes y elimina los estados compartidos.
- Diseño web resistente - Para garantizar una usabilidad óptima, las funciones de las aplicaciones deben diseñarse con cuidado. El empleo de metodologías como "Universal Rendering" y "Progressive Enhancement" puede mejorar notablemente el rendimiento.
En comparación, la arquitectura micro frontend destaca claramente como un enfoque más eficiente y racionalizado para las aplicaciones web contemporáneas. Esta arquitectura ayuda a salvar la desconexión entre los microservicios del backend y el desarrollo del frontend, incorporando prácticas de desarrollo ágiles y escalables.
10 ventajas de Micro Frontend Framework
Construir una aplicación web moderna con micro frontends no sólo es tecnológicamente eficiente, sino también beneficioso desde el punto de vista organizativo. ¡Ofrece varias ventajas que ayudarán a tu equipo!
He aquí diez ventajas de implantar microfronteras:
1. Aplicaciones independientes
Con las microarquitecturas frontales, las funciones de una aplicación monolítica se separan en distintas subaplicaciones. En esencia, se descompone una gran tarea en partes más pequeñas y manejables. Estas sub-aplicaciones son implementadas independientemente por diferentes equipos de trabajo en lugar de intentar implementar todas las funciones a la vez.
2. Mayor rendimiento
En una aplicación monolítica, siempre hay que cargar toda la aplicación, aunque no se utilicen todas sus partes, lo que hace que su tiempo de carga inicial sea elevado. Con la arquitectura micro frontend, un módulo específico de la aplicación se carga bajo demanda, lo que reduce el tiempo de carga inicial.
3. Implantación y despliegue más rápidos
Implementar componentes web de forma independiente realmente acelera el desarrollo. No tienes que ejecutar toda la aplicación sólo para hacer una corrección o añadir algo a una sola función.
En comparación con tener un software monolítico enorme, construir micro frontends es mucho más rápido y fácil que construir software monolítico gigante, lo que representa un gran paso en el lanzamiento de nuevas funcionalidades. Como consecuencia, el tiempo de implementación mejora notablemente.
4. Fiabilidad
Los micro frontends funcionan garantizando que, si falla un módulo, los demás puedan seguir funcionando sin problemas. Esto es especialmente importante en aplicaciones de gran tamaño con múltiples funciones independientes.
5. Ampliación a varios equipos
A diferencia de un frontend monolítico tradicional, los micro frontends ofrecen la flexibilidad necesaria para que varios equipos trabajen de forma independiente en distintas piezas de software. Básicamente, tienes equipos independientes que aportan su propia experiencia y toman decisiones sobre arquitectura, estilo de codificación y pruebas en función de sus tareas específicas. Esto permite a todos expresarse y contribuir al proyecto de la mejor manera posible.
6. Adopción de diferentes pilas tecnológicas
Los micro frontends pueden utilizar diferentes pilas tecnológicas, lo que ofrece flexibilidad y personalización. Son piezas de software autónomas que mejoran la escalabilidad al permitir un desarrollo y despliegue independientes. Esto favorece un desarrollo y mantenimiento eficientes, permitiendo a los equipos trabajar en funcionalidades específicas sin interferencias.
7. Aplicaciones web fáciles de mantener
El mantenimiento de grandes aplicaciones monolíticas puede llevar mucho tiempo a los desarrolladores. Sin embargo, el enfoque micro frontend permite que cada equipo asuma la responsabilidad de mantener sus funciones de desarrollo. Trabajar con piezas de software más pequeñas facilita la comprensión y el mantenimiento de cada funcionalidad cuando es necesario.
8. Actualizaciones continuas
Las actualizaciones continuas son la clave. ¿Por qué? Los micro frontends benefician los plazos del proyecto al dividir un frontend monolítico en componentes más pequeños. Esto hace que sea muy fácil actualizar cada proceso de negocio, lo que resulta en una mejor experiencia del cliente con actualizaciones iterativas más frecuentes.
9. Código más pequeño y manejable
Los micro frontends ofrecen una base de código racionalizada y manejable en comparación con los frontends monolíticos. Esta precisión reduce las posibilidades de error y permite un desarrollo más rápido con menos esfuerzo. Especialmente valioso para aplicaciones con flujos de trabajo complejos.
10. Reutilización de funciones
Los micro frontends ofrecen ventajas significativas en el desarrollo de múltiples aplicaciones con requisitos de flujo de trabajo compartidos. Aprovechando los micro frontends, las empresas pueden racionalizar la funcionalidad en todas las aplicaciones, ahorrando tiempo y esfuerzo en el desarrollo. Por ejemplo, una empresa puede utilizar la misma función de procesamiento de pagos en varios sitios, eliminando la necesidad de recrearla para cada aplicación.
¿Cuándo utilizar microfrentes?
Los micro frontends son ideales para grandes aplicaciones con múltiples funciones. Si se prevén problemas de escalabilidad, debe emplearse la arquitectura de micro frontales.
El enfoque recomendado es dividir la aplicación en conjuntos aislados de funciones y pantallas, de forma similar a un teléfono móvil con diferentes aplicaciones y funciones.
Por ejemplo, hay una aplicación de marcación para hacer llamadas, otra de contactos para almacenar números de teléfono y otra de mensajería para enviar mensajes.
Aunque estas aplicaciones interactúan entre sí, cada una sirve a un propósito específico, razón por la cual se implementan como aplicaciones independientes.
Así que, si quieres implementar micro frontends, ten en cuenta el tamaño y el alcance de tu aplicación. Si es masiva y tiene muchas funcionalidades, ¡los micro frontends son el camino a seguir!
Proceso de desarrollo de un micro frontend para una aplicación sencilla
¿Cómo se integra exactamente la arquitectura micro frontend en una aplicación sencilla? No se preocupe.
Hemos implementado una aplicación sencilla que aprovecha el uso de Webpack 5 Angular y comparte el estado autenticado a través de la aplicación. Hemos hecho uso de la arquitectura de micro frontend que consiste en unas pocas aplicaciones hijo, que es el perfil del usuario actualmente logueado y la cesta. Tenemos un shell/contenedor que consume todas las aplicaciones hijas. Además, mantener todos los paquetes en el mismo repositorio. Por lo tanto, estamos usando un monorepo aquí.
La aplicación shell/contenedor y cada aplicación secundaria se despliegan y sirven de forma independiente. La aplicación contenedora realizará peticiones HTTP en tiempo de ejecución para obtener el JavaScript necesario para renderizar cada aplicación secundaria cuando sea necesario.
Concha/Contenedor
Niño 1
Niño 2
Autorización compartida
Al pasar a una arquitectura de micro frontales, en la que cada uno de los frontales es su propia aplicación, no existe un estado compartido que pueda utilizarse para almacenar tokens de autenticación una vez que el usuario ha iniciado sesión en la primera aplicación.
Esto puede solucionarse utilizando el protocolo Open ID Connect. Cada vez que necesite iniciar sesión en una aplicación utilizando OIDC, se le redirigirá a su sitio OpenID, donde iniciará sesión y luego volverá a su aplicación con un token de acceso y un token de identidad.
Dependencia de los datos
El plugin Webpack Module Federation permite compartir dependencias comunes dentro de microaplicaciones:
- Cuando añades librerías al micro-frontend host, necesitas añadirlas también a las remotas que consumen las dependencias.
Las bibliotecas de componentes compartidos contienen el código y el estado de la aplicación que queremos compartir en todo el sitio:
- Al igual que el código de la funcionalidad de la cesta reside en la biblioteca compartida, por lo que depende de los productos que se seleccionan en la aplicación shell/contenedor.
Listo para la producción
Carga dinámica de micromandos frontales
El host carga los micro frontends al inicializar el host, no al cambiar de ruta.
Con el método loadRemoteModule() de la librería @angular-architects/module-federation, podemos cargar dinámicamente los remotos del micro-frontend al cambiar de ruta con unos pocos cambios rápidos.
Despliegue mediante Vercel
La idea detrás de los micro frontends es poder desplegar cada aplicación de forma independiente. Podemos hacer esto en Vercel creando un proyecto separado para cada aplicación. Vercel limita el número de proyectos para un único repositorio a tres en el plan gratuito.
Actualizar las rutas para admitir rutas de micro frontend a producción
Necesitamos actualizar la definición de la ruta para incluir el URI de la aplicación desplegada.
Utilizaremos la configuración de entornos construida para soportar tanto entornos locales como desplegados y definiremos una configuración para servir localmente frente a la compilación de producción.
Añadir URL de despliegue a Okta
Deberá actualizar la aplicación Okta con la nueva ubicación de despliegue para poder iniciar sesión.
API
A estas alturas, ya deberías poder utilizar el sitio desplegado.
Conclusión
Los microfrentes pueden aportar muchas ventajas a los proyectos de desarrollo web a gran escala basados en microservicios. Permite a los desarrolladores dividir toda la solución en componentes independientes. Esto se traduce en una serie de ventajas, como un despliegue de funciones más rápido, pruebas simplificadas de módulos individuales, adopción de diferentes pilas tecnológicas y actualizaciones más fluidas.
Sin embargo, los micro frontends también presentan algunos inconvenientes. Probar una aplicación en su conjunto puede resultar complicado. Además, los proyectos de micro frontales son bastante costosos, ya que requieren un gran equipo de desarrolladores y gestores.
Por lo tanto, antes de tomar una decisión para su empresa, debe tener en cuenta todos los aspectos.
¿Necesita servicios de desarrollo frontend?
Aprovechar el enfoque arquitectónico adecuado puede marcar una diferencia significativa en el éxito de su aplicación web. Tanto si estás empezando un nuevo proyecto como si estás renovando tu frontend actual, explorar el mundo de la arquitectura de micro frontend podría ser el cambio que estabas buscando.
En StarTechUP, nos apasionan los límites del desarrollo front-end. Nos especializamos en servicios de vanguardia, con un enfoque en la arquitectura de micro frontends.
Nuestro desarrolladores experimentados están aquí para ayudarle a liberar todo el potencial de los micro frontends, ofreciendo una escalabilidad mejorada, ciclos de desarrollo acelerados y una colaboración fluida entre equipos.
Póngase en contacto con nosotros y hablemos de cómo adaptar las distintas tecnologías a sus necesidades y objetivos específicos.
