Skip to content
Aprende a hacer apps móviles con Ionic 2 

Ionic 2: Nada ha cambiado, TODO ha cambiado

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?

Published inAngular 2ionicIonic FrameworkTypeScript

10 Comments

  1. Muy bueno el post y en general tu blog, me gustaría preguntar si en general recomiendas aprender Ionic 2 cuando no tengo experiencia alguna con Ionic anteriormente pero sí alguna con Angular 2. Por qué quisiera aprenderlo? Abrirme más camino laboral, aprender otra tecnología y seguir mejorando en general.

    • Enrique Oriol Enrique Oriol

      ¡¡Gracias Iván!!

      Respondiendo a tu pregunta, SI, recomiendo claramente aprender Ionic 2 como tecnología de presente y futuro para el desarrollo de apps móviles multiplataforma, y más aún si ya conoces Angular 2, que no te será nada difícil pillarlo.

      Estoy a punto de publicar un curso de Ionic 2. Altamente recomendado si lo que quieres es aprender Ionic 2 rápidamente y evitar las típicas piedras que encontrarás en el camino.

      ¡Saludos!

  2. Hola Enrique mira actualmente estoy llevando un curso de como implementar la API de Google en Ionic, ya que nos han salido algunos proyectos de geolocation y generacion de rutas, seria muy dificil migrar un proyecto así??

    Y que tan cerca de un performance nativo se encuentra

    • Enrique Oriol Enrique Oriol

      ¡Hola!

      Entiendo que te refieres a migrar de Ionic 1 a 2. Dependerá de lo grande que sea el proyecto, de cuanto JS se esté utilizando, y también de la versión de Ionic 1 (las más recientes, con Angular 1.5 están más orientadas a componentes, y por tanto la migración debería ser más sencilla).

      En cuanto a la performance, es buena, no conseguirás 60 fps que puedes conseguir en nativo, pero como siempre, depende de para qué lo quieras. Además, para la API de Google hay un plugin de Cordova para utilizar la SDK de iOS/Android, y los mapas que ves si que tienen un rendimiento como con la API nativa. Te dejo un vídeo de la app de geolocalización de mi curso de Ionic 2 para que te hagas la idea del rendimiento: https://www.youtube.com/watch?v=WNaRWnVjpbE

  3. Muy bueno tu post.
    Cambiando un poco de tema, se puede usar Ionic con React o solo con Angular 2 con Typescript?
    Gracias.

    • Enrique Oriol Enrique Oriol

      ¡Gracias!

      Pues la verdad es que Ionic 2 como tal está diseñado sobre Angular 2, así que es lo natural. Con Ionic 1 sí que había una cierta separación entre la parte JS y la de diseño, y se podía utilizar solo como framework CSS al estilo Bootstrap. Sé que hay un proyecto de github en que se mezcla ionic (diría que la versión 1) con React: http://reactionic.github.io/

  4. Miguel Miguel

    Gran Post! Muy informativo y ameno. Es más, me ha parecido tan interesante esos cambios que comentas que ahora mismo tengo grandes dudas sobre qué framework ‘cross-plataform’ focalizar: Ionic 2 o React Native. He leído grandes cosas sobre Angular 2, otras no muy buenas respecto a su predecesor, como su aumento de complejidad con respecto a otros como Ember.js con el que suele trabajar React Native. Sé que eres un Ionic Evangelist como tú mismo afirmas, ¿pero podrías comentar en qué aspectos consideras que Ionic 2 supera a React Native? Parece que éste último está recibiendo muy buena recepción por parte de Apple y Ubuntu. Aunque por otro lado la potencialidad de Ionic 2 junto con Angular 2 es innegable.

    Un saludo y felicidades por el blog!!

    • Enrique Oriol Enrique Oriol

      ¡Gracias!

      React Native es algo distinto a Ionic 2 ya que no es web sino que en realidad utiliza vistas nativas. En todo caso, lo podríamos comparar a NativeScript. No digo que Ionic 2 sea mejor, de hecho, en términos de rendimiento, debería ser superior React Native justamente por trabajar con vistas nativas, aunque con los dispositivos de hoy en día y una programación eficiente, apenas debería notarse la diferencia.

      En todo caso, déjame darte mi opinión personal de por qué prefiero Ionic 2. Para mi, que sea 100% web es una gran ventaja, ya que no solo te sirve para apps Android, iOS y WP, sino también para web mobile.

      He probado a hacer algunas cosas con React Native y de momento le veo dos inconvenientes:

      1. No está suficientemente maduro. Muchos componentes que encuentras funcionan solo en una plataforma o tiene bugs
      2. El sistema de estilos de React Native. Personalmente no me gusta nada, y además no tiene la flexibilidad de CSS para sobreescribir propiedades

      Dicho esto, luego ya entramos en los gustos personales. A mi personalmente me gusta más Angular 2 que React. Para mi con Angular hay una separación más clara de conceptos (si bien ambos trabajan orientados a componentes), y además Angular 2 es un framework más completo (React es más bien una librería de renderizado, aunque hay muchas librerías con las que complementar la experiencia).

      No he probado React con Ember (de hecho no he probado Ember), sino que he trabajado directamente con React y Redux. En este sentido, veo muy potente la idea que hay tras Redux, pero es algo que se puede aplicar igual a Angular 2 sin necesidad de usar React 🙂

      Supongo que te sigo dejando con la duda… al final son dos alternativas muy potentes, y elegir una u otra es más cuestión de gustos, aunque el tema de madurez para mi juega a favor de Ionic 2.

  5. david david

    Hola. Se hace posible subir las aplicaciones de IONIC a la app store y a la quivalente en IOS?

    Gracias!!

    • Enrique Oriol Enrique Oriol

      Si claro, ionic acaba generando un APK (android) o un IPA (iOS) normal y corriente, así que lo puedes subir la tienda de aplicaciones correspondiente.

      ¡Saludos!

Deja un comentario