Ionic 2 es un framework para el desarrollo de aplicaciones híbridas, inicialmente pensado para móviles y tablets, aunque ahora también capaz de implementar aplicaciones web e incluso dentro de poco aplicaciones de escritorio multiplataforma. Su característica fundamental es que usa por debajo Angular 2 y una cantidad de componentes enorme, que facilita mucho el desarrollo de las aplicaciones.

Se trata de una estupenda herramienta para la creación de aplicaciones sorprendentes, pensada para obtener resultados de una manera rápida y con una menor inversión económica, ya que permite crear aplicaciones para distintas plataformas móviles con una misma base de código.

Este es el primero de una serie de artículos para explicar Ionic 2 con el que iremos componiendo el Manual de Ionic 2 de DesarrolloWeb.com. Lo estamos desarrollando ya con la versión final de Ionic 2, la versión más nueva del framework ya estable y preparada para producción. Aunque seguro que estás deseando empezar por instalar Ionic y comenzar tu primer proyecto, en este momento comenzaremos por aclarar algunos conceptos.

Qué es una aplicación híbrida

Una aplicación híbrida es aquella que permite desarrollar apps para móviles en base a las tecnologías web: HTML + CSS + Javascript. Son como cualquier otra aplicación de las que puedes instalar a través de las tiendas de aplicaciones para cada sistema, por lo que en principio usuarios finales no percibirán la diferencia con respecto a otros tipos de aproximaciones diferentes, como las aplicaciones nativas.

Al ejecutarse con tecnologías web, los desarrolladores que ya tienen experiencia en el desarrollo en este medio pueden aprovechar sus conocimientos para lanzarse de una manera más rápida en el desarrollo de apps para móviles. Para hacer esto posible, las aplicaciones híbridas se ejecutan en lo que se denomina un “web view”, que no es más que una especie de navegador integrado en el móvil y en el que solamente se ejecuta la app híbrida.

Las aplicaciones híbridas son interesantes por diversos motivos:

1. Con una misma base de código serán capaces de compilar apps para funcionar correctamente en una gran cantidad de sistemas operativos de móviles o tablets. Generalmente nos será suficiente que nuestra app funcione en iOS y Android, pero Ionic es capaz de compilar a otros sistemas como Windows Phone.
2. El coste del desarrollo es sensiblemente menor, ya que no es necesario contar con varios equipos de desarrollo para cada lenguaje concreto de cada plataforma.
3. El tiempo de desarrollo también es menor, ya que solo es necesario construir la aplicación una vez e inmediatamente la tendremos en todas las plataformas a las que nos dirigimos.
4. Es de más fácil adaptación para los desarrolladores que vienen de la web.

Pero todo no son ventajas, también podemos enumerar algunas desventajas en relación a las aplicaciones nativas (aquellas construidas con los lenguajes propios de cada sistema, Java para Android y Swift / Objective-C para iOS):

1. El rendimiento de una aplicación nativa suele ser mejor que el de una híbrida, aunque las híbridas han mejorado mucho en este sentido.
2. Al ejecutarse en un web view dependemos de las tecnologías disponibles para el desarrollo web, que pueden ser menos ricas y potentes que las disponibles en nativo.
3. En las aplicaciones nativas trabajamos directamente con el hardware del teléfono, mientras que en las híbridas dependemos de plugins para su acceso. Esto puede derivar en problemas, pero afortunadamente cada vez son menores.

Integración con Angular 2

Ionic 2 está desarrollado sobre el framework Javascript Angular 2. Esto quiere decir que para el desarrollo con Ionic 2 podemos apoyarnos en todas las ventajas de desarrollo con Angular, lo que nos permitirá contar con una excelente estructura de proyecto, el trabajo con buenas prácticas, uso de patrones de diseño de software variados y una buena gama de componentes y directivas.

Nuestro código por tanto tendrá más calidad usando Angular y podremos usar muchas de sus utilidades pensadas para un desarrollo más rápido. Gracias a usar Angular 2 en adelante, tenemos además la certeza de disponer de un código más optimizado y de mayor rendimiento, adaptado para el momento actual y el futuro.

En este manual no pretendemos explicar Angular, aunque a menudo podamos comentar aspectos que no son de Ionic y sí del desarrollo con el framework Javascript. Sería interesante que el lector conociese Angular de antemano, para lo que aconsejamos la lectura del Manual de Angular 2.

Desarrollo basado en componentes

En Ionic 2, heredado del desarrollo con Angular, trabajamos en base a componentes. Esto quiere decir que nuestras aplicaciones serán compuestas por un árbol de componentes que se utilizan los unos a los otros para la conclusión de los objetivos globales de la aplicación.

Todos los frameworks modernos usan esta arquitectura, que se ha demostrado que es la que ofrece un mejor código, más fácilmente escalable y mantenible.

