Web Workers & Service Workers

Transcript

1. Web Workers
   e Service Workers
   

   View Slide

2. senior solutions architect_
   quem sou eu_
   /khaosdoctor @_staticvoid
   lsantos.dev
   @khaosdoctor
   nindoo.ai
   

   View Slide

3. obarra.co
   trainingcenter.io
   abcdevelopers.org
   

   View Slide

4. slsweek.netlify.com
   

   View Slide

5. Web Workers
   

   View Slide

6. O JavaScript é assíncrono
   

   View Slide

7. Em uma thread...
   

   View Slide

8. Antes dos Web Workers
   

   View Slide

9. Manipulação de DOM
   Requests de API
   Interação de usuário
   Processamento
   pesado
   Próximos eventos
   

   View Slide

10. Depois dos Web Workers
    

    View Slide

11. Manipulação de DOM
    Requests de API
    Interação de usuário Próximos eventos
    Processamento
    pesado
    

    View Slide

12. Web workers nos
    permitem criar threads
    paralelas no JavaScript
    

    View Slide

13. Arquivos externos
    

    View Slide

14. Comunicação por mensagens
    

    View Slide

15. View Slide

16. View Slide

17. demo
    

    View Slide

18. https://lsantos-web-workers.now.sh/
    

    View Slide

19. - dedicated workers
    - shared workers
    

    View Slide

20. Service Workers
    

    View Slide

21. Ciclo de vida
    

    View Slide

22. Download
    Installation
    Activation
    

    View Slide

23. update
    

    View Slide

24. View Slide

25. Escopo
    

    View Slide

26. View Slide

27. Principais usos
    

    View Slide

28. Gerenciamento de cache
    

    View Slide

29. Push Notifications
    

    View Slide

30. PWAs
    

    View Slide

31. demo
    

    View Slide

32. https://lsantos-service-workers.now.sh/
    

    View Slide

33. referências_
    - https://lsantos-web-workers.now.sh/
    - https://auth0.com/blog/speedy-introduction-to-web-workers/
    - https://braziljs.org/blog/javascript-multi-threading-com-web-workers-2/
    - https://pt.stackoverflow.com/questions/240661/qual-é-a-diferença-entre-service-worker-e-web-worker
    - https://pt.stackoverflow.com/questions/46926/o-que-s%C3%A3o-web-workers-e-como-utiliz%C3%A1-los
    - https://www.w3schools.com/html/html5_webworkers.asp
    - https://www.html5rocks.com/pt/tutorials/workers/basics/
    - https://developer.mozilla.org/pt-BR/docs/Web/API/Worker
    - https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them-a5
    47c0757f6a
    - https://github.com/khaosdoctor/web-workers-and-service-workers
    - https://serviceworke.rs/
    - https://blog.sessionstack.com/how-javascript-works-service-workers-their-life-cycle-and-use-cases-52b19ad98b58
    

    View Slide

34. /khaosdoctor @_staticvoid
    lsantos.dev @khaosdoctor
    obrigado_
    

    View Slide