Web Worker をちょっと便利にするライブラリのご紹介

20150114-introduction-of-handy-library-for-web-workers.md

Web Worker をちょっと便利にするライブラリのご紹介

• 2015/01/14
• HTML5minutes! - triton-js @ Members Co., Ltd.

自己紹介

• Seiya Konno
  • Works at Uniba Inc. (http://uniba.jp)

• http://null.ly
• https://twitter.com/nulltask
• https://github.com/nulltask
• https://fb.me/nulltask

宣伝

__月刊ライトニングトーク__というウェブ系の勉強会を主催しています。

• http://mlt.connpass.com/

今のところだいたい隔月で開催中。場所は渋谷か上野でやることが多いです。

アンケート

Web Worker 使ってますか？

Web Worker おさらい

• UI のイベントループとは独立したイベントループで処理を実行
  • OS のスレッドを使って実行
  • CPU bound な処理でも UI をブロックしない
• 独立したスコープで処理を実行
  • UI 側のグローバルオブジェクトにアクセスできない
  • Worker 側でグローバル汚染しても UI 側に影響されない
• DOM にアクセスすることができない
• 代表的なユースケース
  • 巨大な JSON ファイルのシリアライズ
  • Canvas の ImageData のピクセル操作
  • ゲームなど FPS が重要なコンテンツの開発

Web Worker のインタフェース

• main.js: メインスレッドから Worker を生成

var worker = new Worker('worker.js');

// worker からのメッセージを受信
worker.onmessage = function(e) {
  console.log(e.data);  // 1: HELLO
                        // 2: HELLO
                        // 3: HELLO ...
};

setInterval(function() {
  // worker へメッセージを送信
  worker.postMessage('hello');
}, 1000);

• worker.js: 受け取ったデータを大文字に変換して返却

var count = 0;
// 生成元からのメッセージを受信するためのイベントリスナ
self.onmessage = function(e) {
  count++;
  // 生成元へメッセージを送信
  self.postMessage(count + ': ' + e.data.toUpperCase());
};

図にまとめると...

インタフェースについて個人的な不満

Worker 側のコードを別ファイルにしなければならない。

• 気軽に Web Developer Console で試せない
• タスクランナーで concat + minify したときの恩恵が受けられない
• Browserify で worker 側のコードを require したい

こんな風にインラインでかければいいのに。

var worker = new Worker(function() {
  var count = 0;
  self.onmessage = function(e) {
    count++;
    self.postMesage(count + ': ' + e.data.toUpperCase());
  };
});

worker.onmessage = function(e) {
  console.log(e.data);
};

setInterval(function() {
  worker.postMessage('hello');
}, 1000);

できるようにしました

pseudo-function というライブラリをつくりました。

• https://github.com/nulltask/pseudo-function

さっきのサンプルがインラインっぽく書けるようになります。

var fn = new PseudoFunction(function() {
  var count = 0;
  self.onmessage = function(e) {
    count++;
    self.postMessage(count + ': ' + e.data.toUpperCase());
  };
});

var worker = new Worker(fn);

worker.onmessage = function(e) {
  console.log(e.data);
};

setInterval(function() {
  worker.postMessage('hello');
}, 1000);

実現方法

• 関数オブジェクトから URL.createObjectURL で Blob URL を生成
• Blob URL は Blob オブジェクトを外部ファイルのように扱える
• 上記の特徴を利用して Worker のコンストラクタに Blob URL を渡すことでインラインで記述可能

特徴

• IE 11+, Firefox 12+, Chrome 26+, Safari 6+, Android 4.4+ に対応
• Bower に対応 ($ bower install pseudo-function)
• Browserify に対応 ($ npm install pseudo-function)
• Component, Duo にも対応 (require('nulltask/pseudo-function'))
• ユニットテスト付属、Travis CI でテストを実行
• MIT ライセンス (商用利用に制限なし)

おまけ

pseudo-function を使って作った stable-timer というライブラリ。

• https://github.com/nulltask/stable-timer

どんな状況でも安定して動作するタイマー。 Worker 内の setTimeout, setInterval は生成元のタブやブラウザそのものがバックグランドに回っても分解能が変わらない特性を利用。

Worker 用のコードをインラインで記述しているため、ライブラリのユーザが意識しなくとも Web Worker による処理を利用できるようになった。

まとめ

ご静聴ありがとうございました。