Sesión sobre Progressive Web Apps (PWA) en Meet Magento 2017. Presentando por primera vez en forma pública una demo de VueStorefront junto a Divante.

1. Meet Magento 2017 / Summa Solutions
Progressive Web Apps para
eCommerce
1

2. 2
José María Beltramini
CEO/ Summa Solutions
jmbeltramini@summasolutions.net
https://www.linkedin.com/in/jmbeltramini/
Piotr Karwatka
CTO / Divante

3. Acerca de Summa Solutions
3
Magento Enterprise
Partner desde 2009
Base en Argentina con
oficinas comerciales
en USA
Hybris Service Partner
desde 2014
Equipo de más de 80
profesionales
Agencia VTEX
certificada desde 2015
100% especializados
en E-Commerce
Lanzamos más de 200
sitios de E-Commerce
desde 2009
OroCRM Core Partner
desde 2015
Estamos certificados
bajo norma ISO 9001
OroCommerce Core
Partner desde 2016

4. Algunos de nuestros clientes
44

5. 5
Algunos números sobre Mobile
Commerce
Meet Magento 2017 / Summa Solutions

6. 6
Enero 2017 / Share tráfico web por dispositivo
Basado en el share de cada dispositivo en tráfico de browsers
Sources: Statcounter, January 2017.

7. Mobile Commerce en Argentina (CACE 2016)
7
De la facturación provino
de dispositivos móviles.
Del tráfico Web vino de
dispositivo móviles.
De las compras fue
realizada desde
dispositivos móviles.
60% 33% 21%

8. 8
¿Qué está mal con Mobile Commerce?

9. 9
La experiencia Mobile web hoy no
cumple con las expectativas de los
usuarios de eCommerce.

10. Apps Nativas vs Mobile Web
10

11. Apps Nativas Vs Mobile Web
11
Native App wins
Los usuarios pasan 20 veces más tiempo
en Apps Mobile.
Mobile Web wins
Mobile web genera 3 veces más tráfico.

12. ¿Cómo podemos aumentar el engagement en
Mobile Web?
12

13. Qué desafíos enfrentamos hoy
13

14. 14
Mobile App
→ El desarrollo y mantenimiento de apps nativas
tiene un alto costo y requiere equipos con
skills especializados.
→ Las apps compiten por el espacio de
almacenamiento en el celular, las más pesadas
o de menor recurrencia son las que corren
mayor riesgo de ser desinstaladas.
→ Debemos reducir la fricción al mínimo ante el
impulso de compra de un usuario (¿porqué
tengo que ir al store, esperar para descargar un
app para luego poder comprar?).
Mobile Website
→ Por cada segundo en tiempo de carga la tasa
de conversión baja un 7%.
→ La tasa de conversión en sitios responsive es
entre 2 y 4 veces más baja que en desktop.
→ El checkout en web mobile sigue siendo un
martirio (formularios, proceso de pago, etc).
→ La conectividad aún es un obstáculo relevante
(conexiones lentas o inestables).
Qué desafíos enfrentamos hoy

15. 15
Progressive Web Apps
is the New Black

16. Progressive Web Apps (PWA)
16
Progressive Web Apps son aplicaciones desarrolladas con tecnología Web y que se ejecutan
en un navegador, pero que se comportan como una aplicación mobile nativa.
→ Es una aplicación porque se instala y ejecuta
código en el dispositivo o computadora del
usuario, lo que les permite ser mucho más
rápidas y con más funcionalidades que las
soluciones web tradicionales.
→ Es web porque está escrita en lenguajes -Web
HTML, CSS, y JavaScript- en vez de lenguajes o
frameworks propietarios de una plataforma en
particular (iOS, Android, etc).
→ Es progresiva porque utiliza “lazy loading”, que es
la capacidad de descargar contenido y recursos
mientras el usuario navega por el sitio.
PWA es una tecnología creada por Google, abierta y multi-browser que se perfila ya como el
nuevo estándar para soluciones web mobile. https://developers.google.com/web/progressive-web-apps/

