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

How to Work the Web with Web Workers

84d9ee61473d7bc95c299da9a7ec0227?s=47 Trezy
August 02, 2019

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.

84d9ee61473d7bc95c299da9a7ec0227?s=128

Trezy

August 02, 2019
Tweet

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