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.8k
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
950
Web Platform ... What is it ? (Webプラットフォームのつくり方)
kosamari
2
1.1k
How to build a FIRE
kosamari
2
220
Other Decks in Technology
See All in Technology
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
460
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
16k
ビギナーであり続ける/beginning
ikuodanaka
3
750
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
220
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
440
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
130
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Embracing the Ebb and Flow
colly
86
4.7k
The Language of Interfaces
destraynor
158
25k
Rails Girls Zürich Keynote
gr2m
95
14k
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