Los componentes están pensados para, de manera modular y encapsulada, resolver pequeños problemas. Por ejemplo puede haber componentes para implementar un sencillo botón, componentes para hacer un sistema de navegación por tabs, para selectores de fechas, etc. Integrando componentes somos capaces de construir aplicaciones grandes y complejas. Ionic 2 nos ofrece ya de base una cantidad muy grandes de componentes que son capaces de trabajar perfectamente en dispositivos móviles con pantallas táctiles pero obviamente para el desarrollo de nuestras aplicaciones necesitaremos construir nuestros propios componentes que implementen los comportamientos más específicos de nuestro modelo de negocio.

TypeScript

Otra cosa que viene dada por el desarrollo de Angular es el uso del lenguaje TypeScript, que no es más que un "superset" de Javascript. Dicho de otra forma, TypeScript es Javascript pero con añadidos pensados para mejorar el trabajo por parte de los desarrolladores, haciéndonos más productivos.

La mayor aportación de TypeScript al lenguaje Javascript es la posibilidad de definición de tipos para las variables, pero en general aporta mucho más y además nos permite usar todas las mejoras de ES6 y algunas de ES7 en las aplicaciones.

No debemos pensar en TypeScript como un problema por ser algo que debemos aprender de nuevo. TypeScript es en realidad Javascript, por lo que no significa aprender un nuevo lenguaje, sino agregar algunas cosas al que ya conoces, cosas que en definitiva te van a ayudar durante la etapa de desarrollo y a la hora de mantener las aplicaciones en el futuro. Puedes aprender más sobre TypeScript en este artículo y también sobre las nuevas versiones de Javascript en el Manual de ES6.

TypeScript requiere una transpilación del código, de modo que aquel código que escribes en TypeScript se convierta en código Javascript capaz de ejecutarse en cualquier navegador. Esa transpilación la realiza Ionic 2 por debajo, por lo que no representa un problema para el desarrollador.

Look & feel adaptado al dispositivo

Los componentes de Ionic 2 ya vienen adaptados al dispositivo de manera estética. Quiere decir que, cuando se compila una aplicación para iOS el componente se visualizará de manera diferente que cuando se compila para Android. En Android usará Material Design mientras que en iOS usará las guías de diseño definidas por Apple.

Esto es una ventaja en sí, porque las personas disfrutarán de aplicaciones con una experiencia de usuario cercana a la que están acostumbrados en su teléfono y nos evita a los desarrolladores la necesidad de trabajar más para conseguir este efecto. Sin embargo, como autores de las apps con Ionic 2 también somos capaces de alterar el diseño de las aplicaciones, proporcionando una experiencia de usuario específica y original para nuestra propia aplicación.

Desarrollo y compilado de aplicaciones

Con Ionic 2 desarrollamos aplicaciones con las tecnologías web. Durante toda la etapa de desarrollo usaremos el navegador para visualizar las aplicaciones, lo que permite un flujo de trabajo muy productivo, ya que no se tiene que compilar. Aunque lo cierto es que, por la necesidad de transpilar el código de TypeScript a Javascript compatible con el navegador, no será tan rápido de visualizar los cambios como simplemente refrescar la página del navegador.

Una vez que la app está construida se tiene que realizar el proceso de compilación, en el que se producen los ejecutables específicos para cada dispositivo. Ese proceso sí es un poco más pesado para el procesador, pero se hace solo cuando tenemos que lanzar una nueva versión que se subirá a las tiendas de aplicaciones.

Apache Cordova y Phonegap

Ionic 2 se basa también en Apache Cordova para la implementación de las aplicaciones. Hay partes, como el acceso a los componentes nativos del dispositivo, en las que se usan plugins que nos proporciona Apache Cordova principalmente y Phonegap en algunos casos. Actualmente también Ionic es proveedor de algunos plugins para trabajo con la parte nativa del teléfono.

Aquí como nativo nos referimos a elementos como la cámara, acelerómetro, teclado virtual, etc. Todos esos elementos se pueden usar desde las aplicaciones de Ionic, con los correspondientes plugins nativos, que forman una especie de puente entre el desarrollo con Javascript y el teléfono.

Apache Cordova también es el software que nos permite compilar el desarrollo realizado con Ionic con tecnologías web en aplicaciones para móviles instalables vía tiendas de aplicaciones.

Conclusión

Ionic 2 es una excelente alternativa para el desarrollo de apps. Hemos repasado diversos conceptos que usaremos a lo largo de este manual y sobre los que sin duda volveremos muchas veces y ampliaremos la información llegado el momento en el que sea necesario.

Si estás aprendiendo Ionic 2 encontrarás en DesarrolloWeb.com en breve nuevos artículos detallados sobre cada una de las etapas de desarrollo con las que podrás aprender paso por paso. De todos modos, si deseas aprender de una manera sencilla y rápida, ya mismo, también te recomendamos el Curso de Ionic de EscuelaIT, en el que aprenderás de manera tutorizada y mucho más detallada, rápida, rigurosa y sobre todo de principio a fin.

Para acabar te dejamos a continuación el vídeo de la clase previa al Curso de Ionic, en el que podrás de una manera práctica aprender acerca de los primeros pasos en el desarrollo de apps para móviles.