Este 5 de Agosto se anunciaba la beta 11 de Ionic 2, que nos acerca cada vez más a una Release Candidate de Ionic 2, sólo a falta de completarse la beta 12.

¿Donde estamos actualmente?

Si miras el post que han hecho al respecto, verás que la beta 12, estará principalmente centrada en optimizar el conjunto del framework, como por ejemplo:

• Optimizaciones en tiempo de ejecución
• Mejor soporte de URLs
• Mejoras del proceso de build

Esto significa que no se esperan grandes cambios a nivel de SDK, con lo que podemos tomar por bastante definitivos todos los componentes y la API que se detallan en la documentación de Ionic 2.

Nada ha cambiado

Cuando en el título digo que nada ha cambiado es por que, si te miras los templates de una aplicación en Ionic 2, -más allá de que los bindings sigan la estructura de Angular 2- ¡¡vas a encontrar muy poca diferencia con respecto a Ionic 1!!

La mayoría de componentes de ionic 2 utilizan nombres de selectores idénticos a las directivas equivalentes de ionic 1, así que tu curva de aprendizaje (por el lado de los templates) va a ser muy muy sencilla.

¿No me crees?

¡Fíjate en el template contact.html de la aplicación por defecto del starter de ionic 2!

<ion-header>
  <ion-navbar>
    <ion-title>
      Contact
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-list-header>Follow us on Twitter</ion-list-header>
    <ion-item>
      <ion-icon name="ionic" item-left></ion-icon>
      @ionicframework
    </ion-item>
  </ion-list>
</ion-content>

¿Que te parece ahora, eh?

Sí, exacto: <ion-header>, <ion-navbar>, <ion-title>, <ion-content>, <ion-list>, <ion-item>… son solo algunos de los componentes de ionic 2 muy similares o idénticos a varias directivas de ionic 1.

Ionic 2 replica las directivas de ionic 1 con componentes similares o idénticos, para evitar una nueva curva de aprendizaje con los templates.

Además, mantiene otras cosas muy potentes del ecosistema de ionic 1, como:

• La CLI para generar proyectos, añadir plugins, o compilar el código, que ahora es incluso más potente con Ionic 2, pudiendo generar páginas y servicios por ejemplo.
• El uso de Gulp para compilar SaSS (ahora viene por defecto)
• Distintos temas CSS para iOS y Android (ahora con Material Design)

TODO ha cambiado

Y sin embargo, TODO ha cambiado con Ionic 2, básicamente debido al uso de Angular 2 en lugar del AngularJS original.

¿Como afecta Angular 2 a Ionic 2?

• Mayor rendimiento, mayor optimización

• Aproximación más modular por componentes de Angular 2

• Definición más simple de componentes y servicios mediante clases

• Dependency Injection simplificada con TypeScript

• Sintaxis de bindings más clara

• Detección de errores en fase de «compilación» con TypeScript

 
¿Aprendemos de la experiencia? Eso parece, y por eso Ionic 2 trae otro cambio significativo:

• Nuevo sistema de Navegación en Ionic 2

Te explico punto por punto a qué me refiero…

Mayor rendimiento

La aproximación de Angular 2 al flujo de información es unidireccional, en contraste con el two-way data-binding que teníamos en AngularJS.
Gracias a esto, la comprobación de cambios es más sencilla y además con un diseño inteligente de la app se puede simplificar todavía más (un día hablaré en detalle del tema), para conseguir una mayor optimización.

Nada que ver con el aparatoso digest cycle de AngularJS, que se atragantaba cuando tenía que comprobar miles de bindings.

Aproximación modular

Aunque no formaba parte de las guías de estilo, si te enfrentabas a una aplicación mínimamente grande con Ionic 1 ya aplicabas un diseño modular como el que prescribe ahora Ionic 2.

En todo caso, el uso entre bastidores de un mecanismo como WebPack (en beta 12, actualmente browserify) para transpilar el código a Javascript plano y juntarlo todo en un único JS de forma automática junto con el uso de módulos siguiendo el estándar ES6, va a hacer mucho más sencillo importar servicios de un lado a otro y crear nuevos componentes.

