¿App Híbrida o Nativa?

Pedro Galván (@pedrogk) Mar-19-2015

#MobileDay #IntelAndroid

Definiciones

App nativa• Diseñada para un sistema operativo o incluso dispositivo

específico.

• Utiliza librerías y componentes UI nativos al sistema operativo.

• Programada en el lenguaje correspondiente de la plataforma. • iOS -> Objective-C o Swift.

• Android -> Java.

• Windows Phone -> C#, VB

Web app

• Aplicación web que funciona directamente en el navegador del dispositivo móvil.

• Para accederla, simplemente cargas el url correspondiente (no se instala desde un app store).

• Se programa utilizando los mismos lenguajes y tecnologías del web (HTML5, CSS, Javascript)

Cross-platform

• Programadas en un lenguaje común.

• Framework se encarga de generar código para distintas plataformas. • Appcelerator: Javascript -> UI web (WebKit).

• Xamarin: C# -> UI nativo.

• RubyMotion: Ruby -> UI nativo.

App híbrida• Aplicación web embebida en un contenedor nativo.

• Tiene acceso a librerías y componentes nativos.

• Se puede distribuir por medio de App Store.

• Ejemplos: • Cordova (PhoneGap)

• Sencha Touch

• Appgyver

Antecedentes

Sep. 2012.

Mientras tanto en el Enterprise

Estrategias

Apps híbridas: La promesa

Apps Nativas ✓ Interacción avanzada ✓ Mejor desempeño ✓ Distribución via App Store

Una sola plataforma

Menos capacidades

VariasPlatformas

Más capacidades

Web Apps ✓ Tecnologías web ✓ Actualización instantánea ✓ Distribución sin restricciones

Hybrid HTML5 Apps ✓ Tecnologías web ✓ Acceso a capacidades nativas ✓ Distribución via App Store

Apps híbridas: La letra pequeña

• No utilizan UI nativo, utilizan el DOM (browser).

• Consecuencias • Menor desempeño.

• Comportamiento distinto entre dispositivos.

A pesar de todo …

• Sí tiene sentido desarrollar apps híbridas.

• El trade-off de desempeño <-> costo es aceptable para la mayoría de los contextos empresariales.

Razones para elegirNativa Híbrida

La app es tu negocio. Cuentas con desarrolladores con skills web.

Quieres “presumir” tu empresa o studio por medio de la app.

Requieres soportar distintas plataformas al mismo tiempo y brindar una experiencia similar.

Dispones de desarrolladores para distintas plataformas nativas. Corto tiempo de vida.

Apps híbridas:Mitigación

• Utilizar frameworks de presentación (ej. Ionic, Angular).

• Incluir el motor de ejecución (Crosswalk).

• Utilizar tecnologías que no usan el DOM (o al menos, no el DOM estándar). • ej: React Native

Caja de herramientas

Cordova/Phonegap

• Expone APIs que permiten interactuar con capacidades nativas del dispositivo.

• Es software libre.

• Cuenta con gran variedad de plugins.

http://cordova.apache.org

Angular JS

• Web app framework diseñado para optimizar “single page applications”.

• Resuelve la sincronización automática de modelos y vistas. Las vistas se actualizan automáticamente cuando los datos cambian (two-way data binding).

http://angularjs.org

Ionic

• Front-end SDK para enriquecer el UI de apps híbridas.

• Complementa a otros frameworks (ej. Cordova).

http://ionicframework.com

Intel XDK• IDE para desarrollo de apps híbridas.

• Ventajas: • Gratuito y disponible para Win, Mac, Linux.

• Juega bien con Cordova y otros frameworks.

• Depuración y testing.

• Capacidades de building/deployment de apps.

https://software.intel.com/en-us/html5/tools

Crosswalk• Motor de ejecución de apps híbridas basado en

Chromium y Blink.

• El motor se empaqueta como parte de tu app.

• Ya no dependes de qué sistema operativo o versión tenga el dispositivo donde se ejecuta la app.

• Es software libre.

https://crosswalk-project.org

Backend as a Service (BaaS)

• Proveen servicios comunes que utilizas en tus apps: • Gestión y operación de API.

• Almacenamiento de datos.

• Push notifications.

• Gestión de usuarios.

• Principales opciones • Parse

• FeedHenry

• Kinvey

• Appery

• Azure Mobile Services

• Haz tu propio BaaS

React Native

• Tecnología para hybrid web apps

• Basado en React JS

• No utiliza el DOM, usa componentes nativos de UI.

• Async threads -> Rápido.

Gaming• 3D

• Unity

• Project Anarchy

• Unreal

• 2D • Corona

• Cocos2d

• Construct 2

El siguiente nivel: Apps verdaderamente

nativas

Apps verdaderamente nativas (native^2)

• Código nativo (C, C++, ASM) compilado como librerías binarias que invocas desde tu app.

Android NDK: Panorama

C/C++ Code Makefile ndk-build Mix with Java* GDB debug

Java

SDK APIs

Native Libs

Android* Application

NDK APIs

C/C++

Using JNI

JNI

Android NDK: Arquitectura

Android* NDK Application

Dalvik* Application

Java Class

Java Source

Compile with Javac

Java Class

Java Source

Compile with Javac

Create C header with javah -jni

Header file C/C++ Source Code

Compile and Link C Code (ndk-build)

Dynamic Library (.so)

*.mk Makefiles

Android NDK: Consideraciones

• Existen distintas arquitecturas de procesador (ARM, ARM v7, x86, x86 64, MIPS). • Debes generar binarios para cada una.

• Puedes optimizar en tiempo de compilación. • Usar instruction sets específicos (ej. SSSE4).

• Compilar para binario optimizado para desempeño.

• Conoce más en http://software.intel.com/es-es/android

¡Gracias!Conoce más en http://software.intel.com/es-es