Web Workers

Repo https://github.com/mahcr/simple-web-worker

Transcript

1. Web Workers ‍♂‍♀‍♂‍♀‍♂‍♀
2. @malvarezcr ¿Quién soy? Web Practice Lead Co-Organizador de Angular Costa Rica Fan de JS, TS, NG, Web Techs, Pizza, Emojis Mariano Álvarez
3. @malvarezcr GitHub https://github.com/mahcr/simple-web-worker
4. ¿Han utilizado un Web Worker?
5. @malvarezcr ¿Cómo funciona Javascript? Single Threaded Event Loop
6. @malvarezcr ¿Cómo funciona Javascript? Conceptos • Heap • Stack Importante: First In - Last Out • Web API • Callback queue Importante: First In - First Out Referencia https://medium.com/@Rahulx1/understanding-event-loop-call-stack-event-job-queue-in-javascript-63dcd2c71ecd
7. @malvarezcr ¿Cómo funciona Javascript? Ejemplo #1 Referencia https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
8. @malvarezcr ¿Cómo funciona Javascript? Ejemplo #2 Referencia https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
9. @malvarezcr ¿Cómo funciona Javascript? Ejemplo #3
10. @malvarezcr ¿Qué es un Web Worker? Es una especificación que define un API para poder correr tareas en un segundo plano
11. @malvarezcr ¿Qué es un Web Worker? Conceptos • Existen 2 tipos: Dedicated y Shared Workers • OnMessage y postMessage son funciones que permiten la comunicación Shared se comunican igual pero deben usar el port object • Soportan importScripts • Un worker puede llamar otros workers • Los objetos son serializados y deserializados • No se puede manipular el DOM • Debe estar en el mismo dominio en el que se va utilizar
12. @malvarezcr ¿Qué es un Web Worker?
13. ¿Han utilizado un Web Worker?
14. @malvarezcr Consejos • Utilizarlos solo en tareas muy intensas. En pequeñas tareas no se ve la mejora de rendimiento • Siempre validen que el navegador / NodeJS lo soporte • Tareas comunes en los que se usan: revision de ortografia, caching de assets, prefetching
15. Demo
16. ⚡Conclusión
17. @malvarezcr Links de referencia • Ejemplo Web Worker https://github.com/mahcr/simple-web-worker • Javascript concurrency https://developer.mozilla.org/en-US/docs/Web/ API/Web_Workers_API/Using_web_workers • Twitter: @malvarezcr / Medium: @mahcr Mariano Álvarez
18. Angular Costa Rica • Facebook, YouTube, Medium @angularcostarica • Twitter @angularcr