Aplicación híbrida (AngularJS + Angular)

Una aplicación híbrida ejecuta AngularJS y Angular juntos en la misma página, normalmente con ngUpgrade, para migrar el código pieza por pieza.

En una aplicación híbrida los dos frameworks se cargan y se inician en la misma página del navegador. Comparten un solo DOM. Los componentes Angular pueden aparecer dentro de templates AngularJS, los componentes AngularJS pueden aparecer dentro de templates Angular, y los servicios se pueden inyectar de un lado al otro. El paquete oficial @angular/upgrade, conocido como ngUpgrade, ofrece este puente.

El propósito del estado híbrido es seguir entregando. El equipo migra un componente o un servicio a la vez, y cada release tiene un poco menos de AngularJS que el anterior.

Ejemplo

Un CRM hecho en AngularJS necesita una nueva línea de tiempo del cliente. El equipo la escribe como componente Angular, la registra para usarla en AngularJS y la coloca en una vista AngularJS existente:

<div ng-controller="CustomerCtrl as vm">
  <h2>{{ vm.customer.name }}</h2>
  <customer-timeline [customer-id]="vm.customer.id"></customer-timeline>
</div>

El resto de la pantalla es AngularJS sin cambios. La línea de tiempo es Angular moderno.

Confusión frecuente

Una aplicación híbrida es un estado de transición, y tratarla como destino sale caro. Los usuarios descargan dos frameworks. Corren dos mecanismos de detección de cambios que deben mantenerse sincronizados, y eso afecta el rendimiento en pantallas con mucha actividad. Los desarrolladores tienen que conocer ambos frameworks y las reglas del puente. Define una fecha de término y mide cuánto AngularJS queda.

La ruta híbrida funciona mejor cuando un solo equipo es dueño de una aplicación mediana. En productos grandes con varios equipos, puede convenir más dividir por rutas en aplicaciones separadas. La comparación está en Reescribir, híbrido o microfrontends.

Términos relacionados

• ngUpgrade (UpgradeModule)
• Downgrade (downgradeComponent / downgradeInjectable)
• Patrón strangler fig (higuera estranguladora)
• Detección de cambios