Off the main thread with workers !

Off the main thread with workers !

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

F9dca45f7e9e63b3b9dbd3b2cf61bd69?s=128

Mariko Kosaka

April 27, 2018
Tweet

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 ࣄ݅

  20. None
  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