Cafe Geeks: Desarrollo de aplicaciones móviles multiplataforma parte 2/3: Phonegap y Titanium Appcelerator

Parte 2/3 de una serie de posts sobre desarrollo de aplicaciones móviles multiplataforma. Post relacionados:

PhoneGap: HTML5/CSS3/JS

PhoneGap es un sistema para crear aplicaciones usando exclusivamente HTML5, CSS3 y Javascript, ejecutadas dentro en un componente WebKit del móvil. Provee una serie de librerías Javascript desarrolladas en el lenguaje específico de cada plataforma (Objetctive-C para IOS, Java para Android, etc) que nos permiten acceder a las características del móvil como GPS, acelerómetro, cámara, contactos, base de datos, filesystem, etc. Al ser una página web, tenemos acceso al DOM y podemos usar frameworks web como jQuery o cualquier otro. Requiere diseñar tu aplicación web con los componentes visuales típicos del HTML, etc o usar un framework web mobile como jQuery Mobile o Sencha Touch entre otros. Tiene la ventaja de que puedes definir la navegación inicial de la aplicación usando el Chrome o el Firefox de tu ordenador, sin tener que ejecutarla en el simulador.

En resumen, podemos ver una aplicación PhoneGap como una serie de páginas web que están almacenadas y empaquetadas dentro de una aplicación móvil visualizadas con un navegador web, con acceso a la mayoría de Apis del móvil, lo cual lo convierte en una alternativa muy sencilla para crear aplicaciones.

Para trabajar con cada plataforma hay que usar un sistema distinto: para Iphone/Ipad es necesario usar Xcode (solo disponible en Mac) y una plantilla de proyecto que proporciona PhoneGap. Para Android se debe usar Eclipse (Windows, Mac y Linux) y otra plantilla de proyecto específica. Y para Blackberry no hay entorno: solo Java SDK, BlackBerry SDK y Apache Ant.

Aquí puedes ver una tabla con las apis soportadas por PhoneGap en cada tipo de dispositivo: PhoneGap supported features, y aquí algunas aplicaciones hechas y algunas utilidades y herramientas que podemos usar para ayudarnos al desarrollo.

Ventajas:

Es la solución que más plataformas móviles soporta, ya que corre dentro de un navegador web. Además de Iphone/Ipad y Android, funciona también en Palm, Symbian, WebOS, W7 y BlackBerry,
Es muy fácil de desarrollar y proporciona una gran libertad a los que tienen conocimientos de HTML y Javascript.
Hay buena documentación y bastantes ejemplos.
Es gratis, soporte de pago. Licencia BSD.

Inconvenientes:

Requiere Mac con Xcode para empaquetar aplicaciones IOS.
La aplicación no es más que una página web, por lo que el aspecto dependerá del framework web utilizado. Necesitaremos el uso de frameworks HTML móviles como Sencha Touch, jQuery mobile, Jo, Sproutcore, XUI, jQTouch si queremos que parezca una aplicación nativa.
No llega al rendimiento de una aplicación nativa, pues el HTML, CSS y Javascript debe ser leido e interpretado por el engine del navegador cada vez arranca.

Titanium Appcelerator: JavaScript

Con Appcelerator es posible crear aplicaciones para Android, Iphone y, además, de escritorio, usando exclusivamente Javascript (el soporte para Blackberry está en fase beta). Puedes ver una lista de entornos y plataformas soportados aquí: Titanium compatibility matrix. Para programar proporciona Titanium Studio, un IDE basado en Eclipse con el que crear los proyectos y editar los ficheros Javascript y el resto de recursos y lanzar los scripts de creación.Experimentalmente, permite usar Php, Ruby y Python también, pero transformando el código después en Javascript con los frameworks Phpjs, Skulpt o Ruby.js.

Aplicaciones móviles

Las aplicaciones se programan integramente con Javascript, creando y colocando “a mano” todos los controles, usando para ello una librería que hace de puente entre tu aplicación Javascript y los controles del sistema. Esto significa que las ventanas y demás controles visuales (botones, listas, menus, etc) son nativos: cuando se añade un botón, se crea un botón del sistema y se añade a la vista, lo que lo hace más rápido de renderizar y la respuesta del usuario es también la más rápida. A diferencia de PhoneGap, en Appcelerator no hay DOM, por lo que no se pueden usar librerías como jQuery que sirven para manipularlo, ya que el contexto de ejecución es Javascript puro, no dentro de un documento HTML.

Controles nativos y javascript compilado

Una de las características más interesantes de Appcelerator (y que más confusión produce, debido a que se vende como una generador de aplicaciones nativas: the native advantage), es que al empaquetar la aplicación, el Javascript es transformado y compilado. Después, cuando se arranca la aplicación en el móvil, el código se ejecuta dentro de un engine Javascript, tal y como dice la documentación oficial, que será JavaScriptCore en IOS (el intérprete de Webkit, el motor de Safari y Chrome) y Mozilla Rhino en Android/Blackberry. Si fuera compilado y ejecutado exclusivamente como Objective-C, como mucha gente piensa erróneamente, no serían posible las capacidades dinámicas que tiene el lenguaje Javascript en tiempo de ejecución. Para saber más sobre como Titanium “compila” Javascript y hace “aplicaciones nativas” ver este post y este.

El hecho de que el Javascript esté compilado y que los controles creados sean nativos, le hace tener el mejor rendimiento posible (teniendo en cuenta que es Javascript, claro) en comparación con PhoneGap o Adobe Air para móviles.

Maquetación

Con Appcelerator es complicado maquetar, pues no existe un HTML inicial donde añadir los controles, sino que hay que crear las ventanas y componentes “a mano” con Javascript. Aún así, se pueden añadir componentes WebKit donde introducir HTML, pero solo se recomienda hacer cuando es absolutamente necesario para mostrar texto con formato, etc (ver este postdonde explican cuando usar y cuando no usar HTML). También es posible crear un único componente Webkit a pantalla completa, y trabajar de manera parecida a como lo hace PhoneGap.

Poro otro lado, puede que algo que se desarrolle para Iphone no funcione para Android, y viceversa. Los desarrollos de las librerías Javascript evolucionan por separado y hay que mirar bien qué se puede hacer y cómo. A diferencia de PhoneGap, que solo tiene una librería Javascript para acceder a las características especiales del sistema, Appcelerator necesita además librerías para manejar los controles nativos y su disposición en la pantalla, por lo que el desarrollo en general es más costoso.

Soporte IOS y Android

Sobre el soporte para Iphone/Ipad, es necesario tener Mac con Xcode 4 instalado, el entorno de desarrollo oficial de Apple para aplicaciones Mac y IOS, que es gratuito (antes costaba 4.99€). Lo que hace Titanium Studio es generar un proyecto Xcode con el Javascript transformado junto con todas las librerías necesarias (tarda un poco, lo hace con unos scripts en Python que tiran del SDK de Iphone que tiene Xcode). Después es posible lanzar el simulador con la aplicación en Xcode sin salir de Titanium Studio. Una vez generado el proyecto, éste se puede abrir con Xcode y continuar empaquetándolo y configurándolo para su distribución (certificados, provisioning, logos, splash screen, etc). Desde Xcode no se puede editar el Javascript, pues para eso habría que volver a Titanium Studio y regenerar el proyecto Xcode otra vez. Seguramente sea posible que Titanium Studio ejecute o genere la aplicación en IOS directamente mediante scripts, sin usar Xcode, pero no lo he conseguido (hay dos opciones “Run iOS Device” y “Distribute App Store”)

Sobre el soporte Android, tanto para probar en el simulador como para empaquetar la aplicación, solo hay que tener el SDK de Android instalado.

Soporte de escritorio: Windows, Mac y Linux

En este caso Appcelerator funciona de manera parecida a como lo hace PhoneGap. Las aplicaciones se crean con HTML, CSS3 y Javascript, por lo que se puede usar jQuery o cualquier otra librería Javascript (ahora si que existe DOM). De hecho, la aplicación es un WebKit, al igual que PhoneGap. El único problema grave que he visto es que cuando se empaqueta y distribuye la aplicación, todos los htmls, js y demás archivos aparecen en claro en la carpeta de la aplicación una vez instalada y pueden ser vistos y modificados. Otra pega es que es necesario hacer la exportación a cada sistema operativo desde ese mismo sistema operativo. Es decir, que para crear una aplicación final para Windows se debe hacer desde Windows, y que para crear una aplicación Mac, se debe hacer desde Mac (no he probado le versión Linux, pero me imagino que igual). (EDITADO: Me cuenta Dan Tamas en los comentarios que Appcelerator te deja empaquetarlas en sus servidores para los tres sistemas operativos de una sola vez)

Podemos ver y probar una aplicación de ejemplo para escritorio y para móviles. Se trata de un cliente de Twitter llamado Tweetanium, aquí tenemos el código fuente y descargas para todas las plataformas, y aquí la página de la aplicación en la App Store de Mac. Otra aplicación interesante creada con Appcelerator Wunderlist. Y en showcase de la página oficial haymuchas más.

Ventajas:

Multiplataforma móvil y también de escritorio.
Aspecto y controles nativos. El mejor rendimiento.
Buenos ejemplos (el KitchenSink tiene prácticamente todo lo que se puede hacer)
Gratis, soporte de pago. Licencia Apache.

Desventajas:

Requiere Mac y Xcode para empaquetar aplicaciones IOS.
Definición de componentes visuales y controles “a mano” (PhoneGap es HTML y Flex es MXML)
Mucha documentación pero poco actualizada y descolocada, tutoriales desfasados, poco profesional (en mi opinión)
El IDE y las aplicaciones fallan a veces, no he podido exportar ni arrancar una aplicación Iphone desde el IDE, he tenido que hacerlo desde Xcode.
Las aplicaciones de escritorio se distribuyen con el código fuente en claro (html, js, css, imágenes, todo)

Fin de la parte 2/3. Continúa en Desarrollo de aplicaciones móviles multiplataforma parte 3/3: Corona y Adobe Air mobile y conclusiones