Hace unos días se publicó Ionic 3.0 y a muchos les entró el pánico…
¿qué? ¿CÓMO? ¿lo han vuelto a cambiar?

Conozco a más de uno que se quedó así…

 

Antes de que te vayas a por el Válium deja que te tranquilice…

Ionic 3.0 es la evolución de Ionic 2. ES CASI IDÉNTICO, pero trae grandes cambios a nivel de rendimiento.

IMPORTANTE: Una vez actualizas la CLI de Ionic (npm install -g ionic), si creas un nuevo proyecto con el flag --v2, en realidad lo estarás creando con la última versión disponible (en estos momentos, Ionic 3.0.1).

El dichoso SEMVER

De la misma manera que Angular ha adoptado Semantic Versioning (SEMVER), Ionic le ha seguido los pasos.

Así, si hace unas semanas te anunciaba que la actualización de Angular 2 se iba a llamar Angular 4… ahora le toca el turno a la actualización de Ionic (que justamente, usa Angular 4 como base).

Las reglas del Semantic Versioning son simples: si se introduce algún cambio que rompa la compatibilidad con la versión anterior, hay que cambiar el dígito de delante.

¿Y cuales son esos cambios NO compatibles?

Cambios NO compatibles

Módulos básicos no incluidos

Ionic 2 cargaba de forma implícita los módulos BrowserModule y HttpModule. En Ionic 3 ya no forman parte del módulo principal de Ionic, así que si los necesitas (95% de casos) tendrás que importarlos a mano.

Tan fácil como que vayas a tu archivo src/app/app.module.ts y añadas:

// src/app/app.module.ts

//...some stuff...
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

@NgModule({
    //...some stuff...
    imports: [
      BrowserModule,
      HttpModule,
      IonicModule.forRoot(MyApp)
    ],
    //...some stuff...
})
export class AppModule {}

Ionic Native 3

Si estas actualizando alguna aplicación que esté usando Ionic Native, ten en cuenta que Ionic 3 viene preparado para integrarse con Ionic Native 3 (de hecho, esto ya es así desde los últimos tiempos antes del cambio a Semantic Versioning).

En ese sentido, tendrás que repasar la documentación del plugin en cuestión para asegurarte de que funciona correctamente.

– – Fin de los cambios – –

Como ves, poca cosa que vaya a romper la compatibilidad con tus apps existentes en Ionic 2 o con los conocimientos que has ido adquiriendo hasta el momento.

Novedades

Eso si… No iban a armar tanto revuelo solo por cambiar 2 librerías de sitio. Ionic 3 viene con algunas novedades bajo el brazo:

  • Basado en Angular 4.0.0: No notarás cambios de sintaxis, pero la aplicación resultante ocupará menos y será más rápida, además de soportar TypeScript 2.2.

  • Lazy Loading: Ionic 3 soporta Lazy loading, es decir, permite retrasar la petición de los recursos necesarios de una vista (html, js, imágenes, etc) hasta el momento en que se navega a dicha vista. Para mi, esto tiene más sentido en web (con PWA, por ejemplo), que en app móvil (aunque permitiría reducir el tiempo de carga). Por lo que comentan, aún están puliendo esta funcionalidad.

  • Decorador IonicPage : Si querías usar rutas basadas en la URL, hasta ahora tenías que definir todas esas rutas en el módulo principal, como te expliqué en mi artículo sobre el DeepLinker.
    Ionic 3 permite definir los deep links directamente en el componente gracias al decorador IonicPage. Esto es muy beneficioso para aproximaciones como la del lazy loading que te he comentado antes.
    Funciona como te muestro en el ejemplo:

@IonicPage({
  name: 'my-about',
  segment: 'about-page'
})
@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage { }
OFERTA
Curso

Componentes Angular Nivel PRO

Domina los componentes de Angular (Angular 2/4/5+) como un experto y crea componentes técnicamente brillantes.
Idioma: Español
23 €110 €

– – Fin de las novedades – –

Como puedes ver, las nuevas features de Ionic 3 están completamente orientadas a mejorar el rendimiento de tu aplicación. Maximizar el rendimiento es fundamental en webs móviles y apps híbridas, así que es un buen movimiento en mi opinión.

Conclusiones

Suelo cerrar mis artículos con una serie de conclusiones, aunque en este caso no hay mucho que concluir. Son pequeñas mejoras que van a hacer aún más grande este framework para el desarrollo móvil, web y hasta de escritorio.

En todo caso, me parece interesante destacar la velocidad con la que se han adaptado a los movimientos de Angular, y la capacidad que tiene el equipo de Ionic para mejorar día a día su framework. Nunca dejan de sorprenderme.

¿Hacemos apuestas sobre cual será la próxima novedad de Ionic tras incorporar el sistema de lazy loading? Mi voto es para Angular Universal. ¿Y el tuyo?