jQuery Mobile para webapp

Tras un par de meses de duro trabajo hemos conseguido desarrollar y publicar la app para iOs de Autoescuelas EL PILAR. El reto que nos planteamos al principio del desarrollo era poder demostrar que las webapps podían ser una alternativa real y prometedora a las aplicaciones nativas. En este post, os mostramos las conclusiones que hemos obtenido.

La aplicación

La aplicación desarrollada es una webapp escrita en HTML5 y jQuery que realiza peticiones AJAX al sitio web del cliente. El empaquetado para las plataformas móviles se realizó con las diferentes versiones de cordova – phonegap:

  • Primero utilizamos el servicio Phonegap Build de Adobe
  • Luego instalamos Phonegap en nuestras máquinas.
  • Al final nos decantamos por Cordova.

Además, del lado del CMS, en este caso WordPress, desarrollamos un plugin que respondiera a las peticiones de la aplicación.

El Nucleo

Desarrollar el nucleo de la aplicación, (HTML5 + jQuery Mobile) y el plugin WordPress no nos ocupó más de un mes de trabajo. Lo cierto es que aunque era la primera vez que usábamos en un proyecto final la versión Mobile de jQuery, nuestra experiencia con jQuery nos facilitó enormemente el trabajo y en seguida nos adaptamos a la metodología de programación.

Este es el punto fuerte de jQuery Mobile: la sencillez de uso, la enorme cantidad de widgets y layouts disponibles, así como la customizacion mediante el uso de temas que se puedan diseñar on-line con el theme-roller.

La adaptación

pantallazo-iphone-elpilarjQuery Mobile nos permite desarrollar webs optimizadas para dispositivos móviles pero presenta algunas deficiencias a la hora de crear webapps locales (que es lo que deben ser las webapp que pretenden emular la experiencia de las aplicaciones nativas). Me explico: Si queremos desarrollar una web-app que se almacene en un servidor web y permita su ejecución en plataformas móviles jQuery Mobile es una solución optimizada, eficiente y bonita (si se me permite cierta imparcialidad). jQuery Mobile está muy optimizado para el desarrollo de un sitio web con múltiples páginas que se enlazan entre sí. En este caso,el usuario, que accede desde el navegador web de su móvil, asume los tiempos de carga entre páginas porque sabe que está navegando por internet. Pero cuando el usuario ejecuta una app nativa espera que los tiempos de carga entre las diferentes views o secciones de la aplicación sean prácticamente inexistentes.

Todo el  HTML de nuestra app iba a ser local, salvo, evidentemente, los contenidos  que se obtendrían de las peticiones AJAX al CMS. En este aspecto el modelo de navegación y transiciones implementado por jQuery no está pensado para cargar contenido que ya existe localmente.

En fin, que este proceso de adaptación nos ha ocupado más tiempo que el consumido por el desarrollo de la propia app.

La experiencia de usuario

Al darnos cuenta de que los tiempos de carga no eran los que cabría esperar de una aplicación nativa empezamos a realizar múltiples pruebas así como innumerables búsquedas en San Google. Estas son nuestras conclusiones:

  • En muchos foros aparece la solución al problema del delay programado en webviews: Este retraso no afecta a jQuery Mobile y ha sido hackeado por el propio framework.
  • Curiosamente las transiciones móviles (slide, flip) funcionan peor en android que en ios. Solución en ios utilizamos transiciones flip y en android fade.
  • Dado que resultaría muy complejo simplificar el modelo de navegación de jQueryMobile para que se adapte a contenido únicamente local, decidimos engañar un poco al usuario.

El pequeño truco

Cuando tocamos en algún menú o elemento de nuestro teléfono móvil esperamos una respuesta inmediata. Esa es la experiencia de usuario de aplicación nativa. ¿Cómo trasladar esa sensación al usuario? Engañándolo un poco.

En nuestro caso interceptamos el evento ‘tap’ de los items de menú para que muestre una animación de cargando en el propio botón. De esta manera el usuario percibe que su acción recibe una respuesta inmediata, la de que algo está cargando, y ya no importa tanto que la carga real de la sección de destino se demore unas décimas de segundo.

Evidentemente nuestra app no es una aplicación nativa pero el usuario final no notará significativamente esta diferencia.

Conclusión

La conclusión es que sí se pueden crear aplicaciones web que emulen la experiencia de usuario de apps nativas. La prueba la tenéis en esta aplicación (con variaciones es la misma en IOS que en Android).

De todas formas quiero indicar que al final del proceso de adaptación descubrimos CHOCOLATE-CHIP-UI y aunque ya era un poco tarde para utilizarlo en este proyecto decidimos marcarlo como Favorito para nuestro próximo desarrollo… y en esas andamos: Muy pronto publicaremos una webapp para ios en la que utilizamos Cordova + Chocolate-chip-ui + WordPress.

 

 

aidiapp

C/Bernardo Martín Pérez,3

Salamanca-Spain-Europe

0034-923 257 339