Hace cuatro días se anunciaba la Release Candidate de Ionic 2 (Ionic 2 RC). Para el que no lo sepa, eso significa que la versión estable está a tiro de piedra. Antes de que te abalances sobre terminal, es imprescindible que dediques unos minutos a entender los cambios que implica a nivel estructural, para evitar que tus proyectos dejen de funcionar al actualizarlos.

Las cosas buenas: actualización a Angular 2 Final

Hace poco que Angular 2 pasó a estar en su versión estable (v2.0) y las betas anteriores de Ionic 2 aún nose habían actualizado. Esta nueva versión de Ionic 2 sí que la utiliza y puedo decir que es el avance más radical de esta actualización.

Usar Angular 2.0 es el avance más radical de la actualización de Ionic 2.

¿Por qué es tan importante usar Angular 2.0? Pues principalmente por que utiliza su nuevo compilador Ahead of Time (AoT).

AoT Compiler: aplicaciones más rápidas

Hasta ahora, los templates se compilaban por el navegador en tiempo de ejecución. Esto provocaba que la primera vez que se cargaba cada vista hubiera un cierto retraso. El compilador AoT se encarga de pre-compilar los templates en la fase de build, y genera un código realmente optimizado. El resultado es una agilización brutal tanto del tiempo de carga de la app, como de las transiciones entre vistas.

¿Quieres ver el cambio en el tiempo de carga? Ahí lo tienes:

Nuevo proceso de build

Aprovechando que Angular 2.0 está realmente optimizado, los chicos de Ionic se han replanteado su proceso de build para ver por donde mejorarlo. ¿El resultado? En lugar de Webpack para empaquetar tu código, han optado por Rollup.

Ionic 2 necesita una herramienta de build por que tu código (ya sea Angular 2 con TypeScript o ES6) tiene que traducirse a Javascript clásico (ES5) para que lo entiendan todos los navegadores. De paso, se aprovecha para juntarlo todo en un único archivo para agilizar la carga.

Las nuevas herramientas de build utilizadas conseguirán exportar un código más optimizado.

No voy a entrar a comparar ambas herramientas porque Rollup es más reciente y no la conozco tanto, pero por lo que parece, esto también se va a traducir en la generación de un código más optimizado.

Menos dependencias

Se ha eliminado la dependencia de Gulp y ahora todas las tareas del flujo de trabajo se realizan con scripts de NPM. Esto es transparente para ti, te da igual que el SaSS se compile con Gulp o npm, la única diferencia es que ahora al instalar ionic te ahorraras descargarte cantidad de dependencias.

Las cosas menos buenas

Cambios en la estructura de la app

Angular 2.0 añade el decorador @NgModule, que facilita la declaración de componentes, servicios y providers.

Este cambio que parece tan inocente cambia la inyección de dependencias y el mecanismo de bootstrap, lo que conlleva además cambios estructurales.

Los cambios principales son estos:

• Ahora todo lo que es dependencias e inicialización está centralizado el archivo src/app/app.module.ts.
  • Tienes que declarar tus componentes custom en la sección declarations
  • Tienes que declarar también los providers que necesitarás en la sección providers
  • Tienes que declarar todas tus páginas en la sección entryComponents
• El archivo app.ts se ha movido a src/app/app.component.ts.
  • Se ha eliminado la llamada a ionicBootstrap
• El directorio principal de código app se ha renombrado a src
  • www/index.html se ha movido a src/index.html y ha sufrido ligeras modificaciones
  • www/assets se ha movido a src/assets
  • Todos los recursos en www se han movido a src/assets/
  • Ahora los componentes importan sus templates con la URL relativa (¡por fín!)

Otros cambios de Ionic 2 RC

También hay otros cambios menores que ha hecho el equipo de Ionic 2 para favorecer el rendimiento de tu aplicación y que debes tener en cuenta:

• Los botones ahora necesitan el atributo ion-button para que se apliquen los estilos CSS de ionic.

• El nombre de selector de componente de una página, se usa también como selector CSS para identificar a esa página a la hora de aplicar estilos.

• El servicio Storage ahora se importa de un módulo aparte: @ionic/storage

• Ahora ya no hay LocalStorage ni otros servicios individuales. Se ha reemplazado todo por un Storage genérico que funciona como LocalStorage, pero está basado en LocalForage, es decir utiliza el mejor mecanismo disponible por la app de forma automática (LocalStorage, SQLStorage, …)

Proceso de migración

La estrategia que te recomiendo es la de crear un nuevo proyecto con la nueva versión y desde ahí importar el código a las carpetas apropiadas y haciendo las modificaciones que te he explicado en los puntos anteriores.

Si no quieres dejarte ningún detalle durante el proceso de migración, te recomiendo que repases la guía oficial de cambios.

¿Me esperan más cambios en el futuro?

El equipo de Ionic promete que no habrán más cambios.

Podrías recelar de esto, claro, pero lo cierto es que los cambios más radicales vienen de incorporar la versión estable de Angular 2 (que debería mantenerse sin cambios que rompan tu código durante bastante tiempo), y además se trata de una Release Candidate, es decir, la idea es convertir esta versión en la estable, con la única diferencia de que para la estable se habrán resuelto los bugs que se detecten en las próximas semanas.

La API de esta versión debería ser igual a la que se apruebe definitivamente como Ionic 2.0, ya que estamos hablando de una Release Candidate.

Es probable que de aquí a la versión definitiva se hagan cambios en los fuentes para resolver bugs, pero en principio, ahora sí que podemos hablar de la API definitiva de Ionic 2.

Ahora dime… ¿vas a usar ya Ionic 2 en tus desarrollos profesionales?¿O te esperas a que sea oficialmente estable?