Palestra sobre Progressive Web Apps no DevFest Campinas 2017

1. Progressive Web Apps e o
futuro do Frontend
Raphael Moraes
DevFest Campinas
04/11/2017

2. Raphael Moraes
Engenheiro de Computação
26 anos
Palmeirense
Star Wars/ Guia do Mochileiro / Doutor Estranho
raphael.lsmoraes@gmail.com
Engenheiro de Frontend - Movile
2

3. Problematização
3

4. 80%
do tempo do usuário é gasto em seu top 3 de aplicativos (não se iluda, o seu
app não vai estar ali).
4

5. From Google Progressive Web App Training 5

6. From Google Chrome Dev Summit ‘17 6
1Bi

7. From Google Progressive Web App Training 7
PWA

8. 8
O que é Progressive Web App?

9. 9Progressive Web Apps e o futuro do frontend
Progressive web app são experiências que
combinam o melhor de dois mundos,
aplicações nativas e páginas web.

10. 10Citado em Chrome Dev Summit ‘17
PWA
É UM CONCEITO MODULAR

11. 11Progressive Web Apps e o futuro do Frontend
Análise e escolha o que mais se adequa a seu
projeto e negócio para trazer valor a seu
produto.

12. 12Progressive Web Apps e o futuro do Frontend
Behavior Driven Model
Ágil Integrado
Confiável Cativante

13. 13Progressive Web Apps e o futuro do Frontend
Behavior Driven Model
Ágil Integrado
Confiável Cativante
São experiências web tendo todo o alcance da internet a
apenas um clique.
Não há instalações!
É possível utilizar todo o poder de um app moderno!

14. 14Progressive Web Apps e o futuro do Frontend
Behavior Driven Model
Ágil Integrado
Confiável Cativante
Dão a sensação que são parte nativa do seu mobile.

15. 15Progressive Web Apps e o futuro do Frontend
Behavior Driven Model
Ágil Integrado
Confiável Cativante
São confiáveis, isso significa que mesmo não estando
conectado será possível carregar e utilizar a aplicação em
qualquer situação.

16. 16Progressive Web Apps e o futuro do Frontend
Behavior Driven Model
Ágil Integrado
Confiável
Retém o usuário em sua aplicação
Cativante

17. 17Progressive Web Apps e o futuro do Frontend
PWA Checklist
https://developers.google.com/web/progressive-web-apps/checklist

18. 18Progressive Web Apps e o futuro do Frontend
Lighthouse (Google Chrome Audit)

19. 19
Progressive Web Apps e o futuro do
Frontend
PWA
Core Concepts
● Push Notification
● Service Worker
● Add to home screen
● HTTPS
● Performance
● UX
● Muitas outras API’s

20. 20
● Push Notification
● Service Worker
● Add to home screen
● HTTPS
● Desempenho
● UX
● Muitas outras API’s
Progressive Web Apps e o futuro do Frontend
PWA
Core Concepts
● Notification API
○ Suportado pelo Chrome, Moz, Opera e
Safari.
○ Cria e configura as notificações;
○ Gerencia as ações;
● Push API
○ Somente suportado pelo Chrome;
○ Gerencia o evento de push (envio e
subscrição);

21. 21
● Push Notification
● Service Worker
● Add to home screen
● HTTPS
● Desempenho
● UX
● Muitas outras API’s
Progressive Web Apps e o futuro do Frontend
PWA
Core Concepts
Service Worker
Provê confiabilidade em um universo offline, bem
como tratamententos para push notifications e
atualizações assíncronas, trazendo o mundo “nativo” à
web.

22. 22

23. 23
● Push Notification
● Service Worker
● Add to home screen
● HTTPS
● Desempenho
● UX
● Muitas outras API’s
Progressive Web Apps e o futuro do Frontend
PWA
Core Concepts
Add to Home Screen
Ainda na linha da confiabilidade, provê ao usuario um
acesso rápido as paginas de grande acesso,
aumentando o engajamento para com o PWA.

24. 24

25. 25
● Push Notification
● Service Worker
● Add to home screen
● HTTPS
● Desempenho
● UX
● Muitas outras API’s
Progressive Web Apps e o futuro do Frontend
PWA
Core Concepts
HTTPS
Sempre utilize HTTPS em seu PWA!

26. 26
● Push Notification
● Service Worker
● Add to home screen
● HTTPS
● Desempenho
● UX
● Muitas outras API’s
Progressive Web Apps e o futuro do Frontend
PWA
Core Concepts
Desempenho
Tarefas simples fazem a diferença!
● Otimize seus assets;
● Converta o seu monolítico em chunks menores;
● Pense no First time visitor (Retenção!!!);

27. 27
● Push Notification
● Service Worker
● Add to home screen
● HTTPS
● Desempenho
● UX
● Muitas outras API’s
Progressive Web Apps e o futuro do Frontend
PWA
Core Concepts
UX
Simplicidade e usabilidade são as palavras chaves no
mundo mobile!

28. 28
● Push Notification
● Service Worker
● Add to home screen
● HTTPS
● Desempenho
● UX
● Muitas outras API’s
Progressive Web Apps e o futuro do Frontend
PWA
Core Concepts
API’s 2016/2017+
● WebShare API
● WebVR API
● Credential Management API
● Budget API
● WebUSB API
● Payment API
● ...

29. 29Progressive Web Apps e o futuro do Frontend
PWA StarterKit
Coleção de bibliotecas fornecidas pela
Google para a criação de um Service
Worker.
Vue tem um template de pwa embutido em
seu command-line;
Polymer App toolbox traz uma
coleção de componentes,
ferramentas e templates Tem como objetivo transformar toda
e qualquer aplicação em um PWA
de “fábrica”

30. 30Progressive Web Apps e o Futuro do Frontend
PWA?
Futuro do Frontend

31. 31Progressive Web Apps e o futuro do Frontend
Ser frontend é viver no Bleeding Edge da
tecnologia:
https://whatwebcando.today/

32. 32Progressive Web Apps e o futuro do Frontend
Dúvidas?
Feedbacks, por favor!
raphael.lsmoraes@gmail.com
in/raphael-moraes-26951821/
Muito Obrigado!