Migrar de angular 1 a angular 2

Ya estamos en la era de Angular2, vemos como nos inundan con tutoriales, videos que nos explican todo lo que ha incorpado, etc.

Pero en muchos casos vivimos en medio de aplicaciones armadas en 1.x que tenemos que seguir manteniendo, o en muchos casos, seguir codificando.

Que se acepte el cambio

Dejando de lado la vision tecnica de los “porque” deberiamos cambiar a Angular2 , lista que llevaria a un debate entre todas las distintas nuevas tecnologias, podemos presentar el problema que entiendo es mas importante, como lograr que acepten -quien sea que deba aceptar- que el horizonte es migrar a la version 2 de este framework.

Cuando me consultan al respecto de todo el ecositema de frameworks Javascript en el scope de Angular siempre termino respondiendo lo mismo:

Todos los frameworks hacen mas o menos lo mismo, ninguno tiene soluciones magicas y todos van a lograr mas o menos el mismo resultado.

Quien diga lo contrario e intente decir que un framework es la bala de plata, es un fanatico. La mejor recomendacion es alejarse de esas personas, nunca van a llevar una desarrollo a buen puerto si las primeras elecciones parten de fanatismos.

El avance de un framework presenta nuevas formas, mas economicas, de resolver los problemas anteriorment resueltos y de resolver los nuevos que se van descubriendo al combinar nuevas herramientas.

Quien acepta no sabe de que esta hablando

Es mas comun de lo esperado encontrarnos que quien debe tomar la decision de un cambio o actualizacion de una herramienta no tiene el conocimiento necesario para tomar la decision, esto es porque no tiene la habilidad tecnica o porque desconoce que es lo “nuevo” en la herramienta a actualizar.

Este caso presenta un problema, se termina peleando con molinos de viento.

Parte de la preparacion para el cambio puede hacerse de todas maneras, y esperar que el tiempo y el ruido generado por la nueva version presente desde el exterior las ventajas por si solas.

Preparaciones

Lo primero que hay que hacer en una aplicacion angular 1.x para una migracion es organizar el codigo con ciertas reglas.

Angular 1.5 presenta el ‘component’ que nos deja encapsula un controller, una vista, bindings para contener una funcionalidad. Una ventaja importante de estos components es que tiene un scope aislado, es decir, todo lo que hagamos dentro del componente no afecta al exterior de este.

Una forma economica de hacer un refactoring y llevar la aplicacion a Angular2 es ir por “vitas”, o secciones o en la forma que este organizada la aplicacion e intentar reescribir todo como pomponentes y un container o page que los agrupe para presentarlos dentro de la aplicacion.

Angular2 presenta todo como componentes, siendo que una vista por ejemplo, seria un componente con varios otros componentes dentro.

The Upgrade Adapter

El equipo de Angular armo un adaptador que permite conectar una aplicacion angular1 y una aplicacion 2 juntas.

Esta convivencia tiene una restriccion importante, debemos seguir usando el router de la aplicacion angula1, esto seria, tener un container en angular1 con elementos de las dos aplicaciones o solo de la aplicacion angular2 (ya que un componente en Angular2 es, ni mas ni menos, un elemento html).

El adaptador permite comunicar los servicios de Angular1 con la componentes en Angular2.

Los filtros que tengamos escritos en Angular1 deben ser reescritos para Angular2, este cambio se produce porque Angular2 tiene el concepto de Pipes, que es diferente a como se piensa un filtro en Angular1.


Esto es solo una introduccion al tema, si algo debe quedar en claro es:

Refactoriza usando ‘component’ de Angular 1.5.x, ese es el primero paso para migrar

En los proximos posts voy a ir armando una app en angular1, angular2, haciendo convivir algunas partes y sus respectivas versiones 1.x y 2.x para mostrar las ventajas.

Por ultimo decir que no va a ser una app de TODOs, que nunca muestran los problemas reales y que ya sobran ejemplos de ese tipo de app.