of 40 /40
Eduardo Almeida (Victor) Front-end Engineer at Via Varejo

Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Text of Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA!...

Page 1: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Eduardo Almeida (Victor)Front-end Engineer at Via Varejo

Page 2: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Eduardo AlmeidaFront-end Engineer at Via Varejo

@oeduardoal any social networks

Eduardo Almeida (Victor)

Page 3: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos
Page 4: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

● Mais pessoas na internet

● Mais conexão entre os devices;

● Dispositivos variados;

5B de dispositivos na web

Page 5: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Page 6: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

contentbazaar.co/20160314/pi-way contentbazaar.co/20160314/pi-waycontentbazaar.co/20160314/pi-way

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea

contentbazaar.co/20160314/pi-way

Page 7: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

LiderançaCultura Conhecimento

O que falta mudar?

Page 8: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

+50% das visitas em sites mobile são abandonadas se demoram mais que 3 segundos para carregar

No Brasil, em média, os sites mobile demoram 15.8 segs. para carregar completamente

1 segundo de atraso em mobile sites pode impactar as conversões em até 20%

mSpeed

Fonte: 1 Testmysite, Google, 2017 - 2 SOASTA, 2017 - 3 Provokers, 2017

Page 9: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + ConfidentialProprietary + Confidential

Awwwards Research mostra que a velocidade necessária para carregar uma página afeta a experiência móvel dos usuários

O tempo que o site demora pra carregar

Facilidade para encontrar o que eu procuro

75%

66%

Source: SPEED MATTERS: DESIGNING FOR MOBILE PERFORMANCE [link]

Page 10: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

https://speedcurve.com/blog/web-performance-page-bloat/

Page 11: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

blend of the best

features of a native

app and a web app

What Are

Progressive

Web Apps?

Page 12: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Rápido Confiável Engajador

Progressive Web Apps

Page 13: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

OK, PWA!let's go!

Page 14: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Page 15: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Page 16: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Page 17: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Background

Clientes navegar pelo menu, personalizar seus pedidos e adicionar itens aos carrinhos

Sistema universalmente acessível (Mesmo offline)

Page 18: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

PWAs não tem dono

Page 19: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

PWAiOS x Android

Page 20: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Page 21: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Page 22: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Page 23: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Page 24: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Page 25: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Page 26: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Retira 2h

Page 27: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Page 28: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Page 29: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Page 30: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Page 31: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Home

Page 32: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Pesquisa

Page 33: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Lojas com produto selecionado

Page 34: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Lojas selecionada

Page 35: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Mais informações

Page 36: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Mobile First

Page 37: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Mobile Only

Page 38: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Utilizar PWA é oportunidade de

melhorar a experiência

onde já converte melhor

Page 39: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Obrigado! :)

Eduardo AlmeidaFront-end Engineer at Via Varejo

@oeduardoal any social networks

Page 40: Eduardo Almeida (Victor) - QConSP · Progressive Web Apps. Proprietary + Confidential OK, PWA! let's go! Proprietary + Confidential. ... navegar pelo menu, personalizar seus pedidos

Proprietary + Confidential

Front-End Produtivo