Índice de contenidos
Introducción
En este tutorial aprenderás que son los microfrontends y que beneficios nos aportan. Además veremos un caso práctico utilizando el framework single-spa, el cual nos aporta ciertas facilidades para desarrollar nuestra aplicación utilizando microfontends.
¿Qué son los microfrontends? 💭
La arquitectura de microfrontends es un enfoque de diseño de software en la que una aplicación frontend se descompone en «microaplicaciones» individuales, semi-independientes que trabajan juntas de manera flexible. El concepto de microfrontends esta inspirado en el famoso desarrollo por microservicios que es tan usado en la parte backend.
La arquitectura basada en microfrontends esta pensada para aplicaciones de gran tamaño, con diferentes áreas funcionales de negocio bien definidas. De modo que, aunque estas áreas interactúan entre sí y comparten la misma carcasa, cada una tiene su finalidad especifica.
Ventajas del uso de microfrontends ✅
El uso de microfrontends nos aporta una serie de beneficios a la hora de desarrollar nuestras aplicaciones, entre ellas podemos destacar:
- Posibilidad de ser desarrollada por diferentes equipos.
- Posibilidad del uso de diferentes frameworks, herramientas e incluso versiones.
- Autonomía del software.
- Mayor rendimiento.
- Agilidad a la hora de desarrollar y desplegar.
- Útil para migrar código legacy.
- Optimiza los recursos de la empresa.
Desventajas del uso de microfrontends ❌
- Alto coste arquitectónico.
- Complejidad.
- Sin una buena comunicación entre equipos/aplicaciones puede ser un caos.
- Compartición de información entre aplicaciones (estado, estilos, componentes…).
Arquitectura microfrontend 🏗️
Frontends monolíticos
Hasta ahora lo mas común a la hora de desarrollar aplicaciones es hacerlo mediante un frontend monolítico.
Organización vertical
Los microfrontends nos dan la posibilidad de desarrollar con una arquitectura más vertical.
Herramientas para el desarrollo con microfrontends 🛠️
A la hora de desarrollar microfrontends se puede optar por varias formas, algunas son:
- Mediante iframes
- Mediante Module Federation de Webpack
- Mediante frameworks como single-spa
Caso práctico 👨🏻💻
En este caso, vamos a realizar un caso simple en la que vamos a crear una aplicación root que dentro va a contener dos aplicaciones, una en React y otra en Angular. Vamos a hacerlo utilizando el framework single-spa que nos proporciona una serie de herramientas para facilitarnos el trabajo a la hora de trabajar con microfrontends. ¡Vamos a ello! 🚀
Lo primero que vamos a hacer es crear la aplicación root que va a contener las otras dos, para ello, ejecutamos el comando que nos proporciona single-spa.
Nos preguntará sobre algunas configuraciones iniciales. Para este caso le he dicho que utilice npm, TypeScript 💙 y le he dicho que quiero usar el Layout Engine, un API que proporciona single-spa para trabajar con el DOM, manejo de rutas y facilita el uso de SSR (Server Side Rendering).
Una vez creado el proyecto, vamos al archivo index.ejs. Por el momento vamos a destacar la parte donde le diremos a single-spa cuales son las dependencias compartidas por los distintos microfrontends. Por el momento solo tenemos single-spa como dependencia compartida.
Y por otro lado, donde le indicamos a single-spa cuales son los diferentes microfrontends que contiene la aplicación.
Como puedes ver por defecto ya existe una aplicación welcome que está siendo llamada dentro del microfrontend-layout.html.
Si levantamos el servidor y entramos a la ruta http://localhost:9000/ deberíamos ver algo así.
Ahora vamos a dejar limpio nuestro proyecto root para añadir nuestros microfrontends de React y Angular. Para ello, tendremos que eliminar las siguientes lineas de código.
En el index.ejs debemos eliminar el microfrontend de welcome, quedaría asi:
Y dentro del microfrontend-layout.html su referencia.
Una vez tenemos el proyecto root vacío, vamos a crear un microfrontend, esta vez con React.
Para ello utilizamos este comando:
Ahora, en el proyecto de React hacemos lo siguiente:
Añadimos el puerto dentro del package.json.
Modificamos el contenido del root.component.tsx y sus estilos.
Si levantamos el servidor nos encontraremos con algo así:
La URL que aparece es la que vamos a necesitar mas adelante para declarar el microfrontend dentro del index.ejs en el proyecto root.
Ahora en el proyecto root vamos a añadir el microfrontend que acabamos de hacer en React.
Lo primero que vamos a hacer es añadir tanto react como react-dom a la lista de dependencias compartidas en el index.ejs, nos quedaría así:
Ahora vamos a declarar el microfrontend.
Y por último lo añadimos al microfrontend-layout.html.
Y con esto ya tendríamos nuestro microfrontend de React funcionando! 🥳
Ahora vamos a hacer lo mismo pero esta vez utilizando Angular.
Para el caso de Angular ten en cuenta que single-spa solo cuenta cuenta con soporte para la versión 15 o anteriores, por lo que necesitarás el cli de Angular para la versión correspondiente. Ente caso yo lo voy a hacer con la versión 15 que es la última para la que single-spa tiene soporte.
Volvemos a utilizar este comando para crear el microfrontend:
Eliminamos todo lo relacionado con el entorno en el main.single-spa.ts, ya que para este caso, no vamos a tener diferentes entornos. El fichero nos quedaría así:
Ahora modificamos el contenido del app.component.ts y sus estilos.
Actualizamos las dependencias y levantamos el servidor.
Ahora vamos a tener que ir al proyecto root y el index.ejs veremos que hay algunas lineas comentadas de las cuales vamos a tener que descomentar la parte del script ya que Angular necesita ZoneJs para funcionar correctamente.
Una vez hecho esto, podemos añadir nuestro microfrontend igual que hemos hecho con el anterior. En los proyectos de Angular el archivo que contiene el código compilado se llama main.js y es este, al que haremos referencia.
Y… ¡magia!🪄🔮 Ya tenemos un proyecto de microfrontends compuesto por una aplicación en React y otra en Angular.
Conclusión 🧠
Como conclusión, los microfrontends me parecen una muy buena opción en aplicaciones de grandes dimensiones, en la que los diferentes candidatos a microfrontends no tienen un fuerte acoplamiento entre ellos. En mi opinión es muy importante analizar previamente nuestras aplicaciones y sus relaciones a la hora de decidir usar este tipo de arquitectura ya que incrementa el coste de desarrollo y la complejidad de este.
Muchas gracias por tu atención. 🙌🏻
