How to Work the Web with Web Workers

Javascript is a single-threaded language, but it doesn't have to be.

Web Workers allow us to offload heavy operations from the UI thread, yet they're often neglected for anything beyond handling offline web apps. The capacity that they hold for transforming the way we write code in Javascript is huge! I'll dive into how Web Workers can be used to speed up page loads, offload time-consuming calculations, restore magic to our lives, and make a little video game character jump around on the screen. Boing boing.

Transcript

1. How to Work the Web with Web Workers by Trezy
2. I’m Trezy? • Over a decade as a Software Engineer ! • I like CSS • I like JavaScript • I talk a lot • I like Web Workers
3. I’m kinda social Twitter: TrezyCodes Twitch: TrezyCodes Instagram: TrezyCodes LinkedIn: /in/trezy Website: trezy.com
4. Questions https://slido.com #X593
5. Watch the slides! https://s.trezy.sh/jsf-ww
6. Volunteers
7. Do you know what a Web Worker is? Question #1
8. Have you used a Web Worker? Question #2
9. Was it to make a site work offline? Question #3
10. Did you copy that Web Worker from StackOverflow? Question #4
11. Did you read the code you copied from StackOverflow? Question #5
12. Web workers are f@(%ing awesome by Trezy Alternate Title:
13. –Alex “Of course Trezy's talk is about web workers. If he wasn't already married to Meg, the man would marry a web worker.”
14. Approximately people that have never used web Workers By the numbers 1,337
15. Approximately people that have never used web Workers By the numbers 1,337
16. Approximately people that have never used web Workers By the numbers 1,337
17. What’s a Web Worker? A JavaScript script that runs in the background, independent of user interface scripts. Web Workers can utilize multi-core processors to enable JavaScript to be a
 multi-threaded language.
18. JavaScript is single-threaded
19. JavaScript is single-threaded This is a lie.
20. JavaScript is multi-threaded
21. JavaScript is multi-threaded
22. What’s multi-threading?
23. What’s multi-threading?
24. What’s multi-threading?
25. Human multi-threading
26. Types of Workers • Dedicated Workers • Shared Workers • Service Workers • Audio Worklets
27. How well is it supported?
28. How well is it supported? ಠ_ಠ
29. ಠ_ಠ
30. THERE’S ABOUT TO BE CODE ON THE SCREEN!
31. Worker Code
32. UI Code
33. Let’s look at a real world example
34. DANGER ZONE
35. Recap Time! • It’s how awesome Web Workers are • Web Workers have more support than Dr. Scholl • JavaScript is no longer single-threaded • You’re all going to leave here and start using Web Workers right away (mostly)
36. Thanks and Stuff ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ Twitter: TrezyCodes Twitch: TrezyCodes Instagram: TrezyCodes LinkedIn: /in/trezy Website: trezy.com