What is a web worker? Let's talk about it.

1. Web Workers
Eduard A. Martinez R.
Globant

2. About Me
● Web UI Developer
● +2 years in Globant
● Member of Transformers
POD
● Trying to be a singer
eduard.martinez@globant.com

3. Let’s talk about…
Web Workers!

5. Web workers to THE
RESCUE!

7. “A web worker is a
JavaScript that runs in the
background, independently
of other scripts, without
affecting the performance of
the page”
Web Hypertext Application Technology Working Group
(WHATWG)

10. But wait...

11. “Wasn’t JavaScript a
single-threaded
language?”.

12. Available Features
● The navigator object
● The location object (read-only)
● XMLHttpRequest
● setTimeout()/clearTimeout() and setInterval()/clearInterval()
● The Application Cache
● Importing external scripts using importScripts()
● Creating other web workers

13. Unavailable Features
● The DOM (it’s not thread-safe)
● The window object
● The document object
● The parent object

14. Types
● Dedicated workers
● Shared workers
● Service workers

15. Dedicated Workers

16. Dedicated Workers

18. Dedicated Workers
Example

19. Shared Workers

20. Shared Workers

21. Shared Workers
Ports are the key!

23. Shared Workers
Example

24. Dedicated
Workers
Shared
Workers
Service Workers

25. Service Workers

26. Service Workers

27. Service Workers

28. Service Workers

29. Service Workers
Example

30. Vestibulum congue
Vestibulum congueVestibulum congue
Offline Content
Background SyncPush Notifications
PWA

31. Libraries
● CatilinJS
● Threads.js
● UpUp (Offline Library)
● Workbox (Service Workers)
… And so much more

32. Limitations
● Don’t have DOM interaction
● Send a function into postMessage() is not allowed
● High memory cost
● postMessage can only transmit strings
● Not intended to be used in big numbers

33. Questions?

34. Thank you!