Desarrollo móvil híbrido bien entendido

Desarrollo híbrido bien entendido
Leganés
6-7 Febrero 2013
José Manuel López, Sergio Contreras, Javier Arias
Except where otherwise noted, this work is licensed under: http://creativecommons.org/licenses/by-nc-sa/3.0/ c_b_n_a

Leganés
6-7 Febrero 2013
Algunos datos interesantes…

Leganés
6-7 Febrero 2013
Nuevos hábitos
44% de los usuarios bancarios acudieron a alguna red
social a pedir consejo o asesoramiento sobre algún producto
financiero.
El altavoz más efectivo en tiempo real de
las buenas y malas prácticas.

Leganés
6-7 Febrero 2013
Equipamiento de dispositivos

Leganés
6-7 Febrero 2013
Casi todo el mundo tiene un smartphone pero...

Leganés
6-7 Febrero 2013
…muchos son de medias o bajas prestaciones

Leganés
6-7 Febrero 2013
Fragmentación en Android

Leganés
6-7 Febrero 2013
Modo de acceso a internet
 Crece bastante el uso de aplicaciones en los dispositivos móviles
 El acceso a través del navegador y de apps se iguala

Leganés
6-7 Febrero 2013
Modo de acceso a internet
 En tablet sigue predominando el uso del navegador aunque también aumenta el uso de aplicaciones

Leganés
6-7 Febrero 2013
Tipo de conexión
 Uso de Wi-Fi más acentuado en Tablets, mientras el 3G tiene más penetración en Móvil.

Leganés
6-7 Febrero 2013
Aplicaciones vs Páginas Web

Leganés
6-7 Febrero 2013
Tipos de desarrollo de aplicaciones móviles

Leganés
6-7 Febrero 2013
Nativo Híbrido Web
Application native Sitios Web con una
Application hybride Sitios Web con un diseño
Sitios Web con una
interfaz específica
para cada SO
Uso de las capacidades específicas de los terminales móviles
interfaz unificada
de interfaz adaptativo
Compatibilidad con el mayor número de plataformas

