¿Existe el Santo Grial del desarrollo móvil multi-plataforma?
Voy a hablar de dos realidades. Las primera es que en este mundo hay una app para todo. Y la otra, es que a los programadores no nos gusta hacer lo mismo muchas veces. Veamos que tienen en común ambas realidades.
Como las apps las hacemos programadores, siempre pasamos un mal rato al encarar el desarrollo móvil, porque para hacer una aplicación y que esta pueda estar disponible para la mayoría de las personas, deberemos escribir la misma aplicación dos veces mínimo. Y al los programadores no nos gusta eso.
Si nos basamos únicamente en las herramientas oficiales, para hacer una aplicación que soporte las tres plataformas mas difundidas (iOS, Android y WindowsPhone), tenemos que conocer 3 lenguajes distintos: Objetive-C (¡puaj!), Java y C#. Tenemos que utilizar 3 entornos distintos: Xcode para iOS, Android Studio para Android y Visual Studio para Windows Phone. Y obviamente, tenemos que escribir nuestra aplicación 3 veces, una vez en cada lenguaje.
El resultado de lo anterior, es que tendremos la mejor aplicacion para cada plataforma, pues utilizaremos las herramientas mas apropiadas para cada una.
Como contra de esta forma de trabajo, esta el costo del desarrollo. Si bien las herramientas en su mayoría son gratuitas, si quieres desarrollar en las 3, necesitaras 3 programadores (uno para cada plataforma) o uno (que conozca las 3), pero que tardara 3 veces mas.
La otra contra es que, hay que forzosamente reescribir el código 3 veces por al menos dos razones. La primera es que la forma como encara cada plataforma el concepto de aplicación es diferente, por lo que algunas cosas tienen que hacerse de una forma completamente distinta a como lo haríamos en las demás.
La otra es que son lenguajes bastante distintos. Si bien en el fondo hay ciertas similitudes entre Java y C#, Objetive-C no se parece en nada a los anteriores (y en lo que a mi respecta, carece de sentido perder tiempo en aprenderlo)
Dicho lo anterior, no es de extrañar que existan muchas herramientas para desarrollar apps multiplataforma bajo una premisa simple: escribe tu app una vez, y correla en todas las plataformas casi sin cambios. Lo que muchos consideran lisa y llanamente, magia.
No somos pocos los programadores que, antes estas propuestas tan tentadoras, nos sumergimos a investigar que nos conviene. Tal como Indiana Jones buscaba el santo grial que de forma milagrosa brindaba la inmortalidad a quien lo utilizara, los programadores nos sumergimos en este mar de soluciones tratando de encontrar una solución mágica y/o mística para desarrollar aplicaciones móviles.
La duda es: ¿Existe una solución perfecta? ¿Cual deberíamos aprender?.
Bueno, voy a hablar de 4 soluciones que he probado con sus virtudes y defectos. Existen otras, que agregare eventualmente.
Antes de empezar es bueno recordar algunos puntos importantes, especialmente si son principiantes en el mundo del desarrollo móvil. El primero es que para desarrollar y publicar apps para iOS, si o si necesitamos una Mac corriendo la ultima versión de OSX. Para desarrollar y publicar apps para Windows Phone y el Store de Windows (UWP), tenemos que tener una PC con Windows 10. De modo que necesitan forzosamente 2 ordenadores para alcanzar las 3 plataformas principales. Si solo necesitan publicar en iOS y Android, solo necesitan una Mac.
El otro punto es el testeo de las aplicaciones. Si bien es común utilizar simuladores o emuladores para testear las aplicaciones mientras las desarrollamos, es muy recomendable no publicar aplicaciones que no hayamos testeado en dispositivos reales, en particular entendiendo que existe una gran cantidad de tamaños de pantallas con numerosas densidades de pixeles que hacen que lograr que la interface se vea bien en todos los dispositivos sea un poco difícil en algunas situaciones. De modo que, tengan dispositivos para probar lo que desarrollan.
Ahora si, el análisis propiamente dicho.
Phonegap/Cordova
La opción multiplataforma más longeva de las que analizaremos es Cordova y en particular su distribución mas importante y completa, que es Phonegap. Con 7 años de existencia y con el respaldo de la fundación Apache y de Adobe, es la opción que brinda compatibilidad con la mayor cantidad de dispositivos, pues soporta 8 plataformas, incluyendo Blackberry 10 y Ubuntu.
La premisa de Phonegap es simple: si conoces HTML5, CSS y Javascript, puedes hacer aplicaciones móviles. Y así es.
Phonegap permite reutilizar nuestros conocimientos previos de programación web y con ellos armar aplicaciones móviles que corran en cualquier plataforma soportada por Phonegap. ¡Y funciona!
Las aplicaciones hechas con Phonegap corren dentro de un browser en el dispositivo móvil (un web view). Pero es un browser con vitaminas, porque expone las características básicas del dispositivo para utilizarlas desde el código. Es así que podemos acceder a la cámara, los sensores, el audio y demás características, de forma simple y sin tener que cambiar de código entre plataformas.
Para escribir nuestra interface de usuario, podemos utilizar la librería Web que más nos guste: AngularJS, Ionic, Onsen, Telerik, React, Framework7, Bootstrap, VueJS, bueno, con casi todos.
Al ser una plataforma abierta y madura, tiene soporte de muchas empresas grandes. Por ejemplo Intel, tiene un entorno, llamado Intel XDK, que permite crear aplicaciones de forma bastante simple. Incluso Microsoft, tiene soporte para desarrollar y depurar aplicaciones Cordova dentro de el poderoso Visual Studio.
Ahora bien, esta lejos de ser perfecta como solución. Los puntos más criticados son la performance y el aspecto de las aplicaciones.
La performance es un tema a tener en cuenta, pues el código corre interpretado en el momento dentro de un web view. Esa capa extra hace que, aún pese a todas las optimizaciones que tiene las plataforma, en ciertos escenarios las aplicaciones ser comporten mucho más lento que una aplicación nativa.
El otro punto complejo de Phonegap es que las interfaces de usuario, al estar escritas en HTML5, ser ven un tanto extrañas, pues difieren bastante en apariencia y comportamiento con las aplicaciones nativas. Si bien existen algunas librerías para escribir interfaces que generan un look and feel similar al nativo, se complica un poco mantener dicha apariencia al escribir componente no contemplados en dichas librerías.
Si queremos aprender a utilizar estas tecnologías, existe una excelente documentación y tutoriales que nos permitirán conocer las características disponibles en cada plataforma.
Pros
- Gran cantidad de plataformas soportadas
- Poder escribir aplicaciones móviles con tecnologías web.
- De código abierto.
- Existen varios entornos de programación como Visual Studio o Intel XDK que simplifican el desarrollo y publicación de aplicaciones en esta plataforma.
- La curva de aprendizaje no es tan compleja si tenemos conocimiento de tecnología web.
Contras
- Baja performance en aplicaciones mas complejas o en dispositivos con recursos técnicos más limitados.
- Interfaces no nativas que pueden en algunos casos dificultar el uso si el usuario no tiene mucha experiencia.
- Puede ser frustrante la performance
NativeScript
Con el soporte de Telerik, famosos por sus librerías de controles de interfaces para numerosos sistemas y lenguajes, llega NativeScript, con la promesa de dejarnos escribir aplicaciones nativas utilizando Javascript.
Para lograr su objetivo, esta pensando desde el vamos en la metodología MVVM, o "model view viewmodel". De esta forma, separa la lógica de la capa de presentación (el view), permitiéndonos escribir los models y view models en Javascript, la interfase en un dialecto de XML que describe los componentes que se dibujarán en pantalla, y además nos permite customizar la interface utilizando un subset de CSS.
No se confundan. Que se escriba el código en Javascript, y que soporte CSS, no implica que sea una versión mejorada de Phonegap. NativeScript genera interfaces nativas 100% en base al XML que escribimos y permite ejecutar la lógica utilizando una potente engine de Javascript.
¿Pero, es una aplicación nativa si en definitiva ejecuta código escrito en Javascript?. Podríamos decir que es un hibrido, aunque no al nivel de Phonegap. Si bien el código JS corre interpretado, lo hace dentro de un entorno de ejecución altamente optimizado, por lo que la velocidad se asemeja muchísimo a la velocidad del código escrito en lenguajes nativos. Aun así, una contra, es que el código se ejecuta solo si la aplicación esta activa, pues el intérprete corre sobre la capa de interface. Si bien existen formas de correr proceso en segundo plano, le suman muchísima complejidad a lo relativamente simple que es desarrollar en esta plataforma.
Al estar basado en Javascript, tiene soporte de paquetes NPM, tanto escritos para NativeScript como para NodeJS, lo que le da una versatilidad increíble al momento de encontrar librerías que nos ayuden con tareas especificas.
La interface que describirnos en el XML (Que nos recuerda en parte a XAML y AXML), describe componentes que NativeScript genera instanciando clases nativas de cada plataforma. Esto permite que las interfaces sean completamente nativas, y con un funcionamiento igual al que el usuario esta acostumbrado acorde a la plataforma que utiliza, lo que facilita la operación de la misma. Adicionalmente, tiene incorporados módulos de animación que nos permiten hacer interfaces mas dinámicas y llamativas.
La versión 2, recién salida, agrega soporte a TypeScript y Angular 2, de modo que podemos compartir código y lógica entre nuestras aplicaciones web y móviles, siempre generando aplicaciones nativas. Aun no tuve oportunidad de probar estas características, pero los previews disponibles muestran la gran flexibilidad que va cobrando esta plataforma.
Si hablamos de IDE, al estar basado en tecnologías preexistentes, se puede utilizar el editor de nuestra preferencia para escribir el código. En mis pruebas utilice Visual Studio Code, que se comporto perfecto para poder desarrollar una app simple.
El punto que puede intimidar a algunos recién ingresados al mundo de la programación, es que las herramientas de compilación y prueba de esta plataforma son por línea de comandos. Igual, si a un programador lo intimida la línea de comandos mucho tiempo, yo desconfío.
Valiéndose de estas herramientas, se pueden generar los ejecutables, y probarlos tanto en simuladores como en dispositivos físicos. Una característica remarcable es el modo LiveSync, que permite sincronizar los cambios a medida que los vamos grabando, sin necesidad de recompilar y volver a subir toda la aplicación al dispositivo cada vez que realizamos un cambio. Muy útil para probar en simuladores o en dispositivos nuestros cambios, en particular, al hacer cambios en el CSS de la interface.
Es de agradecer que en la pagina de NativeScript, existen tutoriales y una creciente documentación sobre componentes y demás características del sistema. Aun si, deberemos recurrir bastante a la misma, en particular para aprender las nuevas características pues al estar en constante desarrollo suelen haber cambios de implementación o nuevas características que nos simplifican (o complican a veces) la vida.
De momento, solo permite generar aplicaciones para iOS y Android, pero ya existe un preview que permite generar aplicaciones para Windows, aunque aun le falta madurez.
La curva de aprendizaje, si ya tenemos idea de MVVM, es bastante simple. Y gracias a la existencia de tutoriales, ejemplos y una buena comunidad a la que recurrir para despejar nuestras dudas, podemos conocer más a fondo esta plataforma a medida que la utilicemos.
Pros
- Desarrollo basado en MVVM
- Interface nativas en cada plataforma
- De código abierto.
- Buena performance, muy similar a las aplicaciones nativas.
- Curva de aprendizaje simple, basada en conocimientos previos de XML, JS y CSS.
- Soporte de paquetes NPM
- Modo LiveSync
Contras
- Solo limitado a Android e iOS de momento.
- El código Javascript corre en la interface, lo que complica realizar tareas en segundo plano.
- El subset de CSS que soporta no permite todo el control sobre los componentes que uno querría.
Fuse Tools
Este es el recién llegado al club. Con poco tiempo en el mercado, me ha dejado una muy buena impresión. Siguiendo la forma de trabajo de NativeScript, Fuse nos permite obtener interfaces muy veloces y un desempeño muy, pero muy similar, al de herramientas nativas. Sin embargo, no es lo mismo que NativeScript.
Fuse esta orientado mas a Diseñadores, pues es posible escribir una aplicación con una compleja interface de usuario e incluso animaciones solo con un lenguaje de Markup (similar al HTML). Este Markup se compila a una interface nativa en C++, lo que permite que sea ágil en el uso y con animaciones muy fluidas.
De modo que un diseñador con algo de conocimiento de como funciona un lenguaje de markup podría hacerlo. Y siendo que muchísimos diseñadores hacen el maquetado, no encontraran problemas en aprender este lenguaje y crear aplicaciones sin programar (o algo así).
Para poder editar las aplicaciones, Fuse provee plugins para Sublime Editor 3 y para Atom, aunque hay plugins en desarrollo para otros editores. Estos plugins, sumados a la herramienta de gestión de Fuse, nos permite, y casi sin utilizar la línea de comandos, probar nuestras aplicaciones en dispositivos o emuladores, algo que sin duda los diseñadores agradecerán.
Al igual que NativeScript, incluye un modo Live Preview, que permite que los cambios en el código se reflejen en el simulador sin tener que recompilar la aplicación.
Lo anteriormente dicho, no quiere decir que sea solo para diseñadores. Al igual que NativeScript, permite ejecutar código Javascript, aunque de forma inline. Pero no se queda ahí, pues se pueden escribir módulos mas complejos utilizando el lenguaje Uno, una versión customizada de C#, en el que se pueden escribir módulos de un poco mas bajo nivel.
Al estar en desarrollo, constantemente hay cambios y mejoras en la plataforma, lo cual es de agradecer, pues esta aun en beta y no tiene una release estable.
Con relación a la documentación, si bien esta bien organizada, aun esta un poco incompleta en ciertos temas, por lo que es necesario utilizar el foro disponible para obtener ayuda en topicos mas complejos.
La curva de aprendizaje es bastante simple si uno conoce un lenguaje de markup. Y mas simple aun, si uno sigue los ejemplos y tutoriales disponibles en la pagina y en el canal de Youtube.
Y aunque nos deja un muy bien sabor al probarlo y lograr buenos resultados en poco tiempo, tiene ciertas cosas que son molestas y que esperamos mejoren en próximas versiones.
Uno de estos puntos es que si bien se pueden hacer interfaces increíbles (y para darse cuenta de eso, basta solo con ver los ejemplos), se echa de menos que se puedan crear estilos de forma mas simple, como con una hoja CSS.
Por otra parte, el lenguaje de markup, aunque poderoso, genera algunas dificultades para entender el flujo, en particular cuando uno quiere hacer ciertos tipos de animaciones.
Otro problema está al momento de escribir código en Javascript o en Uno/C#, pues aun falta algo de documentación mas clara sobre ciertos temas. Y al no ser de código abierto, una documentación detallada es fundamental para saber con que recursos se cuenta.
Y finalmente el tema que mas preocupa al momento de decidir adoptar una plataforma desarrollo es el costo. Si bien han indicado que siempre habrá una versión gratuita, el desconocer que limitaciones tendrá o si habrá una versión comercial, o no y que costo tendremos que abonar eventualmente, puede ser una limitante al momento de adoptar esta plataforma al día de hoy. Esperemos tener definiciones pronto en este sentido. Actualziacion: Tal como se indica en las notas al final del articulo, Fuse seguira siendo gratiuito y eventualmente Open Source.
Pros
- Interfaces agiles y llamativas, con desempeño de aplicaciones nativas
- Curva de aprendizaje simple, al menos en todo lo relacionado con escribir la interface.
- Muy buena integración de herramientas (tool y editor) sin utilizar casi la línea de comandos para desarrollar.
- Modo LiveSync
- Posibilidad de escribir
Contras
- Aun no existe una release estable
- Documentación un tanto incompleta en algunos temas mas complejos. Actualizacion: Ver notas, donde indican que habra nueva documentacion pronto:
- Incertidumbre con relación al costo final que tendrá la plataforma cuando tenga una release estable. Actualizacion: Fuse seguira siendo gratiuito y eventualmente Open Source. Ver notas debajo.
- Sólo disponible para iOS y android.
Xamarin
Otro de los proyectos multiplataforma mas longevos es Xamarin. También hace casi 7 años, y bajo el nombre de MonoTouch, salió al mercado y nos prometió compartir código entre aplicaciones Android e iOS, escribiéndolas exclusivamente en C#.
Desde entonces, mucha agua ha corrido debajo del puente y ahora Xamarin se presenta como la plataforma mas profesional y madura de las analizadas. Sin dudas, tras la compra por parte de Microsoft y al eliminar el excesivo costo de que tenia la plataforma, se ha convertido en una de las opciones mas completas disponibles, aunque no sin deficiencias.
El enfoque de Xamarin es más cercano al desarrollo tradicional de aplicaciones para móviles, por lo que es recomendable entender como funciona una app móvil, y como funciona el desarrollo tradicional de aplicaciones moviles en otras plataformas, para entender bien el paradigma que presenta Xamarin.
Xamarin nos presenta dos formas de escribir nuestras aplicaciones. La primera, es escribiendo la interfase de forma nativa, utilizando Xcode para iOS y las herramientas de Android y luego generando el code behind con Xamarin en C#. Este acercamiento, nos permite reutilizar muchísimo código si separamos bien la lógica de el código de Interface. Con este técnica, ser puede reutilizar hasta el 90% del código si hicimos bien los deberes.
Pero desde hace un tiempo, Xamarin introdujo un nuevo set de herramientas que permite reutilizar aún más código, al mismo tiempo que obtenemos interfaces 100% nativas. Estamos hablando de Xamarin Forms.
Con Xamarin Forms, podemos escribir interfaces en una versión especial de XAML o bien por código. La Interface que describamos, se generará con controles nativos y se vinculará al código directamente. Lo mejor es que en este paradigma se puede reutilizar hasta el 99% del código.
Aún así, Forms no ofrece aún una solución completa, por lo cual uso vez debamos realizar extraños trucos, o incluso escribir modulos de bajo nivel, para lograr cosas que no son tan sencillas de hacer en en Xamarin Forms.
Xamarin nos permite escribir aplicaciones para iOS, Android, Windows Phone, y Windows UWP (Windows 10 en todos sus sabores). Esto es bastante bueno porque, aunque no es tan extenso como Phonegap en cuanto a plataformas soportadas, la realidad es que hace foco sólo en las más importantes.
La curva de aprendizaje es un poco más alta que en las otras herramientas. Hay muchas más cosas que tener en cuenta, muchas APIs, hay muchas más herramientas, mucho más poder.
Sin embargo, si ya conocemos C#, encontraremos que es la herramienta más poderosa de las analizadas para desarrollar multiplataforma en móvil.
Si hablamos de IDEs, hablamos de las mejores que podemos encontrar. Tenemos Visual Studio en Windows, que es sin duda el mejor entorno de desarrollo que existe en este momento. Y en OSX (también en Windows), esta disponible Xamarin Studio, que cada día se parece más a Visual Studio, tanto en características como en versatilidad.
Si bien de momento no tiene un editor visual de Forms o un LivePreview, existen en desarrollo formas de pre visualizar el código de interface en XAML. Y mientras llegan las herramientas oficiales, puedes utilizar Gorila Player para poder ver casi en tiempo real las interfaces de Forms mientras las escribes.
Otro punto a favor es que, tras la reciente adquisición de Xamarin por parte de Microsoft, la entera Plataforma fue liberada como código abierto, lo cual facilita la adopción de esta poderosa plataforma.
Pros
- Extremadamente poderosa con muchísimos librerías y APIs disponibles
- De código abierto
- Xamarin Forms para simplificar interfecta multiplataforma.
- Las mejores herramientas de desarrollo y depuración.
Contras
- Curva de aprendizaje mucho más elevada
- Xamarin Forms no cubre todas las necesidades para aplicaciones muy complejas
El santo Grial no existe
¿Hay una herramienta perfecta para desarrollar apps móviles multiplataforma?. No, y no creo que jamás llegue a existir. Tampoco creo que una única solución vaya a dejar fuera de competencia a las otras. En resumidas cuentas, como me ha dicho un jefe una vez, los programadores no deberíamos creer en soluciones mágicas y dedicarnos a programar :)
De las que analizamos, cada una tiene sus puntos a favor y en contra, lo que las convierte en herramientas perfectas en determinadas circunstancias:
Phonegap/Cordova: es ideal para aplicaciones no extremadamente complejas, que debamos desarrollar rápido, con llamadas ajax a servicios o si queremos convertir en una app móvil alguna webs desarrollada en algún framework como Angular entre otros.
NativeScript: Ideal para aplicaciones sencillas que requieran una Interface más fluida y nativa.
Fuse: Ideal para diseñadores gráficos que deseen realizar aplicaciones sencillas que requieran una Interface fluida y nativa, y que no quieren lidiar con líneas de comandos, ni código JavaScript, ni ninguna de esas cosas sucias que hacen los programadores.
Xamarin: ideal para Apps más complejas y demandantes. Requiere mucho más conocimiento, pero lo paga con creces con sus características disponibles y performance.
En conclusión, la herramienta será ideal si sabemos bien que queremos hacer y si conocernos que puede hacer la herramienta en cuestión.
Espero esté resumen les haya dado una idea general de cada herramienta. Ahora les toca a ustedes conocer más a cada una y elegir sus favoritas.
Actualización 16/5: La amable gente detras de Fuse Tools, nos comento algunas cosas via twitter:
- Fuse seguira siendo gratuito y se convertira eventualmente en Open Source, aunque habran caracteristicas (calculamos componentees) que se ofreceran con costo.
- La proxima version 0.2 incluira mejoras en la creacion de componentes reutilizables y como darles estilo a los mismos.
- Estan trabajando en una nueva version de la documentacion que afirman será mucho mas completa.