Introducción

Ionic es un framework open source construido usando HTML5, CSS3 y Javascript para el desarrollo de aplicaciones híbridas para dispositivos móviles. La librería está orientada únicamente a su visualización en dispositivos móviles, es decir, no es una librería responsive tipo Bootstrap que se adapte a distintos tamaños de pantalla. Todo esto hace que los componentes tengan una apariencia más similar a la nativa, que funcionen más rápido, y por lo tanto que mejore la experiencia del usuario que use la aplicación.

Ionic incluye una completa librería de componentes, estilos y animaciones que simulan el aspecto nativo de las distintas plataformas. Estos componentes adoptarán automáticamente la apariencia nativa del dispositivo en el que si visualicen. Por ejemplo, si incluimos un checkbox en un formulario, al compilar y visualizar dicha aplicación en Android, el checkbox adoptará un aspecto distinto al que mostraría en iOS.

Otra característica interesante de Ionic es que utiliza Angular para el desarrollo del código dinámico de la aplicación. Ionic nos permite crear una aplicación sin necesidad de escribir ni una línea de Javascript ni de Angular, solamente con CSS y HTML. Pero para aplicaciones más complejas podemos usar Angular, lo que nos permitirá una mayor potencia a la hora de crear contenidos dinámicos, para por ejemplo mostrar un listado a partir de datos cargados de Internet o almacenados en el móvil. Además Angular nos permite estructurar el código de la aplicación y modularizar las distintas partes del mismo siguiendo patrones de desarrollo como MVC, donde tendríamos el código separado en modelos de datos, vistas y controladores.

Las aplicaciones híbridas son básicamente páginas web que se ejecutan o renderizan dentro de un navegador web de una aplicación nativa. Es decir, el desarrollador crea la aplicación usando código web (como HTML, CSS, Javascript, etc.) y el framework Ionic en este caso. Una vez finalizado el desarrollo, este código se copiará dentro de una aplicación nativa, que consistirá en una única pantalla de tipo visor web en la que se cargará el código de la página web. Esta técnica nos permite generar a partir de código web una aplicación compilada como si fuera nativa, que se puede instalar en cualquier dispositivo y que la podemos publicar en el market de aplicaciones.

Además, las aplicaciones híbridas tienen muchas otras ventajas, pero la principal es la velocidad de desarrollo, ya que con un único código web podemos generar aplicaciones para todas la plataformas: Android, iOS, Windows Phone, etc. Simplemente tendremos que crear la aplicación nativa de cada plataforma con un visor web e incluir nuestro código dentro.

Ionic, gracias a que viene integrado con Cordova (o PhoneGap), también permite el acceso a las características nativas de los dispositivos. Es decir, desde el código web podremos hacer uso de los sensores del dispositio como GPS, cámara, acelerómetros, brújula, etc. o incluso a las opciones de almacenamiento o la agenda de contactos.

Ahora que ya hemos visto que es Ionic y lo que puedes hacer con él, vamos a empezar explicando como instalar esta herramienta y como crear nuestra primera aplicación.