single-spa

single-spa es un router open source en JavaScript para microfrontends que monta y desmonta aplicaciones independientes, incluso de frameworks distintos, según cambia la URL.

El núcleo de single-spa es un router pequeño. Registras aplicaciones y le indicas cuándo está activa cada una. Luego llama a sus funciones de ciclo de vida a medida que cambia la URL. Cada aplicación exporta tres funciones: bootstrap, mount y unmount. Paquetes de ayuda como single-spa-angular y single-spa-react generan estas funciones para cada framework.

El contrato consiste solo en esas funciones, así que single-spa puede ejecutar frameworks distintos en la misma página. Por eso es una opción frecuente en migraciones donde una aplicación AngularJS y una moderna tienen que convivir.

Ejemplo

import { registerApplication, start } from 'single-spa';

registerApplication({
  name: 'legacy',
  app: () => import('legacy-app'),
  activeWhen: ['/admin'],
});

registerApplication({
  name: 'reports',
  app: () => import('reports-app'),
  activeWhen: ['/reports'],
});

start();

Cuando el usuario pasa de /admin a /reports, single-spa desmonta la aplicación legacy y monta la nueva.

Confusión frecuente

single-spa coordina cuándo se montan las aplicaciones. No decide cómo se carga su código ni cómo se comparten las dependencias. Esa parte queda en manos de import maps, SystemJS o una herramienta de federación, y te toca elegir y configurar una.

Tampoco aísla las aplicaciones entre sí. El CSS global, las variables globales y varias copias de un framework pueden seguir chocando. Para una comparación con otras rutas de migración, revisa Reescribir, híbrido o microfrontends.

Términos relacionados

• Import maps
• Microfrontend
• Web components (custom elements)