Este documento describe la plataforma Hybreed de desarrollo de aplicaciones móviles híbridas de atSistemas. Hybreed permite construir aplicaciones multiplataforma aprovechando tecnologías web para reducir el tiempo y coste de desarrollo. La plataforma ofrece soporte para distintos sistemas operativos, dispositivos y funcionalidades nativas a través de contenedores híbridos y plugins.

2. 01
HYBREED
Tecnología a fondo
Plataforma de desarrollo de aplicaciones móviles
híbridas.
La plataforma de desarrollo de aplicaciones móviles híbridas de
atSistemas tiene como objetivo proporcionar las herramientas necesarias
para construir aplicaciones multidispositivo aprovechando las tecnologías
web. Con este enfoque multiplataforma, el proyecto de construcción se
reduce a un único desarrollo, frente a la opción tradicional de crear una
versión separada por cada sistema operativo nativo o incluso por cada
terminal.
El resultado final del desarrollo con Hybreed es una aplicación móvil
híbrida, embebida posteriormente en un contenedor que la convierte en
nativa, generando las diferentes versiones de aplicación por cada sistema
operativo nativo.

3. Este documento recoge tanto una descripción de la plataforma Hybreed
en su estado actual, así como la evolución o roadmap prevista para el
futuro inmediato. Además, se incluyen también aquellas características
que se encuentran en desarrollo y que se incorporarán a Hybreed en el
medio plazo.
Aquellas funcionalidades o características que no están disponibles
actualmente pero se encuentran en el roadmap se marcan con un
asterisco entre corchetes [*].
Las principales características de la plataforma son:
 Soporte para 12 sistemas operativos y fácilmente adaptable
a nuevas versiones.
 Soporte para 17 tipos de dispositivos diferentes y en
crecimiento, incluyendo Smart TV.
 Reutilización de código mediante una arquitectura
desacoplada.
 Funcionalidades nativas.
 Ahorro de costes, esfuerzos y tiempo.
 Plataforma con integración continua.
 QA. [*]
Tecnología a fondo
El principal valor de la plataforma Hybreed es conjugar distintas
herramientas esenciales para la creación de aplicaciones móviles
híbridas, facilitando el trabajo de los desarrolladores y agilizando
procesos como la gestión de dependencias o la encapsulación de la
aplicación en el contenedor específico para cada dispositivo móvil.
Hybreed es el fruto del trabajo constante de nuestro departamento de
I+D. En atSistemas, utilizamos Hybreed para llevar a cabo nuestros
proyectos de creación de aplicaciones móviles híbridas. Además, ahora
ofrecemos la posibilidad a nuestros clientes de adoptar esta solución
como su propia plataforma de desarrollo móvil multiplataforma, como un
valor asociado a nuestros servicios.

4. 02
Arquitectura
Descripción de la arquitectura.
La arquitectura Hybreed de atSistemas se compone de tres capas:
Un conjunto de Tecnologías Web como capa superior, un contenedor de
plataformas como segunda capa que encapsula dichas tecnologías en los
entornos nativos de cada terminal, que es la tercera capa.
La arquitectura de la capa superior puede ser MVC o MVVM según el
escenario de la aplicación, tomando en cada caso concreto una base de
librerías que habiliten dichos patrones base. A esta capa se le añade los
controladores Hybreed que proporcionan funcionalidades diseñadas para
entornos de aplicaciones móviles.

5. Tecnologías.
Los componentes tecnológicos base son:
 Backbone Marionette como librerías base que implementan
el modelo MVC en Javascript.
 Angular como librerías base que implementan el modelo
MVVM en Javascript.
 Underscore / Handlebars como sistema de plantillas.
 jQuery 2 como librería base de peticiones asíncronas al
backend y de gestión del DOM.
 Require.js como gestor de dependencias Javascript
siguiendo AMD (Asynchronous Module Definition), es decir,
gestión de dependencias bajo demanda en tiempo de
ejecución.
 Bootstrap como framework CSS3/HTML5.
 Gradle /Nexus, como plataforma de gestión de construcción.
Arquitectura
Además para cada plataforma se han creado las librerías Hybreed que
facilitan los desarrollos. Se agrupan en:





Mobile (Agnóstico)
Desktop
Samsung Smart TV
Smart TV Alliance (www.smarttv-alliance.org) [*]
Windows 8
El sistema puede ser usado con BDD o TDD mediante los siguientes
frameworks de testing y mocks / stubs / assertions:




Mocha
Sinon
Chai
Sinon-Chai

6. Contenedor Híbrido.
El contenedor permite comunicar la capa
de tecnologías web con la capa nativa de
cada terminal para la construcción de
aplicaciones híbridas con Hybreed.
La aplicación se encapsula en un
contenedor híbrido: Apache Cordova en
su variante móvil y con las librerías
Hybreed para los fabricantes de TV en su
variante Smart TV.
Apache Cordova, originalmente conocida
como Phonegap, fue creada por Nitobi en
Canadá. Esta compañía fue adquirida por
Adobe a finales del 2011 cediendo a la
Apache Software Foundation el código
fuente y cambiando de esta manera el
nombre a Apache Cordova, por lo que se
trata de software libre.
Iphone /
Iphone 3G
Iphone 3G
and newer
Android
Blackberry
OS 5x
Blackberry
OS 6.0+
WebOS
Window
Phone 7
Symbian
Bada
Accelerometer









