Slide 1
Slide 1 text
Off
the main thread
with workers!
NodeֶԂ30࣌ݶ @kosamari
Slide 2
Slide 2 text
@kosamari
Slide 3
Slide 3 text
ECMAScriptͷۙگใࠂ
Slide 4
Slide 4 text
ES2018 ݻ·Γ·ͨ͠
ʢਖ਼ࣜʹ5݄ʹυϥϑτ֬ఆͯ͠6݄ʹঝೝ༧ఆʣ
Slide 5
Slide 5 text
Regex ڧԽ
Slide 6
Slide 6 text
Ұ൪خ͍͠ͷ
Named Capture Groups
Slide 7
Slide 7 text
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'
Slide 8
Slide 8 text
const pattern =/(?\d{4})-(?\d{2})-(?\d{2})/u;
const result = pattern.exec('2018-03-06');
// ! result.groups.year === '2018'
// ! result.groups.month === '03'
// ! result.groups.day === '06'
Slide 9
Slide 9 text
ʢେ͞Μͱωλ͕ඃͬͨͷͰ͏Ұͭʣ
Lookbehind assertions
Slide 10
Slide 10 text
const pattern =/(?<=\$)\d+/u;
const result = pattern.exec('$42');
// ! result[0] === '42'
Slide 11
Slide 11 text
Object Rest ͱ Sprad
ඪ४ʹͳΔΑ
Slide 12
Slide 12 text
// 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' }
Slide 13
Slide 13 text
// Spread properties for object literals:
const personCopy ={ firstName, lastName, ...rest };
console.log(personCopy);
// { firstName: 'Sebastian',
// lastName: 'Markbåge',
// country: 'USA',
// state: 'CA' }
Slide 14
Slide 14 text
Finally,
Promise.prototype.finally
Slide 15
Slide 15 text
fetch(url)
.then((response)=> response.text())
.then((text)=>{
element.textContent = text;
})
.catch((error)=>{
element.textContent = error.message;
})
Slide 16
Slide 16 text
fetch(url)
.then((response)=> response.text())
.then((text)=>{
element.textContent = text;
})
.catch((error)=>{
element.textContent = error.message;
})
.finally(()=>{
hideLoadingSpinner();
});
Slide 17
Slide 17 text
ChromeͰ
ES2018͢Ͱʹશ෦͑·͢ʂ
Slide 18
Slide 18 text
https://slidr.io/mathiasbynens/what-s-new-in-es2018
Slide 19
Slide 19 text
Smoosh ࣄ݅
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Ұिؒ͘Β͍ࣄʹͳΒΜ͔ͬͨ
Slide 22
Slide 22 text
Break the Web
or
NOT break the Web
Slide 23
Slide 23 text
ʮͳΜͱͳ͘ഉଞతʯ
όογϯά
Slide 24
Slide 24 text
https://github.com/tc39/tc39-web-draft
Slide 25
Slide 25 text
Off
the main thread
with workers!
NodeֶԂ30࣌ݶ @kosamari
Slide 26
Slide 26 text
݁શ͘ग़͍ͯ·ͤΜ
͜Μͳಈ͖͕͋ΔΑ͍ͬͯ͏ΞοϓσʔτͰ͢
Slide 27
Slide 27 text
ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ
TL;DR
Slide 28
Slide 28 text
ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ
ͦ͜Worker͍ͬͯ͏ศརͳͷ͕…ʢΑͬ͠ΌʔΔ͔ʔʣ
TL;DR
Slide 29
Slide 29 text
ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ
ͦ͜Worker͍ͬͯ͏ศརͳͷ͕…ʢΑͬ͠ΌʔΔ͔ʔʣ
͋ΕɺWorkerͷ͍͘͢͝ʹ͘͘ͳ͍ʁ
TL;DR
Slide 30
Slide 30 text
ϑϩϯτΤϯυͰΨϦΨϦίʔυಈ͔͢ͱɺϖʔδॏ͘ͳΔΑͶʁ
ͦ͜Worker͍ͬͯ͏ศརͳͷ͕…ʢΑͬ͠ΌʔΔ͔ʔʣ
͋ΕɺWorkerͷ͍͘͢͝ʹ͘͘ͳ͍ʁ
͍͘͢͢ΔʹͲ͏͢Εྑ͍ΜͩΖ͏…ʢ͝ҙݟืूதʣ
TL;DR
Slide 31
Slide 31 text
ͦͦWorkerͱ
Slide 32
Slide 32 text
Data
DOMͰग़དྷͯΔ
ϒϥβ
ϒϥβ͔Βଧ্ͪ͛ΒΕͨ
WebWorker
Slide 33
Slide 33 text
const worker = new Worker('worker.js');
Slide 34
Slide 34 text
const worker = new Worker('worker.js');
worker.postMessage(data); self.onmessage = (message) => {
// do something
Slide 35
Slide 35 text
const worker = new Worker('worker.js');
worker.postMessage(data); self.onmessage = (message) => {
// do something
self.postMessage(data)
}
Slide 36
Slide 36 text
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)
}
Slide 37
Slide 37 text
ͳͥϚϧνεϨου͕ඞཁʁ
ͦͦϒϥβͰඇಉظॲཧ͡Όͳ͍ͷʁ
Promise͢ΔΜ͡Όͳ͍ͷʁ
Slide 38
Slide 38 text
࠷ۙͷΣϒΞϓϦΈΜͳ
JSONσʔλΛΰχϣΰχϣ͔ͯ͠ΒDOMʹө
Slide 39
Slide 39 text
✔ Network
Slide 40
Slide 40 text
✔ Network ✔ DOM
Slide 41
Slide 41 text
✔ Network ✔ DOM ✗ data processing
Slide 42
Slide 42 text
✔ Network ✔ DOM ✗ data processing
͜Ε͕ංେԽͯ͠Δͷ͕
Slide 43
Slide 43 text
Does anyone like programming with workers?
Slide 44
Slide 44 text
ݴΘΕͯΈͨΒ…͜Εͷ͍͍ͮ͢͝Β͍ͳɻ
(શʹετοΫϗϧϜީ܈ʹͳͬͯͨ)
Slide 45
Slide 45 text
WebWorkerπϥΠɹͦͷ̍ɿ
WebWorkerΛ͏·͘͏ʹ εϨουϓʔϧతʹ
εέδϡʔϥʔΛࣗͰ࣮͠ͳ͍ͱ͍͚ͳ͍
Slide 46
Slide 46 text
A JavaScript Scheduler API by Justin (2લͷΞΠσΞ)
Slide 47
Slide 47 text
Parallel JSϓϩϙʔαϧࣦʢ.NETͷPLINQΈ͍ͨͳͷʣ
Slide 48
Slide 48 text
WebWorkerΛྑ͍ͨ͘͠ɹٞ̍ɿ
C#ͱ͔RxKotlinΈ͍ͨʹ͏·࣮͘ʁ
Erlangૣ͍Β͍͠…
Slide 49
Slide 49 text
WebWorkerπϥΠɹͦͷ̎ɿ
postMessageͰσʔλΓऔΓ͢Δͷ͕େม
Slide 50
Slide 50 text
postMessage({…})
postMessage({…})
Slide 51
Slide 51 text
SharedArrayBuffer
Slide 52
Slide 52 text
https://webkit.org/blog/7846/concurrent-javascript-it-can-work/
Slide 53
Slide 53 text
Transferable
Streams
Slide 54
Slide 54 text
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);
};
Slide 55
Slide 55 text
WebWorkerΛྑ͍ͨ͘͠ɹٞ̎ɿ
postMessageͷAPIΛநԽ͍ͯ͘͢͠
Slide 56
Slide 56 text
https://github.com/GoogleChromeLabs/comlink
Slide 57
Slide 57 text
https://github.com/GoogleChromeLabs/clooney
Slide 58
Slide 58 text
WebWorkerΛྑ͍ͨ͘͠ɹٞ̏ɿ
εϨʔυϓʔϧϞσϧͱϝϞϦγΣΞϞσϧ
૬ੑ͕ྑ͘ͳ͍
Slide 59
Slide 59 text
WebWorkerπϥΠɹͦͷ3ɿ
ͦͦWebWorkerͬͯϑΝΠϧΛ
ผ͚ͳ͖Ό͍͚ͳͯ͘ΊΜͲ͍͘͞
Slide 60
Slide 60 text
JavaScript Tagged Blocks
Slide 61
Slide 61 text
WebWorkerΛྑ͍ͨ͘͠ɹٞ̐ɿ
εϨουϞσϧʁͦΕͱλεΫϞσϧʁ
Slide 62
Slide 62 text
εϨουΒͬͨθʂ
ͣͬͱฦ͞ͳ͍ζϥʂ
C++
ࣄऴΘͬͨͳΒ returnฦͯ͠Αʙ
Slide 63
Slide 63 text
ϚϧνεϨουͰͷΣϒΞϓϦ։ൃ
ͲΜͳ;͏ʹϓϩάϥϜॻ͖͍ͨͰ͔͢ʁ
Slide 64
Slide 64 text
ݴޠ༷VMͷߏ͔Βม͑ΒΕΔͱͨ͠
Ͳ͏͍ͨ͠Ͱ͔͢ʁ
Slide 65
Slide 65 text
ͥͻ͝ҙݟ͍ͩ͘͞ɻ
Thanks !
@kosamari