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

Ionic 3 – Lo que debes saber

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?

Published inAngular 2ionicIonic 2Ionic 3

8 Comments

  1. Felicidades por el resumen y por el blog, te sigo a menudo y haces un gran trabajo… enhorabuena!!

    He visto que Angular ha incorporado recientemente Angular Universal como parte de su propia documentación y que será algo de «caja» de Angular para competir con frameworks empresariales como Spring; sin embargo, no acabo de verlo integrado en Ionic… Angular Universal trata de competir con Frameworks ejecutados en el servidor e Ionic, creo, que necesita ser una SPA para poder acceder a los recursos nativos y controlar desde el dispositivo móvil el router… quizás tendría algo más de sentido para generar PWAs, pero Ionic es, inicialmente, para generar aplicaciones hibridas… creo que concentrarán sus esfuerzos en otros aspectos basados en rendimiento y mejorar algunos plugins nativos…

    Mi apuesta adicional es por una alineación con nomenclatura de angular; quiero decir, creo que llamarán Ionic «a secas» (u otra identificación única) y al inicial basado en AngujarJS 1.X lo llamarán IonicV1 o algo así por todo lo que comentas del SEMVER… y así evitar confusiones…

    Un saludo!

    • Enrique Oriol Enrique Oriol

      ¡Gracias David!

      La alineación de nomenclatura con Angular no la tengo tan clara. Si que es probable que pase a ser «Ionic», pero han perdido una buena oportunidad al pasarlo a Ionic 3. Ionic 4 sí que hubiera quedado alineado con Angular 4.

      En cuanto a lo de las PWA, creo que Ionic las está considerando muy en serio, de ahí que me parezca natural la integración de Angular Universal. Si lo miras desde el punto de vista de negocio, verás que el coste de adquisición de usuarios en apps (ya sean nativas o híbridas, da igual, es la fricción de la appStore/googlePlay) es infinitamente más alto que el de web. De ahí que las PWA sean tan interesantes para «apps» que no tienen un budget potente detrás, o que no necesitan de las APIs nativas.

      ¡Un abrazo!

  2. Pues si, yo era de los que me habia quedado como Stewie. De hecho vi tu post por RSS hace tiempo y tenia miedo hasta de abrirlo: ojos que no leen, cambios que no existen 🙂

    • Enrique Oriol Enrique Oriol

      Jajajaja, si existen si XD

  3. Agustin Agustin

    Que manera hay de generar el proyecto pero en la version 2 de Ionic ?

    • No le veo mucho sentido. Es mejor actualizarse y seguir la evolución, aunque podrías hacerlo ya que es una aplicación node. Puedes ir a la documentación de Ionic (ChangeLog) y recuperar los paquetes necesarios para la versión 2 (marzo!!)

      https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#220-2017-03-08

      Limpia la cache, actualiza el package.json e instala… eso podría valer.

      Saludos.

  4. Me acabo de enterar que existe ionic 3 ^^ , buen post.
    Voy a hacer mi primera app en IONIC tengo miedo :S por ahora venia haciendo todo nativo

    • Enrique Oriol Enrique Oriol

      Pues Ionic 4 está a la vuelta de la esquina 😉

Deja un comentario