Off the main thread with workers !

Slide 1

Slide 1 text

Off the main thread with workers! NodeֶԂ30࣌ݶ໨ @kosamari

Slide 2

Slide 2 text

@kosamari

Slide 3

Slide 3 text

ECMAScriptͷۙگใࠂ

Slide 4

Slide 4 text

ES2018 ݻ·Γ·ͨ͠ ʢਖ਼ࣜʹ͸5݄ʹυϥϑτ֬ఆͯ͠6݄ʹঝೝ༧ఆʣ

Slide 5

Slide 5 text

Regex ڧԽ

Slide 6

Slide 6 text

Ұ൪خ͍͠ͷ͸ Named Capture Groups

Slide 7

Slide 7 text

const pattern =/(\d{4})-(\d{2})-(\d{2})/u; const result = pattern.exec(‘2018-03-06'); // ! result[0] === '2018-03-06' // ! result[1] === '2018' // ! result[2] === '03' // ! result[3] === '06'

Slide 8

Slide 8 text

const pattern =/(?\d{4})-(?\d{2})-(?\d{2})/u; const result = pattern.exec('2018-03-06'); // ! result.groups.year === '2018' // ! result.groups.month === '03' // ! result.groups.day === '06'

Slide 9

Slide 9 text

ʢେ௡͞Μͱωλ͕ඃͬͨͷͰ΋͏Ұͭʣ Lookbehind assertions

Slide 10

Slide 10 text

const pattern =/(?<=\$)\d+/u; const result = pattern.exec('$42'); // ! result[0] === '42'

Slide 11

Slide 11 text

Object Rest ͱ Sprad ΋ඪ४ʹͳΔΑ

Slide 12

Slide 12 text

// Rest properties for object destructuring assignment: const person = { firstName:’Sebastian', lastName:’Markbåge', country:'USA', state:’CA'}; const{ firstName, lastName, ...rest } = person; console.log(firstName); // Sebastian console.log(lastName); // Markbåge console.log(rest); // { country: 'USA', state: 'CA' }

Slide 13

Slide 13 text

// Spread properties for object literals: const personCopy ={ firstName, lastName, ...rest }; console.log(personCopy); // { firstName: 'Sebastian', // lastName: 'Markbåge', // country: 'USA', // state: 'CA' }

Slide 14

Slide 14 text

Finally, Promise.prototype.finally

Slide 15

Slide 15 text

fetch(url) .then((response)=> response.text()) .then((text)=>{ element.textContent = text; }) .catch((error)=>{ element.textContent = error.message; })

Slide 16

Slide 16 text

fetch(url) .then((response)=> response.text()) .then((text)=>{ element.textContent = text; }) .catch((error)=>{ element.textContent = error.message; }) .finally(()=>{ hideLoadingSpinner(); });

Slide 17

Slide 17 text

ChromeͰ͸ ES2018͢Ͱʹશ෦࢖͑·͢ʂ

Slide 18

Slide 18 text

https://slidr.io/mathiasbynens/what-s-new-in-es2018

Slide 19

Slide 19 text

Smoosh ࣄ݅

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Ұिؒ͘Β͍࢓ࣄʹͳΒΜ͔ͬͨ

Slide 22

Slide 22 text

Break the Web or NOT break the Web

Slide 23

Slide 23 text

ʮͳΜͱͳ͘ഉଞతʯ  όογϯά

Slide 24

Slide 24 text

https://github.com/tc39/tc39-web-draft

Slide 25

Slide 25 text

Off the main thread with workers! NodeֶԂ30࣌ݶ໨ @kosamari

Slide 26

Slide 26 text

݁࿦͸શ͘ग़͍ͯ·ͤΜ ͜Μͳಈ͖͕͋ΔΑ͍ͬͯ͏ΞοϓσʔτͰ͢

Slide 27

Slide 27 text

ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ TL;DR

Slide 28

Slide 28 text

ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ ͦ͜͸Worker͍ͬͯ͏ศརͳ΋ͷ͕…ʢΑͬ͠Όʔ΍Δ͔ʔʣ TL;DR

Slide 29

Slide 29 text

ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ ͦ͜͸Worker͍ͬͯ͏ศརͳ΋ͷ͕…ʢΑͬ͠Όʔ΍Δ͔ʔʣ ͋ΕɺWorker΋ͷ͘͢͝࢖͍ʹ͘͘ͳ͍ʁ TL;DR

Slide 30

Slide 30 text

ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ ͦ͜͸Worker͍ͬͯ͏ศརͳ΋ͷ͕…ʢΑͬ͠Όʔ΍Δ͔ʔʣ ͋ΕɺWorker΋ͷ͘͢͝࢖͍ʹ͘͘ͳ͍ʁ ࢖͍΍͘͢͢Δʹ͸Ͳ͏͢Ε͹ྑ͍ΜͩΖ͏…ʢ͝ҙݟืूதʣ TL;DR

Slide 31

Slide 31 text

ͦ΋ͦ΋Workerͱ͸

Slide 32

Slide 32 text

Data DOMͰग़དྷͯΔ ࿭੕ϒϥ΢β ࿭੕ϒϥ΢β͔Βଧ্ͪ͛ΒΕͨ WebWorker

Slide 33

Slide 33 text

const worker = new Worker('worker.js');

Slide 34

Slide 34 text

const worker = new Worker('worker.js'); worker.postMessage(data); self.onmessage = (message) => { // do something

Slide 35

Slide 35 text

const worker = new Worker('worker.js'); worker.postMessage(data); self.onmessage = (message) => { // do something self.postMessage(data) }

Slide 36

Slide 36 text

const worker = new Worker('worker.js'); worker.postMessage(data); worker.onmessage = (message) => { // do something on main thread }; self.onmessage = (message) => { // do something high cost self.postMessage(data) }

Slide 37

Slide 37 text

ͳͥϚϧνεϨου͕ඞཁʁ ͦ΋ͦ΋ϒϥ΢βͰ͸ඇಉظॲཧ͡Όͳ͍ͷʁ Promise͢ΔΜ͡Όͳ͍ͷʁ

Slide 38

Slide 38 text

࠷ۙͷ΢ΣϒΞϓϦ͸ΈΜͳ JSONσʔλΛΰχϣΰχϣ͔ͯ͠ΒDOMʹ൓ө

Slide 39

Slide 39 text

✔ Network

Slide 40

Slide 40 text

✔ Network ✔ DOM

Slide 41

Slide 41 text

✔ Network ✔ DOM ✗ data processing

Slide 42

Slide 42 text

✔ Network ✔ DOM ✗ data processing ͜Ε͕ංେԽͯ͠Δͷ͕໰୊

Slide 43

Slide 43 text

Does anyone like programming with workers?

Slide 44

Slide 44 text

ݴΘΕͯΈͨΒ…͜Ε΋ͷ͍͢͝࢖͍ͮΒ͍ͳɻ  (׬શʹετοΫϗϧϜ঱ީ܈ʹͳͬͯͨ)

Slide 45

Slide 45 text

WebWorkerπϥΠɹͦͷ̍ɿ  WebWorkerΛ͏·͘࢖͏ʹ͸ εϨουϓʔϧతʹ εέδϡʔϥʔΛࣗ෼Ͱ࣮૷͠ͳ͍ͱ͍͚ͳ͍

Slide 46

Slide 46 text

A JavaScript Scheduler API by Justin (2೥લͷΞΠσΞ)

Slide 47

Slide 47 text

Parallel JSϓϩϙʔαϧ͸ࣦ଎ʢ.NETͷPLINQΈ͍ͨͳͷʣ

Slide 48

Slide 48 text

WebWorkerΛྑ͍ͨ͘͠ɹٞ࿦̍ɿ  C#ͱ͔RxKotlinΈ͍ͨʹ͏·࣮͘૷ʁ Erlang΋ૣ͍Β͍͠…

Slide 49

Slide 49 text

WebWorkerπϥΠɹͦͷ̎ɿ  postMessageͰσʔλ΍ΓऔΓ͢Δͷ͕େม

Slide 50

Slide 50 text

postMessage({…}) postMessage({…})

Slide 51

Slide 51 text

SharedArrayBuffer

Slide 52

Slide 52 text

https://webkit.org/blog/7846/concurrent-javascript-it-can-work/

Slide 53

Slide 53 text

Transferable Streams

Slide 54

Slide 54 text

importScripts('vp10decode.js', 'mp4encode.js'); const transcoder = new TransformStream({ transform(chunk, controller) { const decoded = vp10decode(chunk); controller.enqueue(mp4encode(decoded)); } }); postMessage(transcoder, [transcoder]); const worker = new Worker('transcode.js'); worker.onmessage = event => { const transcoder = event.data; await fetch('bunny.vp10') .pipeThrough(transcoder) .pipeTo(videoSink); };

Slide 55

Slide 55 text

WebWorkerΛྑ͍ͨ͘͠ɹٞ࿦̎ɿ  postMessageͷAPIΛந৅Խͯ͠࢖͍΍͘͢

Slide 56

Slide 56 text

https://github.com/GoogleChromeLabs/comlink

Slide 57

Slide 57 text

https://github.com/GoogleChromeLabs/clooney

Slide 58

Slide 58 text

WebWorkerΛྑ͍ͨ͘͠ɹٞ࿦̏ɿ  εϨʔυϓʔϧϞσϧͱϝϞϦγΣΞϞσϧ͸ ૬ੑ͕ྑ͘ͳ͍

Slide 59

Slide 59 text

WebWorkerπϥΠɹͦͷ3ɿ  ͦ΋ͦ΋WebWorkerͬͯϑΝΠϧΛ ผ͚ͳ͖Ό͍͚ͳͯ͘ΊΜͲ͍͘͞

Slide 60

Slide 60 text

JavaScript Tagged Blocks

Slide 61

Slide 61 text

WebWorkerΛྑ͍ͨ͘͠ɹٞ࿦̐ɿ  εϨουϞσϧʁͦΕͱ΋λεΫϞσϧʁ

Slide 62

Slide 62 text

εϨου΋Βͬͨθʂ ͣͬͱฦ͞ͳ͍ζϥʂ C++ ࢓ࣄऴΘͬͨͳΒ returnฦͯ͠Αʙ