ユーザーベースさんとの勉強会で発表しました。 2014/06/05

1. Web Workers & Parallel.js

2. (function() {
let me = {
name : 島川悠太 ,
twitter : @banana_umai ,
as : Server Side Engineer ,
belogns_to : 株式会社リブセンス
}
})();

3. Web Workers おさらい

4. メインページに並行してバッ
クグラウンドで走るワーカスク
リプトを生成させられるAPI
http://www.hcn.zaq.ne.jp/___/WEB/Workers-ja.html

5. メインページに並行してバッ
クグラウンドで走るワーカスク
リプトを生成させられるAPI
http://www.hcn.zaq.ne.jp/___/WEB/Workers-ja.html

6. 直接DOMは操作できない

7. 専用ワーカと共有ワーカ

8. 専用ワーカと共有ワーカ

9. 使いドコロはUIスレッド
を専有したくない重たい
処理の記述

10. <script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker.postMessage(msg);
</script>
self.onmessage = function(event) {
loadScripts( proc.js );
postMessage(procWithData(event.data));
}

11. <script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker.postMessage(msg);
</script>
self.onmessage = function(event) {
loadScripts( proc.js );
postMessage(procWithData(event.data));
}

12. <script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker.postMessage(msg);
</script>
self.onmessage = function(event) {
loadScripts( proc.js );
postMessage(procWithData(event.data));
}

13. <script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker.postMessage(msg);
</script>
self.onmessage = function(event) {
loadScripts( proc.js );
postMessage(procWithData(event.data));
}

14. <script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker.postMessage(msg);
</script>
self.onmessage = function(event) {
loadScripts( proc.js );
postMessage(procWithData(event.data));
}

15. <script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker.postMessage(msg);
</script>
self.onmessage = function(event) {
loadScripts( proc.js );
postMessage(procWithData(event.data));
}

16. <script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker.postMessage(msg);
</script>
self.onmessage = function(event) {
loadScripts( proc.js );
postMessage(procWithData(event.data));
}

17. <script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker.postMessage(msg);
</script>
self.onmessage = function(event) {
loadScripts( proc.js );
postMessage(procWithData(event.data));
}

18. <script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker.postMessage(msg);
</script>
self.onmessage = function(event) {
loadScripts( proc.js );
postMessage(procWithData(event.data));
}

19. Parallel.js
http://adambom.github.io/parallel.js/

20. ブラウザでも
サーバーサイドでも
使える

21. ブラウザでは内部的に
専用ワーカを使って
並列処理を実現

22. バックグラウンド処理を
書き下せる

23. <script src= js/parallel.js ></script>
<script>
var data = …;
var p = new Parallel(data);
p.spawn(function (data) {
// some proc with data running in background
…
return result;
}).then(function (result) {
// some proc with result
…
});
</script>

24. map/reduceができるよ

25. <script src= js/parallel.js ></script>
<script>
var data = [1, 2, 3, 4];
var p = new Parallel(data);
p.map(function (datum) {
return datum * 2;
}).reduce(function (mappedData) {
return mappedData[0] + mappedData[1];
}).then(function (reduced) {
console.log(mappedData); // 20
});
</script>