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
- Tienes que declarar tus componentes custom en la sección
- 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
appse ha renombrado asrcwww/index.htmlse ha movido asrc/index.htmly ha sufrido ligeras modificacioneswww/assetsse ha movido asrc/assets- Todos los recursos en
wwwse han movido asrc/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-buttonpara 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
Storageahora 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.
Hola Enrique vas a actualizar el curso de Udemy respecto a estas actualizaciones? Gracias.
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
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.
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!
Parece ser que a muchos les pasó lo mismo. Encontré la solución para mi.
https://github.com/driftyco/ionic-cli/issues/1445#issuecomment-250895771
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 ?
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
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.
amigo, es necesario desinstalar ionic 1
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)
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 ;;»»
Están haciendo muchos cambios en el proceso de build de cara a preparar la versión estable. Igual tienes que actualizarte el paquete @ionic/app-scripts, como se explica aquí: http://blog.ionic.io/improvements-to-ionic-build-process/
Un abrazo
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
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.
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)…
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