Worker power! - Speaker Deck

Slide 1

Slide 1 text

!"#$%&'()*!"#$%&' ()*!"#$%&'()*!"#$ %&'()*!"#$%&'()*! "#$%&'()*!"#$%&'( )*!"#$%&'()*!"#$% &'()*!"#$%&'()*!" #$%&'()*!"#$%&'() worker power! dan gebhardt @dgeb

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

web workers dedicated workers shared workers service workers

Slide 6

Slide 6 text

Main thread • fetching, parsing, running JS • page layout • painting • observing user interactions • manipulating the DOM

Slide 7

Slide 7 text

Main thread Worker threads

Slide 8

Slide 8 text

Concurrency is about dealing with lots of things at once. Parallelism is about doing lots of things at once. - Rob Pike

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

What happens when we exceed the limits of concurrency on the main thread? JANK

Slide 11

Slide 11 text

I know it when I see it. - US Supreme Court Justice Potter Stewart Jacobellis v. Ohio, 1964

Slide 12

Slide 12 text

60fps

Slide 13

Slide 13 text

15ms

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

• Web workers Multi-threading

Slide 18

Slide 18 text

ok, let's use workers!

Slide 19

Slide 19 text

why aren't workers already being used more often?

Slide 20

Slide 20 text

• new and unproven • lack of browser support • lack of capabilities Challenges to using workers

Slide 21

Slide 21 text

• awkward to use • awkward to test • lack of FE framework support ✅ ✅ ✅ DX Challenges to using workers

Slide 22

Slide 22 text

!"# $%& '() *!" #$% &'( )*! • async communication • no shared memory • controlled lifetime • access to browser APIs such as IndexedDB, fetch, etc. • no access to the DOM Characteristics of all workers

Slide 23

Slide 23 text

dedicated workers #

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

/assets/workers/multiplier.js /assets/app.js # ⚡

Slide 26

Slide 26 text

# Worker

Slide 27

Slide 27 text

# Worker

Slide 28

Slide 28 text

# Worker

Slide 29

Slide 29 text

demo #

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

shared workers

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

/assets/workers/incrementer.js /assets/app.js ⚡

Slide 35

Slide 35 text

MessagePort

Slide 36

Slide 36 text

demo

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Main threads Worker thread

Slide 39

Slide 39 text

service workers 2

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

https://www.youtube.com/watch?v=hr135pFCLU8

Slide 42

Slide 42 text

P R O G R E S S I V E W E B A P P C H E C K L I S T • Site is served over HTTPS • Pages are responsive • App URLs load while offline • Add to Home screen • Fast first load • And more ...

Slide 43

Slide 43 text

S E R V I C E W O R K E R A B A C K G R O U N D S C R I P T T H AT A C T S A S A P R O X Y B E T W E E N Y O U R A P P L I C AT I O N A N D I T S E N V I R O N M E N T.

Slide 44

Slide 44 text

// Register service worker if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js') .then(function(registration) { // Registration succeeded }, function(err) { // Registration failed }); }); } S E R V I C E W O R K E R / a p p . j s

Slide 45

Slide 45 text

var CACHE_NAME = 'todo-dino-v1'; Var CACHE_URLS = ['/', '/app.js', '/app.css']; self.addEventListener('install', function(event) { // Install app shell event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { return cache.addAll(CACHE_URLS); }) ); }); S E R V I C E W O R K E R / s w. j s

Slide 46

Slide 46 text

self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) // Check cache .then(function(response) { if (response) { return response; // Return from cache } return fetch(event.request); // Fetch if needed }) ); }); S E R V I C E W O R K E R / s w. j s

Slide 47

Slide 47 text

DX improvements

Slide 48

Slide 48 text

ember-workers

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

promise-worker

Slide 51

Slide 51 text

/assets/workers/multiplier.js /assets/app.js # ⚡

Slide 52

Slide 52 text

/assets/workers/promisified-multiplier.js /assets/app.js ⚡

Slide 53

Slide 53 text

testing

Slide 54

Slide 54 text

Testing tips • Write modular code • Unit test your modules (w/o workers) • Stub workers in your app

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

https://www.youtube.com/watch?v=voFXsFRc6jU

Slide 57

Slide 57 text

!"#$%&'()*!"#$%&' ()*!"#$%&'()*!"#$ %&'()*!"#$%&'()*! "#$%&'()*!"#$%&'( )*!"#$%&'()*!"#$% &'()*!"#$%&'()*!" #$%&'()*!"#$%&'() Thanks! @dgeb http://bit.ly/ember-workers