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

Você realmente sabe JS?

Você realmente sabe JS?

Será que todo mundo realmente sabe Javascript? Será que, independente do nosso nível de conhecimento, do mais básico ao mais avançado, realmente sabemos sobre Vanilla JS e como ele funciona? Nessa talk não falarei de frameworks, mas sobre algumas API's nativas do Javascript, como Web Share, Credential Management, Payment, Fetch, entre outras.

393a8afb36c128e762e5130549d22dbe?s=128

Fernanda Bernardo

July 13, 2018
Tweet

Transcript

  1. Você realmente sabe Javascript? Fernanda Bernardo

  2. SIM NÃO

  3. None
  4. None
  5. Vanilla JS

  6. FERNANDA BERNARDO Engenheira de Software @Elo7 @help4papers Mentora http://fernandabernardo.com.br @Feh_Bernardo

  7. None
  8. None
  9. https://octoverse.github.com/

  10. JS Puro?

  11. Web APIs

  12. O que são APIs?

  13. Browser API

  14. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction

  15. Browser API API terceiros Libs Frameworks

  16. None
  17. WARNING Códigos de Enhancement Não funcionarão em todos os browsers!

  18. None
  19. Usuário digitar dados lembrar qual a senha

  20. None
  21. Credential Management API

  22. None
  23. 3 pilares salvar / gerenciar dados permitir acesso com um

    toque simplificar fluxo de acesso
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. Web Share API

  38. None
  39. None
  40. click

  41. None
  42. None
  43. None
  44. Você já comprou pelo celular?

  45. E se… comprar fosse fácil?

  46. Payment API

  47. None
  48. Formulários de compra

  49. Intermediário Padronizar Segurança Compatibilidade

  50. Processo do pagamento Novo PaymentRequest Browser UI: selecionar pagamento Browser

    passa dados para o site
  51. None
  52. let methodData = [{ supportedMethods: [ 'visa', 'mastercard'] }]; methodData

  53. None
  54. details

  55. None
  56. var options = { requestShipping: true, requestPayerEmail: true, requestPayerPhone: true,

    requestPayerName: true }; options
  57. Como eu faço algo aparecer?

  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. XML HttpRequest

  65. Fetch API

  66. None
  67. None
  68. web speech API

  69. None
  70. None
  71. if (speechSynthesis.onvoiceschanged !== undefined) { speechSynthesis.onvoiceschanged = populateVoiceList; }

  72. None
  73. None
  74. Framework Puro

  75. None
  76. None
  77. https://webapi-webapi.wedeploy.io/ https://github.com/FernandaBernardo/web-api-app

  78. https://github.com/hjdesigner/ambient-light-api https://github.com/FiliJS/ambient-light-api Ambient Light API

  79. Ambient Light API

  80. Estude coisas novas! Se divirta! Aprenda!

  81. https://developer.mozilla.org/en-US/docs/Web/API https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction https://braziljs.org/blog/credentials-management-api-terra-webmail/ https://developers.google.com/web/fundamentals/security/credential-management/ https://engenharia.elo7.com.br/credential-management-api/ https://codeburst.io/the-web-share-api-is-here-cb651d84eccd https://developers.google.com/web/updates/2016/09/navigator-share https://developers.google.com/web/fundamentals/payments https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API

    Referências
  82. http://fernandabernardo.com.br @Feh_Bernardo

  83. bit.ly/front-basico 40% desconto