Camera









Compass









Contact









File









Geolocation









Media









Network









Notification
(Alert)









Notification
(Sound)









Notification
(Vibration)









Storage









Apache Cordova soporta de base las
siguientes funcionalidades de acceso a
los APIs de los dispositivos:
Arquitectura

7. Arquitectura de aplicaciones Hybreed.
La arquitectura de las aplicaciones resultantes se compone de estas partes:
 La aplicación: basada en JavaScript, CSS3 y HTML5 para la visualización
de contenidos, y en componentes nativos, para los flujos de navegación y
contenedores de información.
 El contenedor de plataforma: embebe la anterior y le da acceso al
dispositivo.
 Capa nativa: definiciones y código estandarizado de la plataforma para
desarrollos híbridos.
 Plugins: extensiones personalizables que permiten acceder a recursos
diversos. Hacen de puente entre la parte web y la nativa, desarrollándose
en ambas plataformas.
 Librerías Hybreed para Samsung: habilita la capa de funcionalidades para
Samsung y control del interfaz.
Arquitectura
 Librerías Hybreed para Smart TV Alliance: habilita la capa de
funcionalidades para Smart TV Alliance y control del interfaz. [*]
 Capa Hybreed para convergencia: conjunto de librerías para habilitar la
convergencia multidispositivo.

8. Conviene resaltar algunas peculiaridades de esta arquitectura de
aplicaciones:
 Al implementar la visualización de contenidos (formularios,
imágenes, textos…) con tecnologías web, se pueden seguir
los estándares de programación que ya son conocidos, y
con los que está familiarizado el equipo de desarrollo.
 Este puede estar compuesto por técnicos con conocimientos
comunes, como JavaScript, CSS o HTML5, que son más
fáciles de encontrar que los especialistas en código nativo.
 La curva de aprendizaje que necesita el equipo es mucho
menor que respecto a otras soluciones.
 Se usan tecnologías web, pero no la filosofía de una web. No
hay navegación por páginas, sino patrones específicos para
crear las aplicaciones. Esto las hace más ágiles y enfocadas
a los móviles.
 El
núcleo
de
multiplataforma.
las
aplicaciones
será
realmente
 El uso de plugins abre una comunicación entre la parte web
y nativa, lo que permite usar el cien por cien de los recursos
nativos de los móviles y su SDK, si así se quiere.
Arquitectura
En cuanto a la solución Smart TV:
 Abstracción del desarrollo central, permitiendo que
sea reutilizado para otras plataformas de TV.
 Compuesta por librerías que facilitan la definición de
la navegación con el mando de televisión.
 Arquitectura ready to use con puntos claros para
introducir nuevas funcionalidades, dotando la
aplicación de una estructura sólida que evita
desarrollos de código disperso y técnicamente
conocido como “spaghetti”.
 Puntos de acción de convergencia independientes
que permiten desplegar la aplicación de manera ágil
en dispositivos que no dispongan de convergencia.
 Capa de tecnología Samsung desacoplada que
permite abstraer futuras evoluciones dependientes
del fabricante de la lógica de la aplicación.

9. Seguridad.
Otras características.
Las aplicaciones suelen estar orientadas a usuarios particulares y dan
acceso a información personal, sensible y privada por lo que debe
securizarse.
Otras características destacables de Hybreed:
En función del entorno de la organización, permite una integración
rápida y sencilla con los sistemas de seguridad corporativa existentes.
 Está orientado a la creación ágil de aplicaciones híbridas
multiplataforma, creando una única aplicación que aplica
para diferentes sistemas operativos.

Está basado en tecnologías estándar, por lo que es ligero
y el cliente no queda atado a la plataforma, que es gratuita
y opcional.
 Al ser estándar, existe abundante documentación y
ejemplos, lo que ayuda a su aprendizaje por parte de un
equipo de desarrollo.
 Se prevé disponer de librerías para cifrado de datos y
diversas utilidades. [*]
Arquitectura

10. 03
Soluciones basadas
en Hybreed
En las organizaciones suele existir una serie de servicios emplazados en
una aplicación de backend y que implementarán todas las funcionalidades
de negocio.
Se emplean esos servicios, o se generan los necesarios, de tal manera
que la aplicación móvil se convierte en una fachada o frontend, que
consume servicios web para obtener información y la presenta de forma
adecuada a la pantalla del móvil y cómoda de usar para el usuario.
Esta separación aporta grandes ventajas:
 Desacoplamiento: desliga el negocio de la interfaz de usuario.
 Reutilización: permite su reutilización por más de un cliente.
 Independencia tecnológica: independiza los servicios de la
