Download - 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
Desarrollo híbrido bien entendidoLegané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.
Desarrollo híbrido bien entendidoLeganés
6-7 Febrero 2013
Equipamiento de dispositivos
Casi todo el mundo tiene un smartphone pero...
Desarrollo híbrido bien entendidoLeganés
6-7 Febrero 2013
Equipamiento de dispositivos
…muchos son de medias o bajas prestaciones
Desarrollo híbrido bien entendidoLegané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
Desarrollo híbrido bien entendidoLegané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
Desarrollo híbrido bien entendidoLegané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.
Desarrollo híbrido bien entendidoLeganés
6-7 Febrero 2013
Tipos de desarrollo de aplicaciones móviles
Desarrollo híbrido bien entendidoLeganés
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
Desarrollo híbrido bien entendidoLegané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)
Desarrollo híbrido bien entendidoLegané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.
Desarrollo híbrido bien entendidoLegané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.
Desarrollo híbrido bien entendidoLegané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.
Desarrollo híbrido bien entendidoLegané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
Desarrollo híbrido bien entendidoLegané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 (JQueryMobile vs Kendo Mobile) o directamente no es posible (Sencha)
Desarrollo híbrido bien entendidoLegané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/
Desarrollo híbrido bien entendidoLeganés
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
Desarrollo híbrido bien entendidoLegané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á
Desarrollo híbrido bien entendidoLegané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 enel navegador: para realizar diseños adaptativos y uso de polyfills
Desarrollo híbrido bien entendidoLeganés
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
Desarrollo híbrido bien entendidoLegané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.
Desarrollo híbrido bien entendidoLeganés
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.
Desarrollo híbrido bien entendidoLegané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.
Desarrollo híbrido bien entendidoLeganés
6-7 Febrero 2013
Factores relevantes para un buen rendimiento
Desarrollo híbrido bien entendidoLegané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
Desarrollo híbrido bien entendidoLegané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
Desarrollo híbrido bien entendidoLegané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)
Desarrollo híbrido bien entendidoLegané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.
Desarrollo híbrido bien entendidoLeganés
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.
Desarrollo híbrido bien entendidoLegané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)
Desarrollo híbrido bien entendidoLegané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 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.)
Desarrollo híbrido bien entendidoLegané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
Desarrollo híbrido bien entendidoLegané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 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
Desarrollo híbrido bien entendidoLegané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.
Desarrollo híbrido bien entendidoLegané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
Desarrollo híbrido bien entendidoLegané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 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.)
Desarrollo híbrido bien entendidoLeganés
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