Pwa e o futuro do frontend
- 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
- 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!