Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Off the main thread with workers !
Search
Mariko Kosaka
April 27, 2018
Technology
5
1.9k
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
Share
More Decks by Mariko Kosaka
See All by Mariko Kosaka
Web標準でつくるガラケーサイト
kosamari
17
8.3k
Evolution of Emoji 🖼🔤✨
kosamari
3
960
Web Platform ... What is it ? (Webプラットフォームのつくり方)
kosamari
2
1.1k
How to build a FIRE
kosamari
2
230
Other Decks in Technology
See All in Technology
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
120
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
1k
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
820
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
masayoshi
1
400
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
nihonbuson
PRO
0
560
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
200
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
170
私とAWSとの関わりの歩み~意志あるところに道は開けるかも?~
nagisa53
1
160
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
430
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
860
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
3
290
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
1
150
Featured
See All Featured
Bash Introduction
62gerente
614
210k
RailsConf 2023
tenderlove
30
1.2k
Agile that works and the tools we love
rasmusluckow
329
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
870
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Side Projects
sachag
455
43k
Transcript
Off the main thread with workers! NodeֶԂ30࣌ݶ @kosamari
@kosamari
ECMAScriptͷۙگใࠂ
ES2018 ݻ·Γ·ͨ͠ ʢਖ਼ࣜʹ5݄ʹυϥϑτ֬ఆͯ͠6݄ʹঝೝ༧ఆʣ
Regex ڧԽ
Ұ൪خ͍͠ͷ Named Capture Groups
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'
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'
ʢେ͞Μͱωλ͕ඃͬͨͷͰ͏Ұͭʣ Lookbehind assertions
const pattern =/(?<=\$)\d+/u; const result = pattern.exec('$42'); // ! result[0]
=== '42'
Object Rest ͱ Sprad ඪ४ʹͳΔΑ
// 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' }
// Spread properties for object literals: const personCopy ={ firstName,
lastName, ...rest }; console.log(personCopy); // { firstName: 'Sebastian', // lastName: 'Markbåge', // country: 'USA', // state: 'CA' }
Finally, Promise.prototype.finally
fetch(url) .then((response)=> response.text()) .then((text)=>{ element.textContent = text; }) .catch((error)=>{ element.textContent
= error.message; })
fetch(url) .then((response)=> response.text()) .then((text)=>{ element.textContent = text; }) .catch((error)=>{ element.textContent
= error.message; }) .finally(()=>{ hideLoadingSpinner(); });
ChromeͰ ES2018͢Ͱʹશ෦͑·͢ʂ
https://slidr.io/mathiasbynens/what-s-new-in-es2018
Smoosh ࣄ݅
None
Ұिؒ͘Β͍ࣄʹͳΒΜ͔ͬͨ
Break the Web or NOT break the Web
ʮͳΜͱͳ͘ഉଞతʯ όογϯά
https://github.com/tc39/tc39-web-draft
Off the main thread with workers! NodeֶԂ30࣌ݶ @kosamari
݁શ͘ग़͍ͯ·ͤΜ ͜Μͳಈ͖͕͋ΔΑ͍ͬͯ͏ΞοϓσʔτͰ͢
ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ TL;DR
ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ ͦ͜Worker͍ͬͯ͏ศརͳͷ͕…ʢΑͬ͠ΌʔΔ͔ʔʣ TL;DR
ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ ͦ͜Worker͍ͬͯ͏ศརͳͷ͕…ʢΑͬ͠ΌʔΔ͔ʔʣ ͋ΕɺWorkerͷ͍͘͢͝ʹ͘͘ͳ͍ʁ TL;DR
ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ ͦ͜Worker͍ͬͯ͏ศརͳͷ͕…ʢΑͬ͠ΌʔΔ͔ʔʣ ͋ΕɺWorkerͷ͍͘͢͝ʹ͘͘ͳ͍ʁ ͍͘͢͢ΔʹͲ͏͢Εྑ͍ΜͩΖ͏…ʢ͝ҙݟืूதʣ TL;DR
ͦͦWorkerͱ
Data DOMͰग़དྷͯΔ ϒϥβ ϒϥβ͔Βଧ্ͪ͛ΒΕͨ WebWorker
const worker = new Worker('worker.js');
const worker = new Worker('worker.js'); worker.postMessage(data); self.onmessage = (message) =>
{ // do something
const worker = new Worker('worker.js'); worker.postMessage(data); self.onmessage = (message) =>
{ // do something self.postMessage(data) }
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) }
ͳͥϚϧνεϨου͕ඞཁʁ ͦͦϒϥβͰඇಉظॲཧ͡Όͳ͍ͷʁ Promise͢ΔΜ͡Όͳ͍ͷʁ
࠷ۙͷΣϒΞϓϦΈΜͳ JSONσʔλΛΰχϣΰχϣ͔ͯ͠ΒDOMʹө
✔ Network
✔ Network ✔ DOM
✔ Network ✔ DOM ✗ data processing
✔ Network ✔ DOM ✗ data processing ͜Ε͕ංେԽͯ͠Δͷ͕
Does anyone like programming with workers?
ݴΘΕͯΈͨΒ…͜Εͷ͍͍ͮ͢͝Β͍ͳɻ (શʹετοΫϗϧϜީ܈ʹͳͬͯͨ)
WebWorkerπϥΠɹͦͷ̍ɿ WebWorkerΛ͏·͘͏ʹ εϨουϓʔϧతʹ εέδϡʔϥʔΛࣗͰ࣮͠ͳ͍ͱ͍͚ͳ͍
A JavaScript Scheduler API by Justin (2લͷΞΠσΞ)
Parallel JSϓϩϙʔαϧࣦʢ.NETͷPLINQΈ͍ͨͳͷʣ
WebWorkerΛྑ͍ͨ͘͠ɹٞ̍ɿ C#ͱ͔RxKotlinΈ͍ͨʹ͏·࣮͘ʁ Erlangૣ͍Β͍͠…
WebWorkerπϥΠɹͦͷ̎ɿ postMessageͰσʔλΓऔΓ͢Δͷ͕େม
postMessage({…}) postMessage({…})
SharedArrayBuffer
https://webkit.org/blog/7846/concurrent-javascript-it-can-work/
Transferable Streams
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); };
WebWorkerΛྑ͍ͨ͘͠ɹٞ̎ɿ postMessageͷAPIΛநԽ͍ͯ͘͢͠
https://github.com/GoogleChromeLabs/comlink
https://github.com/GoogleChromeLabs/clooney
WebWorkerΛྑ͍ͨ͘͠ɹٞ̏ɿ εϨʔυϓʔϧϞσϧͱϝϞϦγΣΞϞσϧ ૬ੑ͕ྑ͘ͳ͍
WebWorkerπϥΠɹͦͷ3ɿ ͦͦWebWorkerͬͯϑΝΠϧΛ ผ͚ͳ͖Ό͍͚ͳͯ͘ΊΜͲ͍͘͞
JavaScript Tagged Blocks
WebWorkerΛྑ͍ͨ͘͠ɹٞ̐ɿ εϨουϞσϧʁͦΕͱλεΫϞσϧʁ
εϨουΒͬͨθʂ ͣͬͱฦ͞ͳ͍ζϥʂ C++ ࣄऴΘͬͨͳΒ returnฦͯ͠Αʙ
ϚϧνεϨουͰͷΣϒΞϓϦ։ൃ ͲΜͳ;͏ʹϓϩάϥϜॻ͖͍ͨͰ͔͢ʁ
ݴޠ༷VMͷߏ͔Βม͑ΒΕΔͱͨ͠ Ͳ͏͍ͨ͠Ͱ͔͢ʁ
ͥͻ͝ҙݟ͍ͩ͘͞ɻ Thanks ! @kosamari