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すでに全部使えます！

Smoosh 事件

一週間くらい仕事にならんかった

Break the Web
or
NOT break the Web

「なんとなく排他的」
バッシング

Off
the main thread
with workers!
Node学園30時限目 @kosamari

結論は全く出ていません
こんな動きがあるよっていうアップデートです

TL;DR
フロントエンドでガリガリコード動かすと、ページ重くなるよね？

TL;DR
フロントエンドでガリガリコード動かすと、ページ重くなるよね？
そこはWorkerっていう便利なものが…（よっしゃーやるかー）

TL;DR
フロントエンドでガリガリコード動かすと、ページ重くなるよね？
そこはWorkerっていう便利なものが…（よっしゃーやるかー）
あれ、Workerものすごく使いにくくない？

TL;DR
フロントエンドでガリガリコード動かすと、ページ重くなるよね？
そこはWorkerっていう便利なものが…（よっしゃーやるかー）
あれ、Workerものすごく使いにくくない？
使いやすくするにはどうすれば良いんだろう…（ご意見募集中）

そもそもWorkerとは

DOMで出来てる
惑星ブラウザ
Data
惑星ブラウザから打ち上げられた
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);
self.onmessage = (message) => {
// do something high cost
worker.onmessage = (message) => {
self.postMessage(data)
// do something on main thread
}
};

なぜマルチスレッドが必要？
そもそもブラウザでは非同期処理じゃないの？
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

Transferable
Streams

const worker = new Worker('transcode.js');
importScripts('vp10decode.js', 'mp4encode.js');
worker.onmessage = event => {
const transcoder = new TransformStream({
const transcoder = event.data;
transform(chunk, controller) {
const decoded = vp10decode(chunk);
await fetch('bunny.vp10')
controller.enqueue(mp4encode(decoded));
.pipeThrough(transcoder)
}
.pipeTo(videoSink);
};
});
postMessage(transcoder, [transcoder]);

WebWorkerを良くしたい 議論２：
postMessageのAPIを抽象化して使いやすく

WebWorkerを良くしたい 議論３：
スレードプールモデルとメモリシェアモデルは
相性が良くない

WebWorkerツライ その3：
そもそもWebWorkerってファイルを
別けなきゃいけなくてめんどくさい

JavaScript Tagged Blocks

WebWorkerを良くしたい 議論４：
スレッドモデル？それともタスクモデル？

スレッドもらったゼ！
ずっと返さないズラ！
C++
仕事終わったなら return返してよ∼

マルチスレッドでのウェブアプリ開発
どんなふうにプログラム書きたいですか？

言語仕様やVMの構成から変えられるとした
どうしたいですか？

ぜひご意見ください。
Thanks !

@kosamari