Presentado por Pedro Galván en Mobile Day 2015.

1. ¿App Híbrida o
Nativa?
Pedro Galván (@pedrogk)
Mar-19-2015
#MobileDay #IntelAndroid

2. Definiciones

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

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

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

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

7. Antecedentes

8. Sep. 2012.

9. Mientras tanto en el
Enterprise

10. Estrategias

11. Apps híbridas:
La promesa
Apps Nativas
✓ Interacción avanzada
✓ Mejor desempeño
✓ Distribución via App Store
Una sola
plataforma
Menos
capacidades
Varias
Platformas
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

12. Apps híbridas:
La letra pequeña
• No utilizan UI nativo, utilizan el DOM (browser).
• Consecuencias
• Menor desempeño.
• Comportamiento distinto entre dispositivos.

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

14. Razones para elegir
Nativa 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.

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

16. Caja de herramientas

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

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

19. Ionic
• Front-end SDK para enriquecer el UI de apps
híbridas.
• Complementa a otros frameworks (ej. Cordova).
http://ionicframework.com

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

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

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

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

24. Gaming
• 3D
• Unity
• Project Anarchy
• Unreal
• 2D
• Corona
• Cocos2d
• Construct 2

25. El siguiente nivel:
Apps verdaderamente
nativas

26. Apps verdaderamente nativas
(native^2)
• Código nativo (C, C++, ASM) compilado como
librerías binarias que invocas desde tu app.

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

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

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

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