Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Fcfcfbcdbe8543b6d76c7566d6e1693c?s=128

Ana Luiza Portello

December 20, 2017
Tweet

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/

  9. None
  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

  21. None
  22. NETWORK FIRST

  23. None
  24. None
  25. None
  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

  31. None
  32. INSTALAÇÃO

  33. MANIFEST.JSON

  34. MANIFEST.JSON

  35. None
  36. HTTPS

  37. CASOS DE USO

  38. TRANFORMANDO SEU APP EM PWA

  39. CACHEANDO

  40. None
  41. None
  42. sw-precache-webpack-plugin

  43. localStorage localStorage.setItem(“name”, “Ana”) localStorage.getItem(“name”) // “Ana” localStorage.removeItem(“name”)

  44. localStorage

  45. INSTALAVEL

  46. None
  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?