Skip to content
Aprende Angular de forma rápida y efectiva  Ver curso

Ionic 2 RC, todo lo que necesitas saber

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:
ionic beta 11 vs ionic RC bootstrap comparison

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?

Published inAngular 2Ionic 2

16 Comments

  1. Ricardo Trejos Ricardo Trejos

    Hola Enrique vas a actualizar el curso de Udemy respecto a estas actualizaciones? Gracias.

    • Enrique Oriol Enrique Oriol

      Hola Ricardo,

      Sí, de hecho he añadido un mensaje en el panel de anuncios que lo explico. Tengo previsto tener todos los cambios subidos durante los próximos días.

      Saludos

  2. Pablo Ramos Pablo Ramos

    hola tenes idea de este error que me tira cuando trato de crear un app con ionic 2 RC

    C:\Users\phavl\Desktop\Cuentas\phavlo.com\Apps>ionic start –v2 myApp blank
    Creating Ionic app in folder C:\Users\phavl\Desktop\Cuentas\phavlo.com\Apps\myApp based on blank project
    Downloading: https://github.com/driftyco/ionic2-app-base/archive/master.zip
    [=============================] 100% 0.0s
    Downloading: https://github.com/driftyco/ionic2-starter-blank/archive/master.zip
    [=============================] 100% 0.0s
    Installing npm packages…
    Error with start undefined
    Error Initializing app: There was an error with the spawned command: npminstall
    There was an error with the spawned command: npminstall
    Caught exception:
    undefined

    Mind letting us know? https://github.com/driftyco/ionic-cli/issues

    Gracias.

    • Enrique Oriol Enrique Oriol

      Pues la verdad es que no, yo puedo crear proyectos basados en el template blank para Ionic2 RC0 sin problemas.

      ¿La tienes bien instalada (has desinstalado ionic antes de instalar la última versión)? Si no es eso, yo que tu reportaría el bug como te indican en el mensaje.

      ¡Saludos!

  3. Jose Vargas Jose Vargas

    Dede la actualización de ionic ya no puedo hacer debug en el inspector de chrom ya no encuentro ningún archivo relacionado a los pages. No se si toque hacer algo extra para poder hacer el debug ?

    • Enrique Oriol Enrique Oriol

      No es un bug, pero si un cambio bastante molesto que se debe a que han cambiado todo el proceso de build. Espero que lo cambien en la próxima actualización, sería lo más lógico para la etapa de desarrollo

  4. Jorge Fernandez Jorge Fernandez

    Enrique,

    Excelente post, uso ionic v2 desde el beta 8, y la verdad es espectacular, justo ahora estoy migrando las aplicaciones desde el beta 11 al RC0, y no entendía porque ya no me dejaba usar el local storage o el sql storage, gracias por la explicación.

  5. duvan ceron duvan ceron

    amigo, es necesario desinstalar ionic 1

    • Enrique Oriol Enrique Oriol

      Entiendo que te refieres a la CLI de Ionic. Para instalar la última versión es recomendable desinstalar todo lo que tengas de ionic, pero tranquilo por que con el CLI de ionic 2 se pueden crear y usar proyectos de ionic 1 igualmente (para indicar que el proyecto es de ionic 2, al generarlo se usa –v2)

  6. Buenos dias :
    Escribo desde Lima, hay uban problema con Ionic 2 . Este ejecuta bien con ionic serve,pero al construirlo con ionic build android tiene problemas y salta error ;;»»

  7. jonathan jonathan

    pegunta conrespecto al storage de ionic2 en ios?

    por que cuando utilizo el plugin de ios Storage me dice que no puede resolver los parametros de Storage
    que debo hacer por que en android si funciona bien

  8. Carmo Carmo

    Buenos tardes excelente post, estoy empezando con ionic 2 y veo que al lanzar la app en mi telefono android se demora en iniciar 10 segundos, hay alguna forma de que se demore menos?.

    De antemano gracias.

    Saludos cordiales.

    • Enrique Oriol Enrique Oriol

      Si estás utilizando la versión más reciente (que hace uso del compilador AOT) y compilas para producción, no debería tardar tanto (ni de broma) en cargar, pero claro, dependerá de lo que estés haciendo en la inicialización (por ejemplo que estés cargando datos de un servidor externo y esperes a tenerlos antes de mostrar nada)…

      • Carmo Carmo

        Tenias razón lo compile para producción agregandole la bandera –prod y el resultado fue el esperado, ya que la carga de inicio de la app bajo a 3 segundos.

        Muchas gracias

        Saludos Cordiales

Deja un comentario