Microfrontends con single-spa

0
204
single-spa microfrontends

Índice de contenidos

  1. Introducción
  2. ¿Qué son los microfrontends?
  3. Arquitectura microfrontend
  4. Caso práctico
  5. Conclusión

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.

Grafico frontends monolíticos

Organización vertical

Los microfrontends nos dan la posibilidad de desarrollar con una arquitectura más vertical.

Grafico microfrontends

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.

npx create-single-spa --moduleType root-config

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).

Requisitos consola

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.

dependencias compartidas index.ejs

Y por otro lado, donde le indicamos a single-spa cuales son los diferentes microfrontends que contiene la aplicación.

código declaración microfrontends index.ejs

Como puedes ver por defecto ya existe una aplicación welcome que está siendo llamada dentro del microfrontend-layout.html.

código microfrontend-layout.html

Si levantamos el servidor y entramos a la ruta http://localhost:9000/ deberíamos ver algo así.

npm run start

Vista página localhost:9000

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:

código index.ejs

Y dentro del microfrontend-layout.html su referencia.

microfrontend-layout.html

Una vez tenemos el proyecto root vacío, vamos a crear un microfrontend, esta vez con React.

Para ello utilizamos este comando:

npx create-single-spa --moduleType app-parcel

Ahora, en el proyecto de React hacemos lo siguiente:

Añadimos el puerto dentro del package.json.

código package.json

Modificamos el contenido del root.component.tsx y sus estilos.

código component react

código css

Si levantamos el servidor nos encontraremos con algo así:

npm run start

vista página localhost

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í:

código index.ejs

Ahora vamos a declarar el microfrontend.

código index.ejs

Y por último lo añadimos al microfrontend-layout.html.

código microfrontend-layout.html

Y con esto ya tendríamos nuestro microfrontend de React funcionando! 🥳

vista página localhost

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.

npm install -g @angular/cli@15.0.3

Volvemos a utilizar este comando para crear el microfrontend:

npx create-single-spa --moduleType app-parcel

consola

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í:

código main.single-spa.ts

Ahora modificamos el contenido del app.component.ts y sus estilos.

código app.component.ts

código app.component.scss

Actualizamos las dependencias y levantamos el servidor.

npm i

npm run serve:single-spa:angular-mf

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.

código index.ejs

código index.ejs descomentado

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.

código index.ejs

código microfrontend-layout.html

Y… ¡magia!🪄🔮 Ya tenemos un proyecto de microfrontends compuesto por una aplicación en React y otra en Angular.

vista localhost:9000

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. 🙌🏻

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad