Desarrollo de aplicaciones móviles multiplataforma parte 3/3: Corona y Adobe Air mobile y conclusiones

Última parte de una serie de posts sobre desarrollo de aplicaciones móviles multiplataforma. Post relacionados:

NOTA: Al final del post hay una guía rápida para programadores con prisa, que incluye una tabla de características de todas las herramientas.

Adobe Air mobile: ActionScript

Adobe Air mobile funciona con Flex 4 y soporta las plataformas IOS, Android y BlackBerry Tablet, además de los sistemas de escritorio Windows, Mac y Linux (a través de un runtime). Las aplicaciones de escritorio no son directamente compatibles con las de móvil, pues los controles visuales cambian (en concreto, el sistema de gestión de ventanas), aunque la lógica de negocio se puede compartir igualmente.

Flex 4 utiliza el lenguaje de programación ActionScript, que es (por hacer una comparación) un Javascript compilado, de tipado fuerte y con clases, interfaces, herencia y paquetes muy parecido a Java con el que poder hacer complejos desarrollos. El IDE oficial, Flash Builder 4.5 es un IDE muy potente, pero de pago. Es posible compilar y empaquetar las aplicaciones con el Flex SDK opensource y gratuito (basado en Java), aunque con Flash Builder es mucho más fácil e inmediato, ya que proporciona una gran cantidad de wizards y editores. Los controles visuales usados durante el desarrollo y ejecución no son los originales de cada plataforma, sino que son específicos de Flex 4. Esto tiene su lado bueno y su lado malo: en su ejecución los elementos no van tan “suaves” como si fueran nativos, pero nos garantiza que todas las aplicaciones tendrán exactamente el mismo aspecto y comportamiento.

EDITADO: Erik Camacho me indica en un comentario que la aplicaciones generadas con Adobe Air necesitan que el terminal cuente con procesadores con arquitectura Arm7 que son los de gama alta hoy en día. Curiosamente para iOS los requerimientos son mucho menores y funciona desde el iPhone 3G para arriba (3GS, iPad 1 y 2). La razón es que en Android las aplicaciones corren sobre Air mobile, en iOS dado que Apple prohibe esto, corren sobre CocoaTouch directamente, obvio usando su propio set de Elementos para Interfaz de Usuario.

Se pueden depurar aplicaciones (poner puntos de ruptura, etc) en remoto. Es decir, puedes instalar y ejecutar una aplicación en tu Ipad/Iphone y depurarla desde tu ordenador. Una de las peculiaridades es que es la única herramienta que no requiere ni el Android SDK ni el Xcode para Mac para ejecutar y crear las aplicaciones.

Si quieres algunas aplicaciones hechas con Adobe Air mobile, aquí tienes un listado.

Ventajas:

  1. Multiplataforma móvil y también de escritorio.
  2. ActionScript es un lenguaje muy potente que permite el uso de patrones y estructuras complejas en los desarrollos.
  3. Desarrollo y definición de las vistas “a golpe de ratón” con el editor visual de MXML con Flash Builder. En general, el IDE y Flex 4 están muy avanzados y son muy potentes, y la documentación es realmente muy buena. Se nota que Adobe ha hecho un gran esfuerzo en todo el sistema.
  4. Flash Builder 4.5 no requiere el uso de Xcode ni Mac.
  5. Depuración remota.

Desventajas:

  1. El precio de Flash Builder 4.5. Aunque hay otras herramientas y se puede usar el SDK gratuito.
  2. No funciona en todos los Android, solo en los de gama alta que tengan arquitectura Arm7. Consulta el listado de dispositivos certificados por Adobe Air mobile.
  3. Rendimiento regular, renderización no muy suave en IOS. Las aplicaciones Air de escritorio consumen mucha CPU, sobre todo en Mac (aunque siguen trabajando en ello).
  4. Aspecto no nativo (aunque homogéneo entre todas las plataformas).

Ansca Corona: Lua

Corona es un framework para el desarrollo de juegos y aplicaciones gráficas para Iphone/Android. Se desarrolla en Lua y no tiene IDE, aunque si viene con un interprete-emulador y varios ejemplos de juegos bastante espectaculares. No estoy seguro de si hace falta el Android SDK o el Xcode para Mac al construir aplicaciones, pues la versión de prueba no me permitía hacer el build. El precio de la licencia es $199/año para solo una plataforma, o $349/año si es para IOS/Android juntas. Aquí puedes ver el showcase de aplicaciones y algunos videos bastante impresionantes.

Ventajas:

  1. Motor gráfico y físico ideal para juegos.
  2. Lua es un lenguaje bastante sencillo.
  3. Buena documentación, ejemplos y plantillas.

Desventajas:

  1. El precio de la licencia anual.
  2. Aunque se puede usar para cualquier cosa, realmente es ideal para aplicaciones gráficas y juegos al incluir motor físico.

Mis conclusiones

DISCLAIMER: A partir de aquí, todo lo escrito es mi opinión personal y, como tal, puede no coincidir con la de nadie. Así que, ¡no te pongas furioso si lees algo con lo que no estás de acuerdo! siempre puedes escribir un comentario explicando tu propia visión. Sobre mí, decir que tengo experiencia con Flex 3, conozco ActionScript y llevo años (muchos) con Java, HTML y JavaScript, así que es posible que para mi sea una buena elección Adobe Air, mientras que para otras personas no lo será nunca. De todas formas, lo justifico y lo explico detalladamente. Bueno, allá vamos:

Lenguajes

Empezamos hablando sobre el lenguaje de cada una de estas herramientas. Tenemos ActionScript, JavaScript y Lua. Sobre Lua no diré nada: no lo conozco, y dado que Corona está especialmente diseñado para hacer juegos, si tuviera que hacer uno, aprendería Lua y usaría Corona sin pensarlo. Por lo que he visto de Lua, es orientado a objetos (herencia basada en prototipos), imperativo pero con rasgos funcionales y de tipado dinámico y débil, así que concluyo que es muy parecido a Javascript, por lo que no debería haber problemas en hacerse con él en poco tiempo. Pero si no tengo que hacer juegos o una aplicación gráfica, no me molestaría en probar Lua.

Si tengo que elegir entre ActionScript y JavaScript como lenguaje de programación, me quedo con ActionScript. Los dos comparten la misma sintaxis, pues provienen de ECMAScript ¿Diferencias? JavaScript es tipado dinámico débil, y ActionScript es tipado estático fuerte. Los dos son orientados a objetos, pero la herencia en JavaScript está basada en prototipos y la de ActionScript está basada en clases. ¿Todo esto en qué concluye? pues que JavaScript es un lenguaje fantástico y me encanta, pero a la hora de desarrollar una gran aplicación con muchos componentes es más difícil (en mi opinión) estructurarla con JavaScript que con ActionScript, debido a su herencia basada en clases principalmente. Con Javascript tengo que usar trucos y patrones para simular namespaces y otras cosas que ActionScript me da directamente. Por esta razón, mi preferido es Flex frente a Appcelerator y PhoneGap, que usan exclusivamente JavaScript.

Maquetación y layaout

Sobre el sistema de maquetación y diseño de vistas. Appcelerator y Corona no tienen, hay que codificar y colocar los componentes a mano, así que cero puntos para ellos. PhoneGap es HTML5/CSS3 y Flex tiene MXML y su herramienta Flash Builder con un editor visual muy potente. Aquí sobre gustos los colores, pero yo lo tengo claro: prefiero MXML pues su sistema de componentes está especialmente pensado para crear aplicaciones RIA, mientras que HTML5 no deja de ser una evolución más de HTML y está orientado a la creación de documentos. Aunque la creación de RIAs en HTML es perfectamente posible, no deja de ser complicada, pues consiste en un repertorio de trucos con enlaces, formularios, Ajax con los que manipular del DOM y requiere bastante pericia. En este sentido, la jerarquía de componentes de Flex 4, Spark, es imbatible, además de que cada MXML se compila y se transforma en código ActionScript, por lo que nunca tendremos un MXML mal formado, cosa que si puede suceder en HTML. De nuevo, me quedo con Flex 4 primero, y PhoneGap después.

Entorno de desarrollo

Lua no tiene. PhoneGap es una plantilla para trabajar con Eclipse para Android; y con Xcode para Iphone, pero nadie te impide crear tu HTML y Javascript con tu editor favorito. Appcelerator tiene Titanium Studio, que es un Eclipse con el que poder probar tus aplicaciones y que, además, detecta errores en el código Javascript, lo cual se agradece muchísimo. Flex tiene Flash Builder, un entorno basado en Eclipse también muy avanzado y potente. Aquí el ganador es Flash Builer, pues Adobe ha invertido mucho tiempo y esfuerzo en crear un IDE realmente adaptado para incrementar la velocidad de desarrollo en Flex, lleno de wizards, editores y con depuración, sin embargo, es de pago y es bastante caro ($699). El resto son gratuitos, así que dejaría como vencedor segundo vencedor a Titanium Studio.

Componentes

Appcelerator y Corona son los únicos que permiten crear controles nativos de cada plataforma. PhoneGap usa los controles de los formularios de HTML y nada más, así que hay que utilizar un framework como jQuery Mobile, Sencha Touch, etc. Y Flex tiene su propio sistema de componentes. Los ganadores son sin duda Appcelerator y Corona por permitir crear controles nativos. Seguido de Flex con su propio sistema que es muy bueno, pero no deja de ser una implementación propia que hace que a la hora de usarlo se note menos fluidez; empatado, para mi gusto, con PhoneGap y sus frameworks externos a gusto del programador.

Rendimiento

Tenemos que tener en cuenta que los móviles son ordenadores en miniatura y, aunque son potentes, hay todavía algunos con procesadores lentos y poca memoria. Por esta razón, Appcelerator, al usar controles nativos, es el que más suavidad proporciona en la interfaz, seguido de PhoneGap, que la simula con HTML5. Por último tenemos a Flex, que aunque es rápido, no tiene la misma suavidad.

Comunidad, documentación, fiabilidad

Appcelerator y PhoneGap son herramientas jóvenes que todavía les falta para estar acabadas: sus apis cambian, están incompletas y a veces fallan y la documentación es regular. Flex lleva muchos años y tiene a Adobe por detrás trabajando duro, y todos sabemos que es un compañía que hace las cosas muy bien. Y la documentación de Adobe es completa. Me quedo con Flex sin duda.

Distribución

Appcelerator y PhoneGap requieren tener un Mac y pelearse con Xcode para crear aplicaciones IOS. Con Android no hay problemas, pues usan el SDK que es Java y es multiplataforma. Flash Builder permite crear directamente aplicaciones para Iphone, Android y BlackBerry Tablet OS sin usar Xcode ni el SDK Android y en solo un par de pasos: elegir el certificado y creas la aplicación. Me quedo con Flash Builder.

Precio

Appcelerator y PhoneGap son gratuitos, solo hay que pagar para el soporte formación. Flash Builder 4.5 Premium cuesta $699, aunque se puede usar la versión de prueba durante 30 días y hay SDK libres. Corona es gratis para desarrollo, pero requiere pagar una licencia anual de $199 o $349 si quieres subir tus aplicaciones al App Store o Market de Android. Si tienes dinero y no te importa pagar (o te lo paga tu empresa), entonces no importa, sino, las únicas opciones son Appcelerator y PhoneGap.

Vale muy bien, ¿pero cuál elijo?

Yo lo tengo claro. Suponiendo que no voy a hacer un juego (solo Corona) y que quiero hacer una aplicación solo para Iphone y Android (si quiero Symbian, WebOS, WP7 me tengo que ir PhoneGap), primero miraría que características del móvil que necesito usar y ver en que medida están soportadas por cada una de las herramientas en la documentación.

Si no necesito ninguna característica especial o en caso de que esté soportada por todas entonces mediría la complejidad potencial de la aplicación por un lado y por otro la velocidad/suavidad de la interfaz que me gustaría tener. Evaluado esto, usaría Flex si veo que merece la pena perder la suavidad de Appcelerator o PhoneGap con tal de tener una aplicación bien diseñada, robusta y que sé con certeza que usa Apis que no van a fallar. No es que Appcelerator y Phonegap sean un mar de bugs, pero no pueden competir con la fiabilidad y acabado que Adobe ha conseguido con Flex. Si veo que me puedo permitir el lujo de meterme con un diseño peor o simplemente es una aplicación más sencilla, o no me importa usar Apis que pudieran estar incompletas, usaría Appcelerator o PhoneGap. Entre estos dos, tenemos que recordar que PhoneGap es HTML5/CSS con Javascript, y Appelerator es Javascript puro con controles nativos. Así que evaluaría si quiero tener un acabado nativo con Appcelerator a costa de no disponer de un diseño visual, y tener que probar la aplicación siempre en el simulador. Pero si prefiero un diseño visual de las vistas, que además puedo probar en el navegador de mi ordenador, usaría PhoneGap con un framework mobile que además me garantiza que se va a ver exactamente igual en cualquier dispositivo.
Y para acabar, me quedo con esta frase de Jano que puso en un comentario en el primer post de la serie:

  • “Al usar estos frameworks multiplataforma hay que tener en cuenta que tu inversión en aprendizaje depende de la suerte de sus respectivos fabricantes, es toda una apuesta.”

Guía rápida para programadores con prisa

Si tienes que elegir una plataforma para YA y no no te quieres leer todos los posts, no te culpo. Aquí pongo una serie de reglas personales que yo aplicaría si tuviera que elegir.

  • Solo usaría Corona exclusivamente para hacer juegos o aplicaciones gráficas.
  • Para alguien que sepa Javascript y no sepa o no quiera aprender Flex ni ActionScript, la opción de Adobe Air/Flex queda descartada.
  • Si tengo prisa o el proyecto es muy simple y elemental, usaría PhoneGap, ya que la interfaz es HTML y me permite maquetar muy rápido usando una plantilla.
  • Si no tengo Mac y quiero desarrollar aplicaciones IOS, usaría Adobe Air ya que es el único que me permite crear aplicaciones IOS sin Mac. Aunque también podría virtualizar un Mac OS, o pediría prestado/compraría un Mac :)
  • Si necesito hacer una aplicación para muchos dispositivos móviles (como Symbian, Palm, WebOS) con la máxima compatibilidad entre ellos, usaría PhoneGap, ya que el uso de HTML5 me garantiza que se verá igual en todos los dispositivos.
  • Si tuviera que hacer una aplicación realmente compleja y grande (de lógica de negocio me refiero), usaría Flex, ya que ActionScript me permite una mejor estructuración de mi código.
  • Si quiero que el rendimiento sea el más rápido, no usaría Flex, sino PhoneGap o Appcelerator. Y si quiero controles nativos, usaría Appcelerator.

Y aquí una tabla-resumen con las características de cada sistema y plataforma (no incluyo todas las de PhoneGap, solo las que he creído más importantes). He coloreado en rojo lo que me parece un punto negativo, en amarillo lo que es neutral y en verde lo positivo. De nuevo, es mi opinión, y puede no coincidir con la de nadie.

Y nada más. Voy a seguir probando todas las herramientas en profundidad y espero acabar haciendo un ejemplo de una aplicación real, más allá del hola mundo, en cada una de ellas. Aunque me consta que ya hay quien lo ha hecho: los chicos de Tidyslice han hecho la misma aplicación para todas estas plataformas y está en un repositorio Github público: litros de a litro. Si quieres que haga un tutorial usando alguna herramienta específica, escríbeme un comentario (¡todo feedback es bienvenido!)

Si todavía te han quedado ganas de leer, aquí pongo algunos enlaces, ¡pero no te acuestes tarde!

16 thoughts on “Desarrollo de aplicaciones móviles multiplataforma parte 3/3: Corona y Adobe Air mobile y conclusiones

  1. Buenas Alberto.

    Un offtopic: el anchor a los comentarios no (me) funciona (el enlace a #comments que hay en la información del post). El h2 que hay al comienzo de los comentarios tiene un class comments en vez de un id, supongo que es por eso :-).

    Un saludo y gracias por estos estupendos posts, tienen pinta de tener un buen curro detrás :-).

  2. Muy buenos los 3 post, me los leí desde url hasta el copyright :D:D (desde arriba hasta abajo).
    Me parece interesante, normalmente es el conpendio que uno busca (compendio porque considerando lo extenso que que sería si lo investigamos por nosotros mismos).
    Es un tema que me atrae pero hasta el momento no he tenido algo específico por hacer, así que por el momento me dedico a leer.
    Te felicito y agradezco por compartir esta información.
    Saludos,

  3. Hola Alberto, muy buenos los artículos. Sobre Adobe Air quería comentar un poco más. En nuestra empresa tenemos mucho expertise con Flex y Air así que se nos hizo una buena opción, sobre todo para Android (para iOS tiramos por Obj-C) pero al final lo descartamos muy a nuestro pesar porque sólo funciona en alrededor de 30 de los 300 móviles con Android. (lista http://www.adobe.com/flashplatform/certified_devices/) y es por tema de performance.

    Adobe Air necesita que el device cuente con procesadores con arquitectura arm7 que son los de gama alta hoy en día. Curiosamente para iOS los requerimientos son mucho menores y funciona desde el iPhone 3G para arriba (3GS, iPad 1 y 2). La razón es que en Android las apps corren sobre Air mobile, en iOS dado que Apple prohibe esto, corren sobre CocoaTouch directamente, obvio usando su propio set de Elementos para Interfaz de Usuario.

    • Gracias por tu comentario. En IOS ya me he fijado que para generar la aplicación, hace una transformación que tarda varios minutos, para saltarse el runtime. Aún así, va rápido, pero se nota brusco. Para Android no lo he probado, pero viendo lo que comentas, es un punto menos para tenerlo en cuenta. Lo voy a añadir al artículo, pues me parece muy interesante.

  4. Oye Alberto y que te parece la posibilidad de programar Apps que no sean juegos con el Google App Engine, para mi es comodisimo viniendo del mundo Java no abandonar ese lenguaje para crear cosillas para dispositivos móviles.

    • Google App Engine es una tecnología de servidor para programar aplicaciones web, ya sean para móviles o no, usando Java/Python y la plataforma de Google (BigTable, etc). Si te haces con sus restricciones y te sientes cómodo, es una gran opción :)

  5. Excelente los tres posts Alberto, muchas gracias!!

    La verdad q me vienen “al pelo” como decimos en Argentina ya q justamente esta semana me puse de cabeza a investigar para hacer aplicaciones mobile(soy programador web), y una de mis primeras dudas es si hacer aplicaciones Web o Nativas, y de ser estas ultimas, que herramientas usar.
    He estado leyendo muchos articulos, blogs, etc, siempre tratando de buscar pros y contras de cada cosa y de a poco(y sobre todo con estos 3 posts) ya estoy aclarando mucho mas el panorama.

    Yo vengo de muchos años de programar aplicaciones web con HTML, CSS, JS, XML, ASP, PHP, SQL etc, etc, etc… y estaba buscando de aprovechar esos conocimientos, es por eso q me estaba gustando PhoneGap y Titanium, pero lo q me frena un poco es q aun estan un poco “verdes” en cuanto a bugs y documentacion, ademas de q no quiero invertir tiempo en algo q alomejor en unos meses se deje de utilizar, un poco por lo de “la suerte de los fabricantes” como te dijo Jano, y otro poco porq como desarrollador web creo q con el tiempo las aplicaciones web tomaran mas importancia y poder q las nativas asi como sucedio con las aplicaciones Win32, etc, frente a las aplicaciones Web.

    Por lo q vengo viendo creo q primero tendre q decidir q tipo de aplicacion o q alcances tendra la aplicacion a desarrollar y luego de eso ver q opcion me es mas conveniente, PhoneGap, Flex, Titanium o directamente una aplicacion Web ; ).

    Saludos y gracias nuevamente.
    Marcelo desde Argentina!

    • Me alegro de que te hayan gustado y espero que te sirvan para tomar la decisión acertad. En breve voy a poner un nuevo post con nuevas conclusiones, debido a un par de características nuevas que hay que tener en cuenta sobre estas herramientas, y que hacen que puedan cambiar la elección.

  6. Me encantaron los 3 articulos, me aclararon bastante la pelicula, sobre todo ahora que tengo que hacer una app para moviles, prefiero que sea grafica, asi que me voy por CoronaSDK, la cual tiene hartos plugins hechos por la comunidad y la mayoria son free.

    Solo debo acotar que CoronaSDK es gratuito para trabajar, bajas el emulador y ya puedes probar en tu PC o Mac, pero si quieres compilar para hacer deployment, debes pagar la licencia.

  7. Gracias por estos articulos. Me vienen muy bien para desarrollar rapidamente un prototipo de una idea que tengo en mente.
    Salud!

  8. Hola!…primero que nada muchas gracias! tu articulo me a iuminado en mi nuevo camino con flex mobile!!..
    Mas me gustaria preguntar a alguno de ustedes si supiera la respuesta!…Creo unas aplicaciones en flex! y me e decidido a comprar una tablet que me dice las siguientes carateristicas:
    Modelo: Flytouch 2 HDMI
    Procesador: ARM 11 1GHZ
    Plataforma: Android 2.1

    Mi pregunta es?? esta tablet me podria servir para correr mis aplicaciones FLEX Mobile?? :) Gracias amigos!

Comments are closed.