Off the main thread with workers !

This is a presentation slide I presented at Node学園 in Tokyo on April 27th, 2018

Transcript

1. Off the main thread with workers! NodeֶԂ30࣌ݶ໨ @kosamari
2. @kosamari
3. ECMAScriptͷۙگใࠂ
4. ES2018 ݻ·Γ·ͨ͠ ʢਖ਼ࣜʹ͸5݄ʹυϥϑτ֬ఆͯ͠6݄ʹঝೝ༧ఆʣ
5. Regex ڧԽ
6. Ұ൪خ͍͠ͷ͸ Named Capture Groups
7. 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'
8. const pattern =/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u; const result = pattern.exec('2018-03-06'); // ! result.groups.year === '2018' // ! result.groups.month === '03' // ! result.groups.day === '06'
9. ʢେ௡͞Μͱωλ͕ඃͬͨͷͰ΋͏Ұͭʣ Lookbehind assertions
10. const pattern =/(?<=\$)\d+/u; const result = pattern.exec('$42'); // ! result[0] === '42'
11. Object Rest ͱ Sprad ΋ඪ४ʹͳΔΑ
12. // 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' }
13. // Spread properties for object literals: const personCopy ={ firstName, lastName, ...rest }; console.log(personCopy); // { firstName: 'Sebastian', // lastName: 'Markbåge', // country: 'USA', // state: 'CA' }
14. Finally, Promise.prototype.finally
15. fetch(url) .then((response)=> response.text()) .then((text)=>{ element.textContent = text; }) .catch((error)=>{ element.textContent = error.message; })
16. fetch(url) .then((response)=> response.text()) .then((text)=>{ element.textContent = text; }) .catch((error)=>{ element.textContent = error.message; }) .finally(()=>{ hideLoadingSpinner(); });
17. ChromeͰ͸ ES2018͢Ͱʹશ෦࢖͑·͢ʂ
18. https://slidr.io/mathiasbynens/what-s-new-in-es2018
19. Smoosh ࣄ݅
21. Ұिؒ͘Β͍࢓ࣄʹͳΒΜ͔ͬͨ
22. Break the Web or NOT break the Web
23. ʮͳΜͱͳ͘ഉଞతʯ
 όογϯά
24. https://github.com/tc39/tc39-web-draft
25. Off the main thread with workers! NodeֶԂ30࣌ݶ໨ @kosamari
26. ݁࿦͸શ͘ग़͍ͯ·ͤΜ ͜Μͳಈ͖͕͋ΔΑ͍ͬͯ͏ΞοϓσʔτͰ͢
27. ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ TL;DR
28. ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ ͦ͜͸Worker͍ͬͯ͏ศརͳ΋ͷ͕…ʢΑͬ͠Όʔ΍Δ͔ʔʣ TL;DR
29. ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ ͦ͜͸Worker͍ͬͯ͏ศརͳ΋ͷ͕…ʢΑͬ͠Όʔ΍Δ͔ʔʣ ͋ΕɺWorker΋ͷ͘͢͝࢖͍ʹ͘͘ͳ͍ʁ TL;DR
30. ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ ͦ͜͸Worker͍ͬͯ͏ศརͳ΋ͷ͕…ʢΑͬ͠Όʔ΍Δ͔ʔʣ ͋ΕɺWorker΋ͷ͘͢͝࢖͍ʹ͘͘ͳ͍ʁ ࢖͍΍͘͢͢Δʹ͸Ͳ͏͢Ε͹ྑ͍ΜͩΖ͏…ʢ͝ҙݟืूதʣ TL;DR
31. ͦ΋ͦ΋Workerͱ͸
32. Data DOMͰग़དྷͯΔ ࿭੕ϒϥ΢β ࿭੕ϒϥ΢β͔Βଧ্ͪ͛ΒΕͨ WebWorker
33. const worker = new Worker('worker.js');
34. const worker = new Worker('worker.js'); worker.postMessage(data); self.onmessage = (message) => { // do something
35. const worker = new Worker('worker.js'); worker.postMessage(data); self.onmessage = (message) => { // do something self.postMessage(data) }
36. 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) }
37. ͳͥϚϧνεϨου͕ඞཁʁ ͦ΋ͦ΋ϒϥ΢βͰ͸ඇಉظॲཧ͡Όͳ͍ͷʁ Promise͢ΔΜ͡Όͳ͍ͷʁ
38. ࠷ۙͷ΢ΣϒΞϓϦ͸ΈΜͳ JSONσʔλΛΰχϣΰχϣ͔ͯ͠ΒDOMʹ൓ө
39. ✔ Network
40. ✔ Network ✔ DOM
41. ✔ Network ✔ DOM ✗ data processing
42. ✔ Network ✔ DOM ✗ data processing ͜Ε͕ංେԽͯ͠Δͷ͕໰୊
43. Does anyone like programming with workers?
44. ݴΘΕͯΈͨΒ…͜Ε΋ͷ͍͢͝࢖͍ͮΒ͍ͳɻ
 (׬શʹετοΫϗϧϜ঱ީ܈ʹͳͬͯͨ)
