Construindo PWA utilizando Vue.js

Talk BrazilJS 2017

Transcript

1. P W A VUE.JS Construindo utilizando
2. Desenvolvedora Front-end e Líder Técnica do time dev Google da MILENE VIEIRA LACERDA Estudante de Tecnologia em Sistemas para Internet Criadora do projeto Encoding Women Twitter/Github: milenevlacerda Email: milenelacerda@icloud.com milene.lacerda@ilegra.com Autora no blog da BrazilJS Integrante do comitê de diversidade da BrazilJS
3. bit.ly/MileneJS Enviar uma pergunta ou
 PARTICIPAR DO SORTEIO
4. P W A VUE.JS Construindo utilizando
5. V U E . J S OVERVIEW UM CONCEITOS E EXEMPLOS
6. Lib JavaScript DEFINIÇÃO
7. Lib JavaScript Reativo DEFINIÇÃO
8. Lib JavaScript Reativo Auxilia no desenvolvimento de aplicações baseadas em componentes DEFINIÇÃO
9. Lib JavaScript Reativo Auxilia no desenvolvimento de aplicações baseadas em componentes Baseado nas melhores práticas de React e Angular DEFINIÇÃO
10. Lib JavaScript Reativo Auxilia no desenvolvimento de aplicações baseadas em componentes Baseado nas melhores práticas de React e Angular Trabalha com Single File Components DEFINIÇÃO
11. Template (HTML) DIVISÃO
12. Template (HTML) Script (JS) DIVISÃO
13. Template (HTML) Script (JS) Style (CSS) DIVISÃO
16. src/ |__ assets # images, icons e outros assets |__ components # telas do projeto, ex.: home, contact etc... |__ Home |__ Home.vue # código da tela de home |__ Contact |__ Contact.vue |__ router # configuração de rotas |__ index.js |__ App.vue # App principal que chama outras views |__ main.js # imports, uses e declaração de app
18. Palestra RSJS Vue.js, apenas mais um framework JavaScript, será? https://www.youtube.com/watch?v=CRMKpfxhY7Y&t=116s
19. Slides Vue.js, apenas mais um framework JavaScript, será? https://speakerdeck.com/milenevlacerda/vue-dot-js-apenas-mais-um-framework- javascript-sera
20. Artigos Vue.js Parte I https://braziljs.org/blog/no-mar-de-libs-e-frameworks-conhecendo-o-vue-js-parte/ Parte II https://braziljs.org/blog/no-mar-de-libs-e-frameworks-conhecendo-o-vue-js-parte-ii/
21. P W A Progressive Web Apps CONCEITO
22. "Conjunto de técnicas para desenvolver aplicações W E B, adicionando progressivamente funcionalidades de apps n a t i v o s”
23. CHECK LIST https://developers.google.com/web/progressive-web-apps/checklist
24. SEGURO Servido via HTTPS
25. PROGRESSIVO Pode ser acessado por todo usuário independente do browser
26. OFFLINE Retornar pelo menos a URL principal offline
27. RESPONSIVO Disponível para qualquer device
28. APP LIKE Usuário ter a sensação de que está em um app nativo
29. ENGANJÁVEL Possuir push notifications
30. INSTALÁVEL Adicionar à home screen
31. ATUALIZADO Browser deve detectar atualizações e instalá-las quando necessário
32. PUSH NOTIFICATIONS
33. INSTALÁVEL PUSH NOTIFICATIONS
34. INSTALÁVEL PUSH NOTIFICATIONS ATUALIZAÇÕES AUTOMÁTICAS
35. INSTALÁVEL PUSH NOTIFICATIONS ATUALIZAÇÕES AUTOMÁTICAS
36. CONCEITOS E PRÁTICA S E R V I C E W O R K E R S
37. "SCRIPT que o browser executará em segundo plano, possibilitando recursos que independem da página web ou de interação do usuário”
38. Service worker nada mais é que uma maneira de “falar" para o browser o modo que ele deve agir em determinadas situações
40. Service Workers PRÉ-REQUISITOS PARA UTILIZAÇÃO
41. Compatibilidade de navegadores REQUISITOS
43. Compatibilidade de navegadores Aplicação ser servida via https REQUISITOS
44. Compatibilidade de navegadores Aplicação ser servida via https Ter o service worker registrado REQUISITOS
45. R E G I S T R A N D O SERVICE WORKER um
49. I N S T A L A N D O SERVICE WORKER um
55. R E T O R N O S SERVICE WORKER de um
60. A T U A L I Z A Ç Ã O SERVICE WORKER de um
61. Atualize o JS do SW
62. Atualize o JS do SW No recarregamento da page o novo SW será instalado
63. Atualize o JS do SW No recarregamento da page o novo SW será instalado Neste momento ele ainda está no estado de waiting
64. Atualizar o JS do SW No recarregamento da page o novo SW será instalado Neste momento ele ainda está no estado de waiting Quando as pages abertas forem fechadas pelo user, esse novo SW será ativado
66. M A N I F E S T . J S O N As configurações de nossa PWA
75. A V A L I A N D O a PWA construída CONCEITOS E PRÁTICA
76. LightHouse Audit Web Applications with the Lighthouse https://developers.google.com/web/tools/lighthouse/
77. T E M P L A T E Vue.js + PWA INSTALAÇÃO
78. https://github.com/vuejs-templates/pwa GITHUB Vue.js PWA Template
79. $ npm install vue-cli-g Pré-requisito: node.js
80. $ vue init pwa my-project
81. $ cd my-project $ npm install $ npm run dev
82. O QUE ESTÁ I N C L U S O ?
83. Suporte a toda aplicação PWA SW precaching Configurações de dev e prod via web pack Ambiente pré-configurado para Testes unitários Karma + Mocha + karma-webpack. Ambiente pré-configurado para Testes e2e com Nightwatch.
84. A P L I C A Ç Ã O "How can I help?" OK, BUT NOW SHOW ME THE CODE
88. $ npm run build
91. $ serve dist/
94. P W A N A T I V E QUANDO UTILIZAR CADA UM? vs
95. What Web Can Do Today An overview of the device integration HTML5 APIs https://whatwebcando.today/
97. Concluindo . . .
98. Exemplos de PWAs PWA Rocks https://pwa.rocks/
99. Case Studies "Saiba por que e como outros desenvolvedores usaram a web para criar incríveis experiências na web para seus usuários" https://developers.google.com/web/showcase/
100. M U I T O OBRIGADA ! ! ! Twitter/Github: milenevlacerda Email: milenelacerda@icloud.com milene.lacerda@ilegra.com