Desarrollo móvil híbrido bien entendido

Desarrollo híbrido bien entendidoLeganés

6-7 Febrero 2013

José Manuel López, Sergio Contreras, Javier Arias

Desarrollo híbrido bien entendido

Except where otherwise noted, this work is licensed under: http://creativecommons.org/licenses/by-nc-sa/3.0/ c_b_n_a

http://creativecommons.org/licenses/by-nc-sa/3.0/


6-7 Febrero 2013

Algunos datos interesantes…


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.


6-7 Febrero 2013

Equipamiento de dispositivos


6-7 Febrero 2013


Casi todo el mundo tiene un smartphone pero...


6-7 Febrero 2013


…muchos son de medias o bajas prestaciones


6-7 Febrero 2013



6-7 Febrero 2013

Fragmentación en Android


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


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


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.


6-7 Febrero 2013

Aplicaciones vs Páginas Web


6-7 Febrero 2013

Tipos de desarrollo de aplicaciones móviles


6-7 Febrero 2013

Uso de las capacidades específicas de los terminales móviles

Compatibilidad con el mayor número de plataformas

Application native Sitios Web con una interfaz unificada

Application hybride Sitios Web con un diseño de interfaz adaptativo

Sitios Web con una interfaz específica

para cada SO

WebNativo Híbrido


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)


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.


6-7 Febrero 2013

Apache Cordova, ¿para que sirve?


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.


6-7 Febrero 2013

Apache Cordova, ¿cómo funciona?


6-7 Febrero 2013


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.


6-7 Febrero 2013

Apache Cordova, plugins out-of-the-box…


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

http://plugins.cordova.io/

https://github.com/phonegap/phonegap-plugins/tree/master/Android


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 (JQueryMobile vs Kendo Mobile) o directamente no es posible (Sencha)


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/

http://www.asyncdev.net/2012/10/phonegap-a-misunderstood-hybrid-framework/


6-7 Febrero 2013


6-7 Febrero 2013

Algunas lecciones aprendidas


6-7 Febrero 2013

HTML5… ¿pero qué es realmente? Con su popularización se ha convertido en un conceptode marketing, llegando a parecer que añadiendo “HTML5” a tu aplicación se solucionantodos los problema y consigues un desarrollo moderno e innovador :-O


6-7 Febrero 2013


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á

http://e4dhtml5.azurewebsites.net/


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 enel navegador: para realizar diseños adaptativos y uso de polyfills

http://html5test.com/

http://mobilehtml5.org/

http://modernizr.com/


6-7 Febrero 2013

Application Offline Cache Actualización de librerías, configuración y datos

Caché de aplicaciones localStorage / sessionStorageWebSQL e Indexed Database Eventos Online y Offline


6-7 Febrero 2013

Application Offline Cache


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.


6-7 Febrero 2013

Diseño y Ergonomía

Ergonomics Audit UI designUser Experience Design

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.

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.


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.


6-7 Febrero 2013

Factores relevantes para un buen rendimiento


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


6-7 Febrero 2013

Definir una apariencia propia para la UI


6-7 Febrero 2013

Identifica funcionalidades fundamentales


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


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)


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.


6-7 Febrero 2013

Si se opta por una UI Web no intentar hacerla como una aplicación nativa. Se corre el riesgo deacabar cayendo en el “Valle Inquietante”: es más conveniente enfocarse en realizar una aplicaciónWeb usable y que sea familiar para el usuario en como la Web funciona en su dispositivo.


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)


6-7 Febrero 2013

Estrategias de construcción de apps


6-7 Febrero 2013

Posibles dispositivos: equipo de escritorio o portátil, tablet, smartphone, smart TV.

¿Por qué realizar un desarrollo nativo y no uno Web?

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.)


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


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 complejaCuando 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


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.


6-7 Febrero 2013


6-7 Febrero 2013

Tecnologías para desarrollos híbridos


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


6-7 Febrero 2013

Arquitectura de aplicación


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 laaplicación y descárgalas sin tener que subirlas al CVS

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 paraJavaScript, desarrollado por el equipo de AngularJS (Google)

Grunt: herramienta de automatización de tareas, que facilita la construccióndel proyecto (minimificación de librerías, compilación, ejecución de testunitarios, linting, etc.)


6-7 Febrero 2013

job Web App job iOS job Android

Jenkins / Grunt

Subversion / Git

dependencias

código fuente

Desarrollador

commint

protactorejecución

Navegadores Web

• Pruebas unitarias• Cobertura

Análisis estático de código

Servidor Web

1

pruebas unitarias

análisis

despliegue2

3

4

6

Web App iOS (ipa) Android (apk) Dispositivos

móviles

instalación

6

karma

• Prueba automática• Pruebas manuales

pruebas5


6-7 Febrero 2013

Tendencias

• Calatrava

• Chrome apps mobiles

• Firefox OS

• Apache Cordova (comunidad)

Software

Desarrollo móvil híbrido bien entendido