Ionic: Ventajas y Desventajas

Ventajas:

• Desde una única fuente podremos llegar a las plataformas que soporta este framework (Android e iOS).
  
  
• El desarrollo principal se realiza en HTML junto con CSS y JS, lenguajes muy extendidos por la comunidad de desarrolladores, con lo que la implantación de esta herramienta en la empresa, facilitará el desarrollo de proyectos de la forma más efectiva aun cuando la plantilla de desarrolladores contenga nuevas incorporaciones.
  
  
• Que una herramienta tan “reciente” como Ionic sea capaz de dar soporte a un gigantesco framework como AngularJS, nos hace plantearnos hasta dónde serán capaces de llegar, teniendo ya en vistas incluir otros frameworks como EmberJS o KnockOut por ejemplo.
  
  
• Si ya contamos con una web app que queremos convertir en aplicación móvil, en la mayoría de los casos habremos hecho uso de JavaScript, por lo que el código es reutilizable.
  
  
• Para el caso de aplicaciones híbridas, tendremos con un único proceso de desarrollo e implementación, una app para Android, iOS y web.
  
  
• Aunque el soporte para Windows y Windows Phone está en su roadmap para su implementación en próximas versiones, algunos usuarios ya han conseguido mediante algunas modificaciones en su código hacer funcionar apps de Ionic en Windows y Windows Phone .
  
  
• Escribe el código una vez, ejecútalo en la plataforma que desees.

Desventajas:

• El rendimiento puede ser ligeramente menor que en aplicaciones desarrolladas de forma nativa, cosa que no debería ser un problema al menos que el proyecto sea para la creación de juegos con detallados gráficos u otras aplicaciones que hagan uso de grandes cantidades de recursos.

• Es una herramienta “joven” y puede ser difícil encontrar módulos compartidos por los usuarios, pero como dijimos, la comunidad está creciendo a pasos agigantados y en breve este inconveniente podría dejar de existir.
   
• Debido a esta “juventud” los chicos de Ionic siguen cambiando y afinando algunas características tanto del framework como de sus normas en lo que a soporte, uso, bibliotecas y demás se refiere; haciendo por tanto que los usuarios se actualicen cada cierto tiempo.

Ionic: Instalacion

En primer lugar tenemos que instalar en gestor de paquetes de NodeJs (npm) para poder instalar el propio Ionic y algunas otras dependencias que nos harán falta. Para instalarlo símplemente podemos descargarlo e instalarlo desde su Web:

https://nodejs.org/en/

O en Linux instalarlo usando el gestor de paquetes:

sudo apt-get install nodejs
sudo apt-get install npm

Para instalar la última versión de Ionic y Cordova(*) tenemos que ejecutar el siguiente comando:

$ sudo npm install -g cordova ionic

Para comprobar si se ha instalado correctamente podemos escribir en un terminal el siguiente comando:

$ ionic 

 Esto nos tendría que mostrar un listado con todas las opciones disponibles del cli (intérprete de línea de comandos) de Ionic. Con esto ya tendríamos instalado tanto Ionic como Cordova, por lo que podríamos empezar a trabajar, pero antes de nada tendremos que revisar algunas dependencias más.

Hay algunas dependencias más que dependerán del sistema operativo que uséis y de las plataformas para las que queráis compilar vuestras aplicaciones. En la sección "Plataformas" veremos más información sobre esto.

Además también es posible que queráis usar Gulp, Bower o SASS, aunque su instalación es opcional sí que se recomiendan ya que os ayudarán mucho en el desarrollo de este tipo de aplicaciones:

$ sudo npm install -g gulp
$ sudo npm install -g bower
$ sudo gem install sass

¿Qué es Gulp? Gulp es un sistema de construcción que permite automatizar tareas comunes o repetitivas de desarrollo, tales como la minificación de código JavaScript, recarga del navegador, compresión de imágenes, validación de sintaxis de código y un sin fin de tareas más. Para mas información consultad: http://gulpjs.com/

¿Qué es Bower? Bower es un gestor de paquetes para el desarrollo Web. Es decir, cualquier librería de código abierto que puedas necesitar para el desarrollo de tu front-end lo podrás gestionar con Bower, él se encargará de instalar la librería y todas sus dependencias e incluso de las actualizaciones. Para mas información consultad: http://bower.io/

¿Qué es SASS? SASS es un metalenguaje de CSS que nos permite programar hojas de estilo usando variables, reglas CSS anidadas, mixins (facilitan la definición de estilos reutilizables), importación de hojas de estilos y muchas otras características. Ionic incluye los fuentes de sus hojas de estilos en SASS, así que podemos aprovechar para modificarlas usando este lenguaje. Para mas información consultad: http://sass-lang.com/

Ionic: 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.