Binary Coffee

Mi experiencia con microfrontend y single-spa

angular react vue

Microfrontend es un concepto relativamente nuevo en el que se trata de incorporar la arquitectura de microservicios al frontend, o algo parecido. La idea es tener una serie de aplicaciones independientes, distintos repos, que puedan coexistir en una SPA controladas por una aplicaci贸n "root".

En esta aplicaci贸n root, creada mediante librer铆as como Single-SPA por poner un ejemplo, es donde vamos a importar todas las partes que conformar谩n nuestra web final. Tambi茅n definiremos el manejo de rutas, estilos globales, layout, entre otras cosas.

Llevando lo anterior a un ejemplo, imagina una web cl谩sica con header, main, footer y alg煤n aside. Esta p谩gina podr铆amos dividirla en varias aplicaciones peque帽as que pueden convivir independientemente. Incluso crearlas con diferentes tecnolog铆as: React, Angular, Vue, Svelte.

El ejemplo anterior no es el m谩s claro sobre cuando usar este paradigma, sino que cada quien puede elegirlo o no. Por lo general las webs monol铆ticas crecen demasiado, y en ocasiones se vuelve un problema tanto para nuevos integrantes en el team como para la escalabilidad.

Un poco de Single-SPA

S铆, su nombre es un poco redundante, hasta ellos lo admiten 馃槄. Como algo reciente, los aportes de la comunidad son pocos, pero est谩n compensados con una excelente documentaci贸n. Ahora vamos a crear un peque帽o proyecto de ejemplo.

Creamos el root, una vez creado ejecutamos start y navegamos hasta http://localhost:9000/.

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

Ahora creamos nuestras aplicaciones, durante la creaci贸n de cada app vamos a poder elegir el framework con el que queremos trabajar. Luego levantamos la app con start.

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

Una vez hecho esto debemos cambiar en nuestro root de single-spa el archivo index.ejs, para importar nuestra aplicaci贸n, podemos simplemente cambiar el que viene por defecto @single-spa/welcome.

馃帀 Una vez hecho esto tendr谩s el resultado corriendo en tu navegador.

Beneficios de microfrontend

  • Mejoras incrementales.
  • Bases de c贸digo simples y desacopladas.
  • Despliegue independiente.
  • Equipos aut贸nomos.
  • Enfoques de integraci贸n.
  • Tu equipo puede usar los frameworks que deseen.

Cada d铆a esta pr谩ctica va tomando fuerza. Hasta el punto que existen grandes compa帽铆as us谩ndola como por ejemplo Namecheap y Atlassian. Su poder es tremendo y b谩sicamente te permite unir varias apps en una plataforma SaaS. Te recomiendo que le des una ojeada.

馃搵 Documentaci贸n

Opiniones