Atrás quedaron los días en los que el desarrollo de una aplicación móvil tomaba semanas e incluso meses en implementarse. Ahora gracias a impresionantes SDK front-end de código abierto (Software Development Kits) es posible reducir los tiempos de desarrollo a unos pocos minutos si la aplicación no es muy compleja. El mundo del desarrollo de aplicaciones móviles, como podréis observar, ha crecido una barbaridad gracias a los kits de desarrollo que hacen la vida más fácil al desarrollador. Existen múltitud de frameworks para agilizar la tarea pero hoy nos detendremos en uno que nos ha llamado especialmente la atención. Se trata de Ionic, un framework front-end que te permite crear aplicaciones móviles nativas de alto rendimiento. Una de las grandes características de Ionic es que está pensada para que cualquier usuario, aunque no tenga conocimientos de navegación con aplicaciones móviles, sepa utilizarla. Es decir, se ha hecho un gran hincapié en la usabilidad.
Como un potente framework front-end construido en Apache Cordova / Phonegap, Ionic te permite crear una aplicación web con los lenguajes web con los que estás acostumbrado a tratar. Creado por el equipo que ha desarrollado otros proyectos tan exitosos como Codiqa y Jetstrap, este framework es capaz de desarrollar un proyecto con el aspecto y la interfaz de usuario de una auténtica aplicación móvil. Si estás acostumbrado a usar Bootstrap, Ionic te resultará la mar de sencillo puesto que es muy similar. Ionic, aparte de las facilidades que te pueden otorgar otros frameworks como Bootstrap, cuenta con un gran catálogo de animaciones para dar más fluidez tanto a los elementos que se muestran en el desarrollo como a las transiciones.
Tanto si necesitas una librería Javascript UI como si necesitas un framework CSS, Ionic es el mejor aliado para los desarrolladores que estén familiarizados con AngularJS. La razón es que Ionic utiliza un conjunto de extensiones de AngularJS que puedes equipar en las aplicaciones HTML5 desarrolladas con el framework como gestos, interacciones y alucinantes animaciones. Siguiendo el patrón Vista-Controlador, Ionic viene pre-equipado con controladores que te permiten gestionar las interacciones de la interfaz de usuario junto con la vista del proyecto.
¿Qué incluye Ionic Framework?
A continuación te mostramos un listado de lo que puedes encontrar dentro de Ionic framework:
- Paquete de iconos propio
- Transiciones automáticas basadas en el historial
- Extensiones de Angular JS para mejorar la interacción del usuario
- Soporte de gestos como deslizar, arrastrar, soltar...
- Un gran set de componentes UI como modales, campos, tabs, radios...
- Temas personalizables
- Función de arrastrar para actualizar como en la mayoría de aplicaciones web
- Y muchas cosas más...
Si estás interesado por este framework puedes ver varias demos sobre los distintos elementos que trae el framework haciendo clic en este enlace.
Ejemplo de uso de Ionic Framework
A continuación te mostramos un pequeño ejemplo con Ionic Framework. En él desarrollaremos un listado con distintas opciones, a modo de árbol de secciones. Es un ejemplo sencillo que podéis intentar vosotros mismo si trasteais con este framework. El código es el siguiente:
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic- A high-end framework for building native-looking HTML5 mobile apps</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script>
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.items = [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 }
];
});
</script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic List Items</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="item in items" item="item">
List Item {{ item.id }}
</ion-item>
</ion-list>
</ion-content>
</body>
</html>
Mediante este código, Ionic nos generaría un listado con distintas secciones cuyo diseño se asemeja bastante a las de las aplicaciones comunes de móviles siguiendo un estándar de diseño.
La curva de aprendizaje de este framework es muy leve, aunque si cuentas con experiencia en lenguajes web y sobretodo en Angular JS, el bautismo con Ionic es pan comido. Además, una de las principales ventajas de la estructura de Ionic es que puede ser fácilmente conectado con tecnologías de back-end más comunes y conocidas como Ruby o Node. Otra de las ventajas es que te permite definir CSSs para personalizar el diseño de tu aplicación, aunque por defecto el aspecto que trae es muy similar al de las aplicaciones desarrolladas para iOS.
En conclusión, cuando se trata de crear aplicaciones nativas utilizando HTML5, nada mejor que el framework Ionic. Esperamos que a estas alturas, hayas comprendido en profundidad el funcionamiento de Ionic y su incipiente importancia en la comunidad de desarrollo de aplicaciones HTML5.
Con este artículo te descubrimos uno de los frameworks para crear apps web que más está dando que hablar en los últimos días. ¿Te ha parecido atractivo este framework? ¿Habías oido hablar de él? ¿Piensas echarle el guante para alguno de tus futuros proyectos? Por favor, indícanoslo en los comentarios.