Estructuración del área de trabajo

Se separa el código fuente en tres áreas (directorios):

• 'app':
  Contiene la base de la aplicación.
• 'php', 'node' y 'data':
  Contienen la parte de servidor.
• 'phonegap':
  Contiene los ficheros necesarios para combinar con la base de la aplicación y construir las versiones nativas con Phonegap.

Otros elementos del área de trabajo

• 'scss':
  estilos de la aplicación con Compass
• 'build', 'bin':
  scripts para construcción de la aplicación mediante Phonegap y dependencias de binarios
• 'resources':
  recursos de diseño

Cliente

SPI utilizando Backbone.js y Underscore

Require.js

Se utiliza Require.js para la gestión de dependencias, cargando un primer fichero que contiene:

• Configuración y variables de la aplicación (pendiente de refactorización)
• Listado de dependencias (se utiliza ‘shim’ para las de JS)
• Inicialización de la aplicación una vez cargadas las dependencias

Backbone / Lodash

• Backbone, para las vistas, navegación, carga del modelo de datos, etc.
• Lodash (similar a Underscore.js), para mixins y plantillas HTML

Bootstrap

Se opta por Bootstrap para evitar costes en UX

• Componentes HTML / CSS y algunos comportamientos en cabecera
• Facilita que la aplicación sea responsiva, adaptándose a cualquier pantalla, incluso en el caso de aplicaciones nativas.

Otros elementos

• Highcharts, para los gráficos.
• Leaflet, para los mapas. Permite cargar mapas, y capas, desde fuentes diversas, incluso Google Maps.
• SliceSlide para los slides en la predicción de localidades. Permite eventos de toque en pantalla
  https://github.com/jervert/SliceSlide

Y obviamente...

Jquery

Phonegap

• Phonegap permite de un modo sencillo la conversión de una aplicación web en aplicación nativa
• Soporta diversas plataformas: iOS, Android, Windows Phone, Blackberry, etc.

Rendimiento de WebView

• En iOS las aplicaciones UIWebView tienen un rendimiento inferior a las aplicaciones web, ya que ciertas características sólo son soportadas por Safari.
  • iOS 7 UIWebView, still not great
• En el caso de Android ocurre algo similar con su WebView:
  • Hasta la versión 4.4 utiliza el navegador de Android (sin V8, sin WebGL, sin tipografías CSS, etc.)
  • A partir de la 4.4 pasan a utilizar Chrome, lo que supone un gran mejora de cara al futuro para estas aplicaciones.

Rendimiento de WebView

• Phonegap quizá no es lo más adecuado para aplicaciones que sean muy exigentes en recursos, ya que hay plataformas (iOS) que no les dan un soporte adecuado.

¿Construcción local?

Preparar un entorno para generar aplicaciones con Phonegap puede resultar un poco tortuoso:

• Android
  Requiere el SDK de Android y algunas dependencias (Ant, Java JDK...). Soporta las tres plataformas más extendidas: Windows, Linux y MacOs.
• Windows Phone
  Requiere Visual Studio. Fácil de instalar, pero requiere Windows 8 y destroza cualquier aplicación de virtualización que encuentre a su paso, ya que para el emulador instala Hyper-V.
• iOS
  Requiere xCode, sólo disponible en MacOS (y obviamente una máquina de Apple...).

¿Construcción remota?

Existen algunos servicios en la 'Nube' que permiten construir aplicaciones con Phonegap, siendo quizá el más destacado el ofrecido por Adobe: Adobe PhoneGap Build

• Gratuito, limitado a una aplicación simultanea
• Limitación en plugins

Firma digital

En ambos casos se requiere una firma digital para poder distribuir las aplicaciones (Android e iOS), que se pueden conseguir pagando las siguientes cantidades de dinero anualmente (que nos darán derecho a utilizar sus plataformas de distribución):

• iOS: 99$
• Android: 25$ (una cuarta parte...)
• Windows Phone: 19$