Definiciones más simples mediante clases

Uno de los problemas con la curva de aprendizaje de AngularJS era la definición de los distintos elementos. Directivas, Servicios, Providers… cada cosa tenía su sintaxis y podía ser un poco abrumador para un recién llegado.

Angular 2 elimina en gran medida esos mecanismos ya que componentes y servicios se definen a través de clases que siguen el estándar ES6. Eso sí, para facilitarte el desarrollo, lo más cómodo será utilizar los decoradores de TypeScript, pero son mucho más ligeros que la verborrea que introducía AngularJS.

Dependency Injection Simplificada

Gracias a TypeScript inyectar un servicio a un componente es tan simple como pasar su provider (la propia clase) como argumento al constructor del componente. Lo mismo con otros servicios.

Se acabó lo de pasar un array de strings (2 veces si minificamos) con las dependencias, muy dado a errores de escritura.

Sintaxis de bindings más clara

Con AngularJS (y por tanto Ionic 1), nunca sabías lo que tenías que pasar en los atributos de las directivas sin echar un vistazo dentro: ¿Un literal? ¿un objeto? ¿una función?

Angular 2 proporciona una sintaxis mucho más clara para los atributos de los componentes:

• <item [something]="myVar">: Corchetes para atributos de entrada

• <item (onSomething)="myMethod()">: Paréntesis para lanzar una función al suceder un evento

• <item [(ngModel)]="myVar">: Corchetes + paréntesis para un binding bi-direccional

• <item *ngFor="let item in items">: No es propiamente un binding al elemento, sino una directiva estructural (afecta a la estructura, en este caso repitiendo el elemento), y lo sabemos por que se identifica con un * delante.
  Con el AngularJS original no teníamos forma de saber la diferencia de un vistazo.

Detección de errores en compilación

Lo explico en mayor detalle en mi artículo de TypeScript para Angular 2, pero en esencia, el uso de variables tipadas permite detectar errores en fase de compilación al pasar de TypeScript a Javascript plano, ya que se puede saber si por ejemplo, en un momento dado estamos esperando recibir un valor booleano y recibimos un string, o bien si se supone que nuestra variable es de la clase Gato y en realidad la estamos intentando inicializar con la clase Perro.

Navegación en Ionic 2

Un cambio destacable de Ionic 2, que NO se deriva directamente del uso de Angular 2, es el sistema de navegación. En Ionic 1 se utilizaba el popular ui-router, que proporcionaba mucha flexibilidad, pero quizá se quedaba corto para el estilo de navegación mobile.

La veteranía es un grado y por eso el equipo de Ionic ha creado un nuevo sistema de rutas mucho más adaptado al entorno móvil, donde hay una pila de vistas donde podemos añadir una encima (push) o sacarla de la pila (pop). Quizá de entrada esto no te diga nada, pero lo cierto es que iOS, por ejemplo, lo hacía así desde el principio.

El nuevo sistema de rutas de Ionic 2 está más adaptado al comportamiento del usuario en entorno mobile

Conclusiones

En conclusión, estoy encantado de que Ionic 2 vaya a tener pronto una versión estable. Llevo tiempo trabajando con las betas y mi sensación es que Ionic 2 es mucho más potente que Ionic 1 en todos los aspectos.

Además, si bien te encontrarás una cierta curva de aprendizaje, conociendo Ionic 1 de antemano te va a resultar todo muy familiar. Si además te has ido reciclando para aprender ECMAScript 6, solo te faltará aprender un poquito de Angular 2 para pillar los conceptos que te falten.

Ionic 2 es mas potente a su predecesor en todos los aspectos. ¡¡Y si conoces Ionic 1 y ES6, solo tendrás que aprender un poquito de Angular 2!!

 
Así que ahora, dime, ¿Ya has empezado a probar Ionic 2?