tecnología de los clientes.
La plataforma soporta la comunicación con servicios SOA, peticiones
REST y tratamiento de datos en XML y JSON por lo que la integración es
sencilla.

11. En concreto, atSistemas propone el uso del formato JSON para la
comunicación con los servicios, ya que:
 Reduce considerablemente el tamaño de la información a
transmitir, aumentando así la velocidad y reduciendo el
tiempo de respuesta.
 La descripción del contenido es mucho más legible que en
XML, facilitando el mantenimiento y los evolutivos de la
aplicación.
 El proceso de datos requiere de menos recursos de CPU y
memoria, algo especialmente importante en el caso de un
móvil, con limitaciones en ambos recursos.
Soluciones basadas en Hybreed
Por lo tanto, el esquema de la solución empleando la plataforma
Hybreed de atSistemas sería:

12. Front-end Híbrido.
Servicios de negocio.
 Parte web: basada en JavaScript, CSS3 y HTML5, es la
aplicación móvil-Smart TV a desarrollar.
 Parte nativa: compone la interfaz de usuario, siendo aquí lo
más importante el diseño y la usabilidad, para proporcionar la
mejor experiencia.
 En el front-end estarán también las validaciones lógicas, de
formularios y la navegación por la funcionalidad de la
aplicación.
 No contiene ningún aspecto del negocio, con el que se
comunica utilizando el juego de servicios implementados para
ese propósito.
Soluciones basadas en Hybreed
 Componen toda la parte lógica del negocio de la aplicación:
autenticación, recuperación de información, modificación de
datos, cálculos…
 Abstraen toda la complejidad del negocio, y lo independizan
de la plataforma del cliente que los use.
 Los mismos servicios serán, por tanto, usados por todo tipo
de aplicaciones: web, móviles, etc…
 Típicamente serán REST, lo más adecuado para movilidad,
pero también podrían usarse WebServices si así se requiere.

13. 04
Convergencia con
televisores Smart TV
Descripción de la arquitectura.
Además de poder realizar aplicaciones para televisiones Samsung Smart
TV, es posible establecer una conexión entre un terminal y una Smart TV,
permitiendo comunicación entre ellos. La TV no es un monitor del terminal
sino que puede tener distinta navegación que la aplicación del terminal.
La convergencia entre el dispositivo móvil y la televisión se realiza
mediante el API de Samsung que presenta un modelo REST. Para
conectar, se sigue el estándar Universal Plug and Play, buscando un
servicio específico denominado MultiScreen.
La aplicación de TV debe estar en ejecución para que este servicio quede
expuesto y los dispositivos a enlazar deben estar en la misma red local.
Una vez realizado el proceso de conexión con la TV, la aplicación
convergente podrá ordenar a la aplicación de TV que realice distintas
acciones mediante el API de Samsung.

14. 05
Pautas de diseño.
Responsive web
design
En las aplicaciones a desarrollar se toman como referencia las guías de
estilo de aplicaciones para móviles que proponen Apple y Google. Esto
afectará a los componentes fundamentales de la interfaz de usuario, tales
como botones, textos y menús, entre otros.
Respecto al diseño de la parte web de la aplicación, se seguirán los
principios del Responsive Web Design. Estos determinan que:
 Las vistas deben aprovechar las ventajas de CSS3 y las media
queries.
 El layout de las páginas deben adaptarse dinámicamente a la
resolución definida del dispositivo donde se visualiza.
 Se minimizará la aparición de scroll horizontal, vertical, panning
y resizing de las pantallas.
 Las imágenes serán flexibles, prefiriendo las vectoriales, para
amoldarse a cada pantalla.
 Se maximizará la experiencia de usuario y la facilidad de uso.
El enfoque principal suele ser hacia la sencillez.

15. La aplicación, al seguir estos principios, se mostrará siempre de forma
óptima para cada dispositivo, haciendo posible que la misma aplicación
se muestre y use correctamente en el heterogéneo conjunto de
dispositivos a soportar.
Es posible desarrollar la aplicación tanto en modo Portrait (vertical) y
Landscape (Horizontal).
Los iconos e imágenes se diseñan para su óptima visualización tanto en
pantallas convencionales como en pantallas de alta definición (“Retina
display”).
Pautas de diseño. Responsive web design

16. 06
El centro experto en
movilidad de
atSistemas
Para dar la respuesta correcta a la creciente demanda de servicios de
desarrollo de aplicaciones móviles, atSistemas ha constituido su Centro
Experto en Movilidad, un equipo de profesionales altamente
especializados, distribuidos entre nuestras oficinas de Madrid, Barcelona y
Cádiz, capaces de proponer la solución más adecuada a cada caso, en
función del perfil del proyecto.

17. Consultora informática fundada en 1994 que cuenta con más de
450 profesionales de IT. Con oficinas en Madrid, Barcelona y
Cádiz, prestamos servicios de consultoría y desarrollo de
software a las principales empresas de todos los sectores.
Más información:
T. + 34 91 640 76 20
info@atsistemas.com
www.atsistemas.com