17. → Progresivas - Funciona para cada usuario,
independientemente del navegador que utilice.
Y su uso continuo mejora progresivamente la
experiencia por el uso de pre-carga y caching.
→ Responsiva - Logra una optima experiencia en
cualquier dispositivo : desktop, mobile, tablet,
etc.
→ No depende de conectividad - Los service
workers permiten que funcionen sin conexión o
conexiones deficientes.
→ Se siente como una App - La experiencia de
usuario es muy similar a una app nativa sólo
con algunas pocas limitaciones .
Principios Básicos PWA
17
→ Siempre actualizada - La tecnología de service
workers permite mantener la información
siempre actualizada.
→ Segura - Funciona bajo protocolo HTTPS.
→ Facilita el engagement - Con soporte para
funcionalidades como push notifications.
→ Instalable - Los usuarios tienen la opción de
instalarlo como un ícono en su Home Screen
sin la necesidad de subirla a un Apps Store.
→ Linkeable y encontrable - Se comparte
fácilmente mediante una URL como cualquier
sitio web, siendo 100% SEO friendly.

18. PWA permite reducir dramáticamente los tiempos de
carga de del sitio aprovechando una combinación de
técnicas y tecnologías respecto de un sitio
responsive.
→ Carga de contenidos en forma diferida
→ Caching de contenidos
→ Tecnología front end que permite interacciones
más fluidas y rápidas.
→ Single Page Applications permiten separar la
carga inicial del “esqueleto” de la carga de
contenidos.
Tiempo de respuesta ultra-rápido
18
https://www.washingtonpost.com/pr/wp/2016/09/06/the-washington-post-to-roll-out-fastest-mobile-news-site

19. → Permite a los usuarios agregar a la web app al
home screen del dispositivo en forma rapida y
facil.
→ Desde el punto de vista de desarrollo
solamente requiere agregar un Web App
Manifest.
→ Chrome utiliza un criterio basado en la
frecuencia de visita para determinar el
momento más apropiado para mostrar el
banner.
Add to Home Screen
19

20. ¿Qué limitaciones tiene (por ahora)?
20
https://mobiforge.com/news-comment/safari-service-workers-and-other-pwa-good-news-stories
https://webkit.org/status/#specification-service-workers

21. ¿Para quiénes es ideal PWA?
21
→ Posee un alto tráfico Mobile.
→ No requieren un uso intensivo de funciones del
teléfono (media, bluetooth, etc)
→ No es una app de uso de altísima frecuencia de
uso (ej. Mercado Libre, Facebook, Twitter).
→ Se quiere lograr una solución de alta calidad y
mejorar la conversión con un presupuesto
razonable y bajos costos de mantenimiento.
→ Sería una app nativa candidata a ser borrada
del celular ante la necesidad de hacer espacio.
PWA y Apps nativas no son opciones necesariamente excluyentes. Empresas como Twitter,
Alibaba, New York Times adoptan estrategias mixtas.

22. Ya usan PWA en el mundo
22
https://www.infobae.com/america/tecno/2017/07/24/infobae-acelera-la-experiencia-movil-de-la-mano-de-su-progressive-web-app

23. 23
“By 2020, Progressive Web Apps will
have replaced 50% of general-purpose
consumer facing apps.”
Gartner Research

24. Conceptos técnicos básicos
24

25. Progressive Web Apps (PWA) y Magento
25
https://community.magento.com/t5/Magento-DevBlog/Introducing-Magento-PWA-Studio/ba-p/74636
https://magento.com/press-room/press-releases/magento-reimagine-mobile-commerce-progressive-web-apps

26. Varias iniciativas con PWA para Magento
26

27. 27
Proyecto Vue Storefront
Meet Magento 2017 / Summa Solutions

28. 28
¡Demo Time!
Meet Magento 2017 / Summa Solutions
https://www.youtube.com/watch?v=L4K-mq9JoaQ

29. 29
¡Muchas gracias!
Meet Magento 2017 / Summa Solutions