Siguiendo en la línea iniciada con el post sobre desarrollo de apps cross-platform, hoy vamos a profundizar algo más en uno de los frameworks presentados, Sencha Touch.
Sencha Touch es un framework HTML5, basado en Ext.JS, especialmente ideado para el desarrollo de soluciones web para entornos móviles, que imitan la interfaz y experiencia de usuario (UI & UX) de las aplicaciones nativas y diseñado para ser fácilmente extensible.
Inicialmente el framework se desarrolló para navegadores basados en WebKit, lo que limitaba su uso a dispositivos iOS, Android y Blackberry pero desde la versión 2.2 (la actual es la 2.3), se han deshecho de las dependencias con WebKit y han añadido Windows Phone 8 al listado de dispositivos soportados.
Se distribuye con dos tipos de licencia, GPL v3 para aquellos que quieran compartir su trabajo con la comunidad, o comercial para aquellos que quieran darle un uso privado.
Una experiencia móvil
Para facilitar el desarrollo de aplicaciones que ofrezcan una experiencia cercana a la de las aplicaciones nativas, el framework dispone de un amplio abanico de componentes visuales o widgets diseñados para su uso en entorno móvil, que van más allá de componentes sencillos como botones o elementos de formulario, e imitan a sus hermanos nativos que podemos ver en cualquier aplicación móvil, como por ejemplo:-
Tab panels
-
Navigation views
-
Action sheets
-
Elementos de formulario especializados como pickers, toggles, sliders o segmented buttons
Todos estos componentes pueden ser fácilmente ‘customizados’ y extendidos para ajustarse mejor a nuestras necesidades.
El look&feel de los componentes se adapta al tipo de dispositivo en el que se visualiza mediante la detección automática de éste, y el consecuente uso del tema CSS correspondiente.
Al diseñar las vistas de nuestra aplicación, la distribución de los componentes en las mismas se puede controlar asignando a los distintos contenedores uno de los layouts que Sencha Touch ofrece. La combinación de estos layouts, junto con la posibilidad de anclar elementos a los extremos de la pantalla, permite posicionar los elementos que conforman la vista de forma precisa.
Para completar la experiencia móvil, Sencha Touch ofrece la gestión de eventos específicos de entornos móviles como tap, long tap o swipe, y una serie de animaciones como slide, flip, fade, pop, cube o animaciones custom basadas en CSS3.
Patrón Modelo-Vista-Controlador
En cuanto a la arquitectura de las aplicaciones, Sencha Touch implementa el patrón MVC para desvincular el código de los distintos ámbitos de la aplicación, mediante el uso de modelos, stores, controladores, vistas y profiles.
Los modelos son objetos simples que estructuran los datos de los que se alimenta la aplicación.
Las stores serían comparables a una tabla de base de datos, donde cada registro es una instancia de un modelo. Las stores se pueden alimentar de fuentes de datos internas, como el local storage del navegador o externas, como servicios REST o servicios JSONP, y abstraen al desarrollador de las funciones de bajo nivel para su sincronización.
Los controladores se encargan de gestionar el flujo de la aplicación mediante rutas que soportan deep linking y contienen toda la lógica de negocio de la aplicación.
Las vistas se encargan de mostrar la información contenida en las stores y procesada por los controladores.
Finalmente, los profiles son elementos que permiten sobreescribir la implementación de los controladores y las vistas para los distintos dispositivos en los que se quiere desplegar la aplicación, consiguiendo así adaptarse mejor a las características de cada dispositivo. como las distintas resoluciones de pantalla.
Integración con los dispositivos
La API de Sencha Touch incluye funciones que exponen al desarrollador los distintos sensores como el acelerómetro, cámara o GPS y servicios software como contactos, geolocalización o notificaciones. En este sentido, la versión 2.3 del framework, integra totalmente la conocida librería Apache Cordova.
Entorno de desarrollo
Aunque para desarrollar una aplicación Sencha Touch, podemos utilizar nuestro IDE Javascript favorito, Sencha ofrece un IDE especializado, Sencha Architect, previo pago de la licencia correspondiente. Quizás el punto fuerte de Architect sea la posibilidad de diseñar las vistas de forma visual mediante drag & drop de componentes, pero no es una herramienta imprescindible para el desarrollo con Sencha Touch. El período de prueba gratuita de 30 días permite que cada uno pueda sacar sus conclusiones.
Otra opción, también de pago, es un plugin para eclipse, que ofrece, autocompletado y validación del código.
Finalmente, Sencha dispone de una herramienta, Sencha CMD, que se podría definir como la navaja suiza de Sencha. No tiene interfaz gráfica, se utiliza desde la línea de comandos, y ofrece funcionalidades como:
-
Generar el esqueleto de una aplicación Sencha Touch
-
Generar componentes como modelos o controladores
-
Compilar el código para su despliegue. En este contexto, compilar significa generar un directorio con únicamente los ficheros necesarios para el despliegue, y con la posibilidad de minimizar el código Javascript.
-
Empaquetar una aplicación para su despliegue en dispositivos móviles.
-
Arrancar un servidor web para la visualización de la aplicación en desarrollo
En este caso, la herramienta es gratuita.
En resumen, Sencha ofrece un framework muy completo para el desarrollo web para entornos móviles, por lo que es una de las alternativas que debe tenerse en cuenta al tomar la decisión de qué tecnología utilizar para nuestros desarrollos mobile cross-platform.
Autor: Xavier Santana
