Creando aplicaciones nativas con JavaScript: Titanium

Así que quieres construir aplicaciones móviles. Sabes JavaScript y la idea de envolver un sitio web en una aplicación móvil no te resulta atractiva. Esto lo entiendo completamente.

Tampoco te apetece aprender Swift/Java para construir aplicaciones móviles, y mucho menos ambos, para poder lanzar una aplicación multiplataforma. Esto también lo entiendo por completo.

Entonces, hay múltiples opciones disponibles para ti. No voy a comenzar un blog de comparación ya que hay muchos recursos disponibles. En cambio, me centraré en, en mi opinión, la plataforma más madura disponible: Titanium.

Algunos antecedentes

Titanium es una plataforma completamente de código abierto desarrollada por una empresa llamada Appcelerator, que a su vez forma parte de Axway. Puedes encontrar el código fuente en GitHub. Con Titanium y su CLI, puedes construir aplicaciones móviles nativas utilizando solo JavaScript.

Instalación

Para instalar todo, recomiendo crear una cuenta gratuita en Appcelerator (obtendrás algunos beneficios sobre la variante de código abierto) y descargar Appcelerator Studio. Studio se encargará de instalar todo lo que necesitas, incluido el SDK de Android.

Para el desarrollo en iOS, debes descargar xCode. Puedes hacerlo desde la Mac App Store. Una vez que lo hayas lanzado al menos una vez, estarás listo para comenzar.

Cómo funciona

La primera capa es tu JavaScript, que se comunica con el SDK de Titanium. El SDK de Titanium, a su vez, está construido con Objective C (o Java en el caso de Android) y, a su vez, creará los componentes nativos que estás iniciando. El resultado será un componente de ventana 100% nativo en la pantalla. Se comportará como una ventana nativa y se verá como una ventana nativa. Porque en realidad lo es. El código subyacente solo estaba allí para crearlo.

Ten en cuenta que el JavaScript se compilará con la aplicación, por lo que el paquete inicial de una aplicación es más grande de lo que tendrías nativamente. Esto no tiene ningún efecto en el rendimiento de la aplicación.

Ejemplo sencillo

Entonces veamos un ejemplo sencillo. En Appcelerator Studio, creé un nuevo proyecto "clásico". Comienza con algo de código, pero eliminé todo lo que había dentro porque quiero demostrar lo fácil que es construir una aplicación. En el archivo app.js, escribo el siguiente código:

var window = Ti.UI.createWindow({
  backgroundColor: “#cccccc”
});

window.open();

Como puedes ver, es una ventana gris sin nada en ella. ¡Pero tenemos una aplicación! Sin embargo, nos falta la barra de título predeterminada, que podemos agregar haciendo que el componente principal sea un NavigationWindow. Ajustemos el código para representar un NavigationWindow.

var window = Ti.UI.createWindow({ 
  backgroundColor: "#cccccc" 
});

var navWin = Ti.UI.iOS.createNavigationWindow({ 
  window: window 
});

navWin.open();

Como puedes ver, estamos usando un componente que está en el espacio de nombres de iOS. Esto se debe a que estamos desarrollando una aplicación para iOS en esta situación. El resultado es la barra de navegación esperada en la parte superior.

El NavigationWindow es en realidad una de las pocas excepciones en el desarrollo multiplataforma con Titanium, así que explicaremos cómo solucionar esto para Android. Ajustaremos ligeramente el código para verificar si la aplicación es iOS o Android. Puedes hacer esto fácilmente comprobando si existe el espacio de nombres de iOS. El código resultante es el siguiente:

var window = Ti.UI.createWindow({ 
  backgroundColor: "#cccccc" 
});

var mainWindow = window;

if (Ti.UI.iOS) {
  mainWindow = Ti.UI.iOS.createNavigationWindow({
    window: window
  }); 
}

mainWindow.open();

Por supuesto, ahora nos gustaría establecer un título para la ventana. ¡También podemos hacer esto fácilmente! Solo agrega la propiedad "title" en el método createWindow.

var window = Ti.UI.createWindow({
  title: 'Hi there!',
  backgroundColor: "#cccccc",
});

Conclusión

Entonces, desarrollar aplicaciones multiplataforma es realmente muy simple y extremadamente útil para los desarrolladores de JavaScript. Y como una simple demostración, ya puedes ver que no es el famoso "escribe una vez, ejecuta en todas partes". Simplemente no es posible cuando desarrollas para múltiples plataformas. ¡Siempre debes tener en cuenta la plataforma objetivo al desarrollar aplicaciones!

Próximos pasos

Te recomiendo explorar la documentación de Titanium para que puedas ver la enorme lista de API compatibles. Y cuando te encuentres con algún problema mientras desarrollas aplicaciones, siempre puedes unirte a nosotros en el canal Slack de la comunidad dedicado a Titanium.

Artículo original en inglés