Ecosistemas MobileWebApps a Nativas

Mariano A. CarrizoHead of Mobile – IDS Soluciones eCommerceInstructor – LinkedIn / IT Master Professional TrainingManager – Grupo de Desarrolladores iOS de Argentina

@kiwox marianocarrizo

Web Mobile Web

Mobile Web WebApp

<meta name=“apple-mobile-web-app-capable” content=“yes”>

@media all and (display-mode: standalone) { /* Reglas para WebApp */}

If(window.navigator.standalone) { /* Código WebApp */}

CSS

JS

HTML

<link rel="apple-touch-icon" sizes="57x57" href="/img/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/img/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/img/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/img/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/img/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/img/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/img/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/img/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon-180x180.png">

<link rel="apple-touch-icon" href="/img/icono_todos.png">

PWA: Progressive Web Apps

https://developers.google.com/web/progressive-web-apps/

• WebWorkers• Notificaciones Push• Off-line• Seguridad• Optimización• Metadatos normalizados• Cross-Platform

Más info:

{ "name": "AliExpress", "short_name": "AliExpress", "icons": [{ "src": "/img/android-chrome-36x36.png", "sizes": "36x36", "type": "image/png" },{ "src": "/img/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }], "start_url": "/?from=homescreen", "display": "standalone", "background_color": "#fff", "theme_color": "#000", "orientation": "portrait"}

<link rel="manifest" href="/manifest.json">

https://m.aliexpress.com

HTMLCSSJSMEDIA

Nativo

HTML

Nativo

CheffSteps TripCase Untappd

Objective-CSwiftC/C++

JavaC/C++

Híbrido Nativo

+

• Interfaces convencionales

• Poco uso de hardware

• Mayor dependencia de servidor

• Actualizaciones constantes

• Prototipos y pruebas de concepto

• Todas las plataformas

• UI de alto impacto

• Performance crítica

• Funcionalidad off-line

• Actualizaciones parciales

• Volúmen de datos

• Integrado a la plataforma

Híbrido Nativo

Explotando el potencial mobile:Cómo llevar mi negocio a la mano del

consumidor

Federico Homovc - CTOfederico@clincshop.com

Aplicaciones nativasVentajas para las tiendas on line•Mejor experiencia de usuario• App diferenciada por plataforma• Diseño específico para mobile• Acceso a funcionalidades del dispositivo•Mayor conversión

Conversión en mobile

Plataformas de eCommerce

Panorama actual• Para las plataformas de eCommerce, la solución

mobile es una web responsive• Alternativas: Web responsive, web app, app

nativa•Mobile first y Mobile only

Estadísticas de conversión

Integración con plataformas de eCommerce

Panorama actual• Evolución de APIs• Oauth2• Documentación y soporte existentes• Buena performance

Integración con plataformas de eCommerceLimitaciones externas• Falta de recursos en plataformas• Falta de soluciones óptimas (Soap vs Rest)

Desafíos• Adaptación de la información• Experiencia de usuario omnichannel• Mantenimiento de la información sincrónico y asincrónico

Integración con plataformas externas

App factories

Ventajas• Código reutilizable• Opciones de personalización• Configuración• Bajo costo

App factoriesDificultades• Integración con servicios externos (push

notifications, analytics, etc)• Actualización de apps en gran escala• Customización•Mantenimiento cross-platform•Mantenimiento de código

Preguntas