45. WebWorkerπϥΠɹͦͷ̍ɿ
 WebWorkerΛ͏·͘࢖͏ʹ͸ εϨουϓʔϧతʹ εέδϡʔϥʔΛࣗ෼Ͱ࣮૷͠ͳ͍ͱ͍͚ͳ͍
46. A JavaScript Scheduler API by Justin (2೥લͷΞΠσΞ)
47. Parallel JSϓϩϙʔαϧ͸ࣦ଎ʢ.NETͷPLINQΈ͍ͨͳͷʣ
48. WebWorkerΛྑ͍ͨ͘͠ɹٞ࿦̍ɿ
 C#ͱ͔RxKotlinΈ͍ͨʹ͏·࣮͘૷ʁ Erlang΋ૣ͍Β͍͠…
49. WebWorkerπϥΠɹͦͷ̎ɿ
 postMessageͰσʔλ΍ΓऔΓ͢Δͷ͕େม
50. postMessage({…}) postMessage({…})
51. SharedArrayBuffer
52. https://webkit.org/blog/7846/concurrent-javascript-it-can-work/
53. Transferable Streams
54. 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); };
55. WebWorkerΛྑ͍ͨ͘͠ɹٞ࿦̎ɿ
 postMessageͷAPIΛந৅Խͯ͠࢖͍΍͘͢
56. https://github.com/GoogleChromeLabs/comlink
57. https://github.com/GoogleChromeLabs/clooney
58. WebWorkerΛྑ͍ͨ͘͠ɹٞ࿦̏ɿ
 εϨʔυϓʔϧϞσϧͱϝϞϦγΣΞϞσϧ͸ ૬ੑ͕ྑ͘ͳ͍
59. WebWorkerπϥΠɹͦͷ3ɿ
 ͦ΋ͦ΋WebWorkerͬͯϑΝΠϧΛ ผ͚ͳ͖Ό͍͚ͳͯ͘ΊΜͲ͍͘͞
60. JavaScript Tagged Blocks
61. WebWorkerΛྑ͍ͨ͘͠ɹٞ࿦̐ɿ
 εϨουϞσϧʁͦΕͱ΋λεΫϞσϧʁ
62. εϨου΋Βͬͨθʂ ͣͬͱฦ͞ͳ͍ζϥʂ C++ ࢓ࣄऴΘͬͨͳΒ returnฦͯ͠Αʙ
63. ϚϧνεϨουͰͷ΢ΣϒΞϓϦ։ൃ ͲΜͳ;͏ʹϓϩάϥϜॻ͖͍ͨͰ͔͢ʁ
64. ݴޠ࢓༷΍VMͷߏ੒͔Βม͑ΒΕΔͱͨ͠ Ͳ͏͍ͨ͠Ͱ͔͢ʁ
65. ͥͻ͝ҙݟ͍ͩ͘͞ɻ Thanks ! 
 @kosamari