Natal Nerd - Aplicações Web Progressivas com Frameworks JS

Não consegui apresentar pois tive pedra no rim mas segue o slide :(

Transcript

1. @anapbastos ANA PORTELLO github.com/anabastos anabastos.me Software Developer na Quanto
2. JSLADIES fb.com/jsladiesbr twitter.com/jsladiessp meetup.com/JsLadies-BR/
3. APLICAÇÕES WEB PROGRESSIVAS COM FRAMEWORKS JAVASCRIPT
4. MOBILE ATUALMENTE
5. APLICATIVOS NATIVOS Vantagens • Interface • Recursos • Performance Desvantagens • Alto custo • Difícil desenvolvimento Fonte:http://gold-group.com/2013/08/02/mobile-web-and-mo bile-apps-7-must-know-mobile-marketing-terms/
6. ANDROID x IOS
7. APLICATIVOS HIBRIDOS Vantagens • Suporta múltiplas plataformas • Fácil desenvolvimento • Menor custo Desvantagens • Interface • Performance • Funcionalidades Fonte:http://gold-group.com/2013/08/02/mobile-web-and-mo bile-apps-7-must-know-mobile-marketing-terms/
8. APLICATIVOS HIBRIDOS Fonte:http://gold-group.com/2013/08/02/mobile-web-and-mobile- apps-7-must-know-mobile-marketing-terms/
10. APLICATIVOS NATIVOS HIBRIDOS Fonte:http://gold-group.com/2013/08/02/mobile-web-and-mobile- apps-7-must-know-mobile-marketing-terms/
11. APLICATIVO WEB(WEBAPP) Vantagens • Suporta múltiplas plataformas • Fácil desenvolvimento • Fácil Acesso • Baixo custo • Atualizações instantâneas Desvantagens • Conexão • Falta de recursos ◦ NFC, Bluetooth • Não há engajamento • Interface Fonte:http://gold-group.com/2013/08/02/mobile-web-and-mobil e-apps-7-must-know-mobile-marketing-terms/
12. Fonte: https://pt.stackoverflow.com/questions/153860/o-que-s%C3%A3o-progressive-web-apps • Responsivo • Próximo de um Aplicativo de Celular • Independente de conexão • Alto Engajamento • Instalavel • Fácil de localizar • Atualizado • Uso de links • Progressivo • Seguro
13. import html main = Html.text "Hello"
14. DEMO
15. RESPONSIVO
16. CSS Grid FlexBox MediaQueries
17. Bootstrap Material Design Purecss
18. RECURSOS WEB • HTML Media Capture: Entrada de cameras, microfones e arquivos dentro do HTML. • HTML5 Geolocation: Interface para adquirir localização geografica. • Orientation Event: Orientação física do celular e movimentações • WebRTC: Chamadas de vídeo e áudio em tempo real • NFC • Bluetooth
19. SERVICE WORKER
20. SERVICE WORKER
22. NETWORK FIRST
26. CACHE FIRST Cliente Servidor
27. CACHE FIRST { Name: Ana Bastos Email: hello@anabastos.me FavoriteThings: [‘Computer’, ‘Fidget Spinner’, ‘Kindle’] }
28. CACHE FIRST { listSpeaker: [ … { Name: Ana Bastos Email: hello@anabastos.me FavoriteThings: [‘Computer’, ‘Fidget Spinner’, ‘Kindle’] }, … ] }
29. CACHE FIRST Cliente Servidor LOCAL STORAGE
30. VOCE NAO DEPENDE DA RESPOSTA DE APIs
32. INSTALAÇÃO
33. MANIFEST.JSON
34. MANIFEST.JSON
36. HTTPS
37. CASOS DE USO
38. TRANFORMANDO SEU APP EM PWA
39. CACHEANDO
42. sw-precache-webpack-plugin
43. localStorage localStorage.setItem(“name”, “Ana”) localStorage.getItem(“name”) // “Ana” localStorage.removeItem(“name”)
44. localStorage
45. INSTALAVEL
47. FAZENDO DO 0
48. • VUE-CLI PWA TEMPLATE • CREATE REACT APP PWA • ANGULAR CLI (SERVICE WORKERS PWAS WITH ANGULAR CLI)
49. DESVANTAGENS
50. SAFARI :(
51. OBRIGADA :) https://speakerdeck.com/anabastos
52. DÚVIDAS?