Slide 1

Slide 1 text

How to Work the Web with Web Workers by Trezy

Slide 2

Slide 2 text

I’m Trezy? • Over a decade as a Software Engineer ! • I like CSS • I like JavaScript • I talk a lot • I like Web Workers

Slide 3

Slide 3 text

I’m kinda social Twitter: TrezyCodes Twitch: TrezyCodes Instagram: TrezyCodes LinkedIn: /in/trezy Website: trezy.com

Slide 4

Slide 4 text

Questions https://slido.com #X593

Slide 5

Slide 5 text

Watch the slides! https://s.trezy.sh/jsf-ww

Slide 6

Slide 6 text

Volunteers

Slide 7

Slide 7 text

Do you know what a Web Worker is? Question #1

Slide 8

Slide 8 text

Have you used a Web Worker? Question #2

Slide 9

Slide 9 text

Was it to make a site work offline? Question #3

Slide 10

Slide 10 text

Did you copy that Web Worker from StackOverflow? Question #4

Slide 11

Slide 11 text

Did you read the code you copied from StackOverflow? Question #5

Slide 12

Slide 12 text

Web workers are f@(%ing awesome by Trezy Alternate Title:

Slide 13

Slide 13 text

–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.”

Slide 14

Slide 14 text

Approximately people that have never used web Workers By the numbers 1,337

Slide 15

Slide 15 text

Approximately people that have never used web Workers By the numbers 1,337

Slide 16

Slide 16 text

Approximately people that have never used web Workers By the numbers 1,337

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

JavaScript is single-threaded

Slide 19

Slide 19 text

JavaScript is single-threaded This is a lie.

Slide 20

Slide 20 text

JavaScript is multi-threaded

Slide 21

Slide 21 text

JavaScript is multi-threaded

Slide 22

Slide 22 text

What’s multi-threading?

Slide 23

Slide 23 text

What’s multi-threading?

Slide 24

Slide 24 text

What’s multi-threading?

Slide 25

Slide 25 text

Human multi-threading

Slide 26

Slide 26 text

Types of Workers • Dedicated Workers • Shared Workers • Service Workers • Audio Worklets

Slide 27

Slide 27 text

How well is it supported?

Slide 28

Slide 28 text

How well is it supported? ಠ_ಠ

Slide 29

Slide 29 text

ಠ_ಠ

Slide 30

Slide 30 text

THERE’S ABOUT TO BE CODE ON THE SCREEN!

Slide 31

Slide 31 text

Worker Code

Slide 32

Slide 32 text

UI Code

Slide 33

Slide 33 text

Let’s look at a real world example

Slide 34

Slide 34 text

DANGER ZONE

Slide 35

Slide 35 text

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)

Slide 36

Slide 36 text

Thanks and Stuff ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ Twitter: TrezyCodes Twitch: TrezyCodes Instagram: TrezyCodes LinkedIn: /in/trezy Website: trezy.com