Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Jun 28

10 trucos para migrar de Ionic 1 a Ionic 3

  • junio 28, 2018
  • Diego Pérez
  • Consejos tecnológicos, Desarrollo de aplicaciones, Tecnologías

ionic
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.

Index

  • 1 1. Guía oficial del equipo de Ionic.
  • 2 2. *ngFor y los iterables.
  • 3 3. Plugins de Apache Cordova envueltos por Ionic Native.
  • 4 4. Observables y Promesas.
  • 5 5. De módulos, controladores y servicios a componentes e inyectables.
  • 6 6. Filtros que se convierten en tuberías.
  • 7 7. Http interceptor.
  • 8 8. PWAs y responsive design.
  • 9 9. TypeScript.
  • 10 10. ¿Por donde empiezo?

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

Artículos Relacionados:

  • Depurando apps creadas con Ionic 3.xDepurando apps creadas con Ionic 3.x
  • El método científico aplicado al desarrollo de softwareEl método científico aplicado al desarrollo de software
  • brightbyte1_tribalyteNovedades de BrightByte v0.7
  • Entendiendo CSS (parte 1)Entendiendo CSS (parte 1)
  • Ionic 5 + React - Webinar gratuito - Desarrollo de app multiplataforma con Ionic y React - Tribalyte TechnologiesIonic 5 + React: aplicación práctica WEBINAR GRATUITO
  • Facebook
  • Twitter
  • LinkedIn
  • E-Mail

About The Author

Diego es ingeniero de software y cuenta con una gran experiencia en diferentes tipos de entornos. Actualmente su trabajo se centra en el desarrollo full stack, enfocándose en tecnologías híbridas. Le gusta explorar nuevos SDKs, frameworks y librerías, siempre buscando la mejor solución técnica para cada proyecto.

Related Posts

Comments are closed.

ELIGE UNA CATEGORÍA

  • Blockchain
  • Consejos tecnológicos
  • Desarrollo de aplicaciones
  • Desarrollo de software
  • Sistema embebido
  • Tecnologías
  • Uncategorized

Una compañía dedicada al desarrollo de apps, software y soluciones embebidas para empresas.

SOCIOS

Contacto

Glorieta de Quevedo 8 6º2
28015 Madrid (ESPAÑA)
Phone: +34 910 177 514 E-Mail: contact@tribalyte.com Web: www.tribalyte.com
Sello PYME INNOVADORA 21/01/2025
PYME INNOVADORA
Válido hasta el 21 de enero de 2025
escudo de MEIC 21/01/2025

AYUDA

  • Política de privacidad
  • Política de calidad
  • Política de seguridad
  • Términos de uso

CERTIFICACIONES

⠀⠀⠀⠀⠀⠀⠀⠀⠀

SUBVENCIONES

Tribalyte Technologies S.L. ha    conseguido la ayuda C007/20-ED de Red.es para el impulso y la promoción de actividades de I+i y para el fomento de la inversión empresarial para desarrollar el proyecto iPatia. Así mismo, valoramos muy positivamente la contribución del FEDER, principal fondo de la política de cohesión europea, por lo que supone de impulso a nuestro trabajo y en consecuencia al crecimiento económico y la creación de empleo de esta región y de España en su conjunto.
Esta página web utiliza cookies para mejorar su experiencia de usuario y para recabar estadísticas anónimas de uso. Aceptar Más información