Una app AngularJS legacy dentro de un host de microfrontends

Una aplicación legacy en AngularJS o jQuery puede vivir dentro de un host moderno como un microfrontend más. Los usuarios ven un solo producto, y el código viejo se retira pantalla por pantalla.

Por qué hacerlo

Una app legacy grande no se puede reemplazar en una sola publicación. Ponerla dentro de un host moderno te da un solo producto desde el primer día: un login, una navegación, un espacio de URLs. Las pantallas nuevas se construyen en el stack moderno. Las viejas siguen funcionando en el bundle legacy hasta que les llegue el turno.

Este enfoque combina bien con una migración híbrida dentro del área legacy, descrita en cómo migrar de AngularJS a Angular sin downtime.

Primero elige el nivel de aislamiento

La comparación está en iframes vs web components vs federation.

Montar y desmontar

Las apps AngularJS normalmente arrancan con el atributo ng-app cuando carga la página. Dentro de un host, la app debe arrancar cuando el usuario entra a una ruta legacy y detenerse cuando sale.

• Arranca de forma manual. Quita ng-app y llama a angular.bootstrap sobre un elemento que entrega el host.
• Expón una interfaz pequeña. Una función mount(element) y una función unmount(), o un custom element cuyos callbacks de conexión y desconexión hagan lo mismo. Si la plataforma usa single-spa, el helper single-spa-angularjs entrega esos ciclos de vida.
• Limpia al desmontar. Destruye el scope raíz, elimina el DOM y quita los listeners que la app agregó a window o document. AngularJS nunca fue diseñado para detenerse, así que espera fugas: timers, manejadores de eventos globales, plugins de jQuery ligados al body.

Prueba muchas veces el ciclo de entrar y salir del área legacy. La memoria que crece en cada visita es el síntoma típico.

Compartir la sesión

El host es dueño del login. La app legacy debe dejar de tener el suyo.

• Elimina la pantalla de login legacy y su lógica de redirección.
• Pasa la sesión por la interfaz de montaje o por una API pequeña del host: usuario actual, permisos y una forma de obtener un token válido.
• Agrega un interceptor de $http que le pida el token al host en cada petición, para que la renovación del token quede en un solo lugar.
• Ante una respuesta 401, llama a la función de cierre de sesión o de reautenticación del host. La app legacy no debe redirigir por su cuenta.

Los detalles están en autenticación compartida.

Traspaso de rutas

Ahora hay dos routers mirando la misma URL. Una regla los mantiene separados: el host es dueño del primer nivel de la ruta, y la app legacy es dueña de todo lo que está bajo un prefijo.

• Dale a la app legacy un prefijo como /legacy/ o el nombre de su área de negocio.
• Configura el router legacy (ngRoute o UI-Router) para que todas sus rutas vivan bajo ese prefijo. Revisa la ruta por defecto: una regla otherwise que redirige al inicio legacy va a secuestrar URLs que le pertenecen al host.
• Si la app legacy usa URLs con hash, mantener el hash dentro del prefijo es la forma más fácil de convivir. El modo HTML5 es más limpio, y necesita una ruta base correcta.

Más en rutas entre microfrontends.

Contener el CSS

Las hojas de estilo legacy suelen ser globales: una versión vieja de Bootstrap, resets, reglas sobre nombres de elementos. Van a cambiar el aspecto del host y de otros remotos.

• Carga la hoja de estilos legacy cuando el área legacy se monta y quítala cuando se desmonta.
• Cuidado con Shadow DOM. Muchos plugins de jQuery y librerías viejas consultan el documento directamente y se rompen dentro de un shadow root.

Carga diferida del bundle legacy

El bundle legacy suele ser grande y trae sus propias copias de jQuery y AngularJS. Los usuarios que nunca abren una pantalla legacy no deberían pagarlo.

Cárgalo bajo demanda. La ruta del host para el prefijo legacy inyecta los scripts, espera a que carguen y después llama a mount.

Retirarla pantalla por pantalla

1. Mantén una lista de rutas legacy con su uso. Borra las pantallas sin uso en vez de migrarlas.
2. Construye la pantalla de reemplazo en un remoto moderno.
3. Cambia la tabla de rutas del host para que la URL apunte a la pantalla nueva. Agrega una redirección si la URL cambia.
4. Elimina la ruta, el controlador y el template del bundle legacy.
5. Lleva la cuenta de las rutas legacy que quedan. Cuando llegue a cero, borra el bundle, el código de montaje y el prefijo.

Más en esta sección

• Equipos, límites de propiedad y ley de Conway
• El costo real de los microfrontends
• Errores comunes en microfrontends y cómo evitarlos
• Checklist de preparación para microfrontends