Creando una aplicación profesional y multiplataforma con Apache Cordova

Hace unos meses nos encontramos con un pequeño proyecto para crear una aplicación mediante HTML5 para Android, iOS y Windows Phone sobre el blog de tecnología https://pabloyglesias.com en el cuál Pablo, su autor, quería una aplicación con la que los usuarios pudieran seguir el blog incluso sin estar conectados a internet.

Después de intercambiar varios correos y alguna reunión, estructuramos todo el proyecto de manera que la app descargara los nuevos posts cuando tuviera conexión a internet y los cacheara de manera que al no estar conectado se pudiera seguir leyendo. Además queríamos una lista de favoritos o para leer después y una lista de los últimos vídeos de su página de youtube.

Decidimos que íbamos a soportar las últimas versiones de Android e iOS además de soportar Windows Phone 8.1 con un diseño que sirviera ya para el próximo Windows Phone 10.

Una vez la idea estaba clara empezamos a investigar sobre la tecnología más adecuada para este proyecto en concreto.

Tecnologías

Escogimos Apache Cordova como plataforma HTML5 para crear apps ya que está muy extendida, tiene todos los plugins que necesitamos, además ya la habíamos usado en otros proyectos con lo que nos iba a ayudar a trabajar mejor.

Decidimos que sería interesante programar la app utilizando TypeScript que es un lenguaje open source creado por Microsoft que nos aporta una capa extra por encima de JavaScript (Aunque el resultado final sigue siendo JavaScript) de manera que podríamos tener un código más fácil de entender y mantener en el futuro.

TypeScript

Escoger el framework de desarrollo siempre es una de las partes más importante cuando hacemos un proyecto, teníamos varias opciones:

· Uno propio
De manera que controlemos absolutamente todo el proceso de creación y el funcionamiento del código de nuestra aplicación. Suele ser una de las opciones que más se recomiendan para tus propios proyectos.
Para este caso lo descartamos ya que queríamos utilizar uno de terceros de manera que al entregar este proyecto a Pablo pudiera mantenerlo y modificarlo fácilmente sin depender de nuestro equipo en ningún momento y sin necesitar una parte de documentación para entender nuestro propio framework.

· Ember, Backbone, Aurelia, Angular
Los que más nos gustaban teniendo en cuenta los conocimientos del equipo y lo que nos podían aportar son Backbone y Aurelia, personalmente opino que cualquiera de ellos hubiera sido una buena opción, pero finalmente nos decantamos por AngularJS por que nos pareció bastante adecuado para este proyecto y porque sabíamos que se integra muy bien con algunos frameworks de UI.

¿Otro framework para UI?
Los desarrolladores Frontend no solemos trabajar con frameworks para UI, sobretodo en web aunque es verdad que hay muchas opciones y muy buenas. En el caso de desarrollo móvil me parece totalmente contrario sobre todo para desarrollo multiplataforma ya que lo que busco es ofrecer al usuario una UX y una UI que se adapten a la plataforma (iOS, Android o Windows Phone) y no como en web que hago una UX y UI responsive pero únicas.

Para este proyecto en concreto nos hemos decantado por Ionic Framework, tiene prácticamente todos los componentes necesarios y está totalmente preparado para trabajar con Angular lo que hace que se conviertan en una buena pareja para el desarrollo de este proyecto.

Gracias a Gulp podemos gestionar y automatizar todas las tareas de nuestro proyecto, en nuestro caso inyectar los JavaScript en el índex.html compilar SASS que usamos para crear los estilos de nuestro proyecto de manera que en vez de escribir directamente CSS podremos tener una lógica en nuestras hojas de estilos que al final acabarán generando .css y por supuesto para gestionar las diferentes dependencias de nuestro proyecto hemos elegido a Bower que es un gestor de paquetes desde el que podemos instalar ionic, angular, etc.

Un IDE para gobernarlos a todos

Cuando se trabaja en un proyecto con tantas herramientas es muy útil poder tener un IDE que nos facilite el desarrollo integrándose con ellas.

Este es el caso de Visual Studio 2015, que nos ha hecho ser muy productivos mientras trabajábamos en el proyecto.

Gracias a su integración con Apache Cordova, ahora podemos crear o abrir proyectos de Cordova para trabajar con ellos.

Mediante los simuladores para Android e iOS y los emuladores para Android y Windows Phone, además de permitir la depuración remota para las tres plataformas, depurar en Apache Cordova nos ha sido tan fácil como poner un simple punto de depuración en cualquier parte de nuestro código.

La integración con Gulp, Grunt Bower y NPM es perfecta, teniendo desde intellisense para poder ver sugerencias de paquetes y versiones de los mismos como un panel de tareas desde el que inicializar o bindear tareas a nuestro proyecto.

Por supuesto añadiendo que contamos con muchos plugins y plantillas que ayudan a trabajar con este IDE, por ejemplo Webessentials, NodeJS Tools y todo lo que puede encontrar en la VS Gallery.

Siguiente fase

En el siguiente artículo veremos el planteamiento de nuestra aplicación y empezaremos a trabajar con ello y con las tecnologías mencionadas en este artículo.

Si tienes dudas al respecto recuerda que puedes escribir un comentario o contactar con nosotros vía twitter.