Leganés
6-7 Febrero 2013
Desarrollo con Runtimes y Abstracciones
 Uso de un lenguaje neutro (JavaScript, Java, C#, …) para generar componentes nativos
ejecutables en cada plataforma.
 Permiten escribir una aplicación nativa mediante API o abstracciones no nativas. Esto cubre una
amplia gama de tecnologías como los frameworks de "escribir una vez, ejecutar en cualquier
parte“, entornos de ejecución dinámicos, compiladores multiplataforma:
 Xamarin (C# .Net)
 Titanium (JavaScript)
 Tabris (Java)
 RareWire (IDE/lenguaje propio)
 Strawberry SDK (OpenGL)
 Marmalade C#
 Corona (LUA)
 NimbleKit (JavaScript)

Leganés
6-7 Febrero 2013
Desarrollo híbrido (nativo + WebApp)
 Apache Cordova (aka PhoneGap): el código de la WebApp se ejecutado en una
WebView nativa y acceso puntual a funcionalidades nativas: agenda, geolocalización,
almacenamiento, notificaciones, cámara, etc.
 Trigger.io: similar a PhoneGap pero propietario y buscando ser más trasparente para
el desarrollador Web al ser más una plataforma que un framework:
 Ciclo de desarrollo-pruebas rápido
 Sin necesidad de escribir código nativo
 Sin necesidad de configurar entornos locales de compilación (Xcode, Eclipse)
 Calatrava: la lógica de la aplicación es escrita en JavaScript y las vistas pueden
desarrollarse en HTML/JavaScript o en Objective C para iOS o Java para Android. Un
práctica común es desarrollar la aplicación como una WebApp e ir migrando a
componentes nativos donde la experiencia de usuario o rendimiento lo requieran.

Leganés
6-7 Febrero 2013
Apache Cordova, ¿para que sirve?

Leganés
6-7 Febrero 2013
Apache Cordova, ¿qué no es?
 PhoneGap no es un librería de componentes para construir la interfaz gráfica (UI). En este
sentido, solo facilita ejecutar en la WebView de una aplicación nativa cualquier código
HTML/CSS/JavaScript.

Leganés
6-7 Febrero 2013
Apache Cordova, ¿cómo funciona?

Leganés
6-7 Febrero 2013

Leganés
6-7 Febrero 2013
 Android – los objetos Java son serializados en la webview y esto permite que se puedan llamar
métodos nativos directamente.
 iOS – desde Javascript se tiene que hacer una llamada a una URL con un esquema personalizado
(native://mycall), que es interceptado por el código nativo.
 Windows 8 - La vista web expone una función window.external.notify que se puede llamar desde
Javascript.

Leganés
6-7 Febrero 2013
Apache Cordova, plugins out-of-the-box…

Leganés
6-7 Febrero 2013
… plugins y mas plugins
 Plugins Apache Cordova: http://plugins.cordova.io/
 Near Field Communication (NFC)
 Estado de la batería
 Couchbase Lite in your app to enable JSON sync
 Google Play Services
 Bluetooth Serial Communication
 Scans Barcodes
 MapKit
 TestFlight
 Plugin allows you to create native spinners & loaders above your HTML application layer
 OAuth2 authentication for Android and iOS. On Android, it uses Google Play Services, and on iOS it uses
InAppBrowser
 Plugin for showing notifications on Android
 Client and server sockets for Android and iOS
 AeroGear Push
 …
 Fork en GitHub del proyecto PhoneGap: https://github.com/phonegap/phonegap-plugins/tree/master/Android

Leganés
6-7 Febrero 2013
Frameworks UI Web
 Algunos frameworks además del modelo de programación MV* incluyen componentes UI. En algunos
casos se pueden utilizan los widgets sin usar el modelo MV*, con más o menos dificultad (JQuery
Mobile vs Kendo Mobile) o directamente no es posible (Sencha)

Leganés
6-7 Febrero 2013
Apache Cordova… una mala reputación
 PhoneGap disminuye el coste de entrada del desarrollo de aplicaciones nativas al poder utilizar
tecnologías Web. El problema es que muchas veces se está usando simplemente para realizar
un envoltorio de una página Web a modo de aplicación nativa.
 El entorno de ejecución Web de los dispositivos móviles es bastante más limitado que en los
navegadores de escritorio y se necesitan más conocimientos y experiencia para realizar un
desarrollo óptimo.
 PhoneGap es un marco de desarrollo valido para realizar aplicaciones híbridas, pero es preciso,
en función del tipo de aplicación, considerar que estrategia seguir:
 Una aplicación HTML con funcionalidades y componentes nativos
 Una aplicación nativa con componentes HTML
 “PhoneGap, un framework híbrido incomprendido”
http://www.asyncdev.net/2012/10/phonegap-a-misunderstood-hybrid-framework/

Leganés
6-7 Febrero 2013
Algunas lecciones aprendidas

Leganés
6-7 Febrero 2013
 HTML5… ¿pero qué es realmente? Con su popularización se ha convertido en un concepto
de marketing, llegando a parecer que añadiendo “HTML5” a tu aplicación se solucionan
todos los problema y consigues un desarrollo moderno e innovador :-O

Leganés
6-7 Febrero 2013
 ¿Qué se puede hacer con HMTL5?
• Un ejemplo práctico: http://e4dhtml5.azurewebsites.net
• El rendimiento en dispositivos móviles es mucho menor y además no todas las API están
implementadas / soportadas ¡Probar antes en los dispositivos donde se quiera usar!
 Diferencias entre los navegadores y la WebView
• En Android 4.4 (KitKat) la WebView se ha actualizado a la última versión estable de Chrome
• Buscan que la WebView se actualice de forma periódica igual que la aplicación Chrome del
dispositivo, pero todavía no está

Leganés
6-7 Febrero 2013
 ¿Compatibilidad en navegadores?
• Pruebas de compatibilidad de navegadores: http://html5test.com
• Probar por ejemplo en Stock Browser vs Chrome en Android
 ¿Y para navegadores móviles? http://mobilehtml5.org
 Modernizr.js librería para validar el soporte a las API HMTL5 en tiempo de ejecución en
el navegador: para realizar diseños adaptativos y uso de polyfills

Leganés
6-7 Febrero 2013
Application Offline Cache
 Actualización de librerías, configuración y datos
 Caché de aplicaciones
 localStorage / sessionStorage
WebSQL e Indexed Database
 Eventos Online y Offline

Leganés
6-7 Febrero 2013
Application Offline Cache

Leganés
6-7 Febrero 2013
Integración con servicios
 Minimizar descargas: se deben minimizar el contenido descargado al terminal, tanto de datos
como de imágenes, ficheros Javascript, CSS… ”Es un retorno al módem 56Kbps.”
 Formato JSON: JavaScript Object Notation, es un formato no verboso que aporta toda la semántica
necesaria para el transporte de datos cliente-servidor.
 RESTful: aporta gran escalabilidad de interacciones de componentes, estandarización del interfaz…
 Sincronización de datos: definir correctamente los momentos de sincronización de datos con el
servidor.

Leganés
6-7 Febrero 2013
Diseño y Ergonomía
 La primera impresión es la que cuenta
 Los usuarios esperan que los servicios móviles sean relevantes y amigables
 Los dispositivos tienen limitaciones que imponen cambios de diseño
 No es cuestión de hacer los componentes mas pequeño (imágenes, campos de formulario, etc.) y
mantener la misma estructura que las aplicaciones de escritorio
 Las elecciones de diseño afectan a las características, contenido, interactividad, gráficos y, por lo tanto,
el rendimiento de la solución de movilidad
 A menudo subestimado, el rendimiento es fundamental para lograr una experiencia de usuario óptima
y por tanto es clave en el proceso de diseño.
User Experience Design Ergonomics Audit UI design
 La forma de interactuar con la UI en cada plataforma móvil no es la misma y sus usuarios están
habituados por lo intentar replicar el mismo funcionamiento no resulta intuitivo para todos.

Leganés
6-7 Febrero 2013
El diseño de la aplicación es un punto clave
 Elecciones de diseño afectan a las características, contenido, interactividad, gráficos y, por lo tanto,
el rendimiento de la aplicación
 El logro de una experiencia de usuario de alto rendimiento no es sólo un ejercicio de codificación.

Leganés
6-7 Febrero 2013
Factores relevantes para un buen rendimiento

Leganés
6-7 Febrero 2013
Recomendaciones para un buen rendimiento
1. Definir una apariencia propia para la interfaz de usuario
2. Identifica las funcionalidades fundamentales
3. Optimiza las transiciones y elementos de interfaz de usuario
4. Define reglas de escalado de la interfaz de usuario
5. Usa una tabla de rendimientos
6. Dispón de perfiles especializados en el diseño/desarrollo de UI

Leganés
6-7 Febrero 2013
Definir una apariencia propia para la UI

Leganés
6-7 Febrero 2013
Identifica funcionalidades fundamentales

Leganés
6-7 Febrero 2013
Optimiza transiciones y componentes UI
 A los usuarios no les gusta esperar.
 Aumenta la percepción de rapidez de la aplicación

Leganés
6-7 Febrero 2013
Define reglas de escalado de la UI
1. Esenciales (la cabecera)
2. Alternativos (opaco en lugar de
transparente)
3. Opcionales (reducción de longitud
de la lista)

Leganés
6-7 Febrero 2013
Usa técnicas avanzadas si es necesario
 Smart loading: mecanismos, como la carga diferida o cargar primer el contenido
visible y luego cargar el resto. Estas técnicas reducen el tiempo de espera del
usuario y mejora su experiencia con la aplicación.
 Background loading: Este es otro ejemplo bien conocido. La carga anticipada de
datos del servidor o el renderizado de componentes puede suponer una mejora
de rendimiento diferenciadora respecto aplicaciones del mismo tipo.

Leganés
6-7 Febrero 2013
 Si se opta por una UI Web no intentar hacerla como una aplicación nativa. Se corre el riesgo de
acabar cayendo en el “Valle Inquietante”: es más conveniente enfocarse en realizar una aplicación
Web usable y que sea familiar para el usuario en como la Web funciona en su dispositivo.

Leganés
6-7 Febrero 2013
• TODO: temas de quotes para el almacenamiento en dispositivo
mediante HTML5 y cuando usar mejor un plugin para acceso a SQLite
(nativo)

Leganés
6-7 Febrero 2013
Estrategias de construcción de apps

Leganés
6-7 Febrero 2013
 Posibles dispositivos: equipo de escritorio o portátil, tablet, smartphone, smart TV.
 ¿Por qué realizar un desarrollo nativo y no unoWeb?
 Limitaciones de los dispositivos (rendimiento, memoria, sistema operativo)
 Acceso funcionalidades nativas (agenda, cámara, notificaciones, database, etc.)
 ¿Por qué realizar un desarrollo específico para cada plataforma?
 Diferentes usos del servicio o aplicación (en casa, en la oficina, en la calle, etc.)
 Diferentes reglas de UI para cada dispositivo (diferente área de visualización, entrada con ratón o
táctil, patrones de uso específicos de cada plataforma, etc.)
 Diferentes funcionalidades disponibles (cámara, interfaz táctil, localización, micrófono, etc.)

Leganés
6-7 Febrero 2013
Nuevas estrategias: desarrollos mixtos
 Implementación de componentes que por funcionalidad o rendimiento sólo se pueda
conseguir de forma nativa: Por ejemplo elementos de interfaz de menús, marcos, ventanas
de dialogo, pestañas, transiciones de navegación, persistencia, etc.
 El resto de elementos realizarlos utilizando un estrategia de desarrollo híbrido con HTML5 y
JavaScript.
 Aproximación de compromiso entre el desarrollo nativo específico por cada plataforma y el
desarrollo reutilizable, sin sufrir las perdidas de rendimiento en la interfaz de usuario de las
aplicaciones.
 No siempre hay que trabajar con una única WebView a modo de SPA, se pueden tener
composición de varias dentro de otro tipo de componente si es necesario: Project Cleaver
 Uso de frameworks alternativos como Calatrava

Leganés
6-7 Febrero 2013
 Piensa en una plataforma portable, más que en una solución
multiplataforma.
 Una solución como Calatrava es buena para:
 Aplicaciones con una lógica de negocio en cliente compleja
 Cuando es un canal al producto mas que un producto en si
mismo
Pero no si:
 Aplicaciones donde la UI es lo predominante, como el caso
de un videojuego
 Cuando la experiencia de usuario de una web app no es
suficiente

Leganés
6-7 Febrero 2013
 Las partes nativas de la aplicación pueden seguir una estrategia incremental
 No tiene que ser necesario implementar el mismo porcentaje en todas las plataformas. Por ejemplo, el
rendimiento de UI Web en iOS es bastante mejor que en Android.

Leganés
6-7 Febrero 2013
Tecnologías para desarrollos híbridos

Leganés
6-7 Febrero 2013
Desarrollo híbrido… ¿qué tipo de desarrollo?
 Aplicación Web móvil de tipo Single Page Application
 Interfaz de usuario construida con HTML5, CSS3 y JS
 Lógica de negocio en cliente con JavaScript
 Datos recuperados de servidor mediante servicios REST
 Actualización dinámica de versiones mediante el API Application Offline Cache
 Uso API de HTML5 para acceso al dispositivo desde la WebView
 Uso de API de Apache Cordova para acceso a funcionalidades nativas
 Empaquetado nativo para iOS, Android y Windows Phone
 Envío de trazas de error a servidor

Leganés
6-7 Febrero 2013
Arquitectura de aplicación

Leganés
6-7 Febrero 2013
Algunas de la tecnologías utilizadas…
Bower: gestor de paquetes Web (HTML, CSS, JavaScript)
Permite poder especificar recursos, como librerías, de las que depende la
aplicación y descárgalas sin tener que subirlas al CVS
Grunt: herramienta de automatización de tareas, que facilita la construcción
del proyecto (minimificación de librerías, compilación, ejecución de test
unitarios, linting, etc.)
RequireJS: permite configurar dependencias JavaScript de un fragmento
(módulo) de código y su carga asíncrona, bajo demanda, en el navegador
Karma/Protactor: entorno de ejecución de pruebas unitarias y e2e para
JavaScript, desarrollado por el equipo de AngularJS (Google)

Leganés
6-7 Febrero 2013
dependencias
Jenkins / Grunt
 job Web App
 job iOS
 job Android
código fuente
Subversion / Git
Desarrollador
commint
protactor
ejecución
Navegadores Web
• Pruebas unitarias
• Cobertura
Análisis estático de
código
Servidor Web
1
pruebas unitarias
análisis
despliegue
2
3
4
6
 Web App
 iOS (ipa)
 Android (apk) Dispositivos
móviles
instalación
6
karma
• Prueba automática
• Pruebas manuales
5 pruebas

Leganés
6-7 Febrero 2013
Tendencias
• Calatrava
• Chrome apps mobiles
• Firefox OS
• Apache Cordova (comunidad)

Desarrollo móvil híbrido bien entendido

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Destacado

Destacado (9)

Similar a Desarrollo móvil híbrido bien entendido

Similar a Desarrollo móvil híbrido bien entendido (20)

Desarrollo móvil híbrido bien entendido