$30 off During Our Annual Pro Sale. View Details »

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

Mariko Kosaka

April 27, 2018
Tweet

More Decks by Mariko Kosaka

Other Decks in Technology

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