Off the main thread with workers !

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