10 trucos para migrar de Ionic 1 a Ionic 3

La migración de una aplicación desarrollada en Ionic Framework versión 1 a la versión 3 puede ser complicada dependiendo de la complejidad de la misma. Desde nuestra experiencia queremos exponer unos pocos trucos y consejos que pueden hacer el proceso un poco más fácil.

1. Guía oficial del equipo de Ionic.

El primer paso que se debe hacer es leer la guía oficial de migración a Ionic 2 y la página oficial del equipo de Ionic para migrar desde Ionic 1. Después de esto, es interesante leer este post de Ionic sobre la migración de 2 a 3.
Habiendo leído la información de ambos enlaces ya tendremos una idea global de los cambios que hay entre ambas versiones y podremos empezar la migración.

2. *ngFor y los iterables.

A partir de la versión 2 de Angular, la directiva «*ngFor» (antes «ng-repeat»), sólo puede recorrer objetos iterables (ej: arrays).
Es posible que en tu proyecto basado en Ionic 1 uses mapas de objetos con diferentes propiedades.
Generalmente este problema se puede atacar de 2 formas:
Convertir las estructuras en arrays para acceder desde la vista, lo que puede resultar bastante problemático dependiendo de la complejidad del proyecto, ya que es posible que esas estructuras se usen en diferentes áreas de la aplicación.
Crear una nueva directiva que pueda recorrer tus actuales estructuras. En nuestro caso ha sido de gran utilidad crear la directiva “*ngForIn” para recorrer estas estructuras. Aquí tenéis un ejemplo para que podáis verlo.

3. Plugins de Apache Cordova envueltos por Ionic Native.

Desde Ionic 2+ se han creado unos recubrimientos para los plugins de Cordova llamados Ionic Native, podéis consultar los soportados en esta lista. Recordad que no son más que recubrimientos Typescript de los correspondientes plugins de Cordova y que detrás de cada uno suele haber un autor y un mantenimiento que la mayoría de veces no tiene nada que ver con Ionic, por lo que es conveniente antes de usar un plugin, ir a la página oficial del mismo, comprobar si es compatible con la versión actual de nuestras dependencias (ej: Angular) y ver si se adapta a nuestro uso.

4. Observables y Promesas.

Una de las principales diferencias entre AngularJS que acompañaba a Ionic 1, y Angular 2+ es la inclusión y el uso de Observables.

Mientras que una Promesa se utilizaba en Ionic 1 como una llamada asíncrona para obtener un valor. Ahora en Ionic v2+ encontramos Observables (las Promesas siguen estando soportadas) que son objetos que guardan un valor y que emiten un evento a todos sus suscriptores cada vez que ese valor se actualiza. Podéis consultar este enlace para saber más del funcionamiento de los Observables.

Un caso importante de esta transición es el caso del cliente HTTP, mientras que $http de Ionic v1 (el cual viene con AngularJS) devuelve Promesas, el HttpClient de Ionic v2+ (de Angular 2+) devuelve Observables.

5. De módulos, controladores y servicios a componentes e inyectables.

Mientras que en Ionic 1 se utiliza la API de «angular.module», en Ionic v2+ se usan decoradores para definir el funcionamiento de cada clase. Debemos convertir cada sección de nuestra página de Ionic 1 en un componente o varios. A su vez la mayoría de componentes delegan tareas en servicios inyectables o proveedores que comparten lógica entre ellos.
@Component: define un componente, que puede tener asociado un selector, una vista y un estilo.

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
}

@Injectable Se usa para crear un servicio o un proveedor que será incluido mediante inyección de dependencias en el constructor de componentes u otros elementos.

6. Filtros que se convierten en tuberías.

En Ionic v2+ se abandona el uso de filtros en favor de tuberías, que pueden ser usadas tanto en la vista como en la lógica de un componente. Las tuberías se usan con el decorador @Pipe

Un caso específico es el filtro Date que ahora es DatePipe en Angular 2.

7. Http interceptor.

Puede que tu proyecto Ionic 1 use algún interceptor http para hacer modificaciones en las peticiones http como gestionar tokens o modificar cabeceras. Cuando salió Ionic 2 con Angular 2 estos interceptores dejaron de estar disponibles, recientemente a partir de Angular 4 se han vuelto a incluir. Esto puede llevar a algo de confusión a la hora de investigar sobre su implementación, pero ahora es perfectamente posible. Aquí puedes consultar la documentación oficial.

8. PWAs y responsive design.

Ionic 3 soporta la plataforma «browser» a través de Cordova, y con ello es posible la construcción de aplicaciones web progresivas, o «Progressive Web Apps» (PWAs).
En el caso de querer que nuestra aplicación tenga una apariencia diferente cuando se ejecuta en un navegador de ordenador a cuando la visualizamos en forma de aplicación en un dispositivo móvil, podemos utilizar técnicas como obtener del servicio «platform» la información del dispositivo y diferenciar en la vista mediante “*ngIf” o “ng-template”, además de hacer uso del nuevo grid responsive de Ionic que puede variar el tamaño de las celdas dependiendo del tamaño de pantalla.

9. TypeScript.

La mayoría de aplicaciones creadas en Ionic 1 usan JavaScript. Antes era posible usar TypeScript con un poco de configuración adicional, pero a partir de Ionic 2, TypeScript es el lenguaje principal. Gracias a él tenemos disponibles decoradores, tipado, interfaces y modificadores de acceso entre otras muchas cosas.

10. ¿Por donde empiezo?

Hay varias técnicas para comenzar la migración de una aplicación Ionic de v1 a v3, que variarán dependiendo de la complejidad del proyecto. Nosotros aconsejamos empezar creando un proyecto nuevo paralelo vacío para la nueva versión e ir migrando componente por componente y sus dependencias manteniendo cada uno de estos lo más independiente posible. El concepto es similar al explicado en esta entrada sobre una técnica de migración de Ionic 3 a 4.

Estos son nuestros 10 trucos o consejos para realizar una mejor migración de Ionic 1 a Ionic 3, si tienes dudas o si quieres que hablemos de algún tema determinado no dudes en escribirnos a blog@tribalyte.com