Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
My name is JavaScript
and I’m the fastest* language alive
* I wish 
Parallelism looks cool
…but implementations might hurt
Calculation in the main thread
// get inputs
var x = document.getElementById("x").value;
var y = document.getElementById("...
jsbin
Web Workers: client (main thread)
var worker = new Worker("worker.js");
worker.addEventListener("message", function (event...
Web Workers: server (worker)
self.addEventListener("message", function (event) {
// get inputs
var x = event.data.x;
var y...
Web Workers: client (main thread)
var worker = new Worker("worker.js"), inc = 0;
// get inputs
var id = inc++;
var x = doc...
Web Workers: server (worker)
self.addEventListener("message", function (event) {
// get inputs
var id = event.data.id;
var...
jsbin
Calculation in the main thread
// get inputs
var x = document.getElementById("x").value;
var y = document.getElementById("...
Web Workers
//// index.js ////
var worker = new Worker("worker.js"), inc = 0;
// get inputs
var id = inc++;
var x = docume...
Calculation in the main thread
// get inputs
var x = document.getElementById("x").value;
var y = document.getElementById("...
Dream API
parallel(function () {
// get inputs
var x = document.getElementById("x").value;
var y = document.getElementById...
Let’s mix some stuff
ES6: Promise API
doSomethingAsync().then(
function onSuccess(result) {},
function onError(error) {}
)
// or just:
return d...
ES6: Promise API
$.ajax(url).then(function (data) {
$('#result').html(data);
var status = $('#status').html('Download comp...
ES6: Promise API
$.ajax(url).then(data => {
$('#result').html(data);
var status = $('#status').html('Download complete.');...
ES7: async/await
var expr = await promise;
nextStatement();
var expr;
promise.then(result => {
expr = result;
nextStatemen...
ES7: async/await
var data = await $.ajax(url);
$('#result').html(data);
var status = $('#status').html('Download complete....
ES6: Proxy API
var proxy = new Proxy({}, {
get(target, name) {
return name;
},
set(target, name, value) {
console.log(name...
ES6: Proxy API
var proxy = new Proxy({}, {
get(target, name) {
if (name === 'then') {
return new Promise(resolve => {
reso...
Let’s mix!
var proxy = new Proxy({}, {
get(target, name) {
if (name === 'then') {
return new Promise(resolve => {
resolve(...
Let’s mix!
var handlers = {
get(target, name) {
var chain = { type: 'get', target, name };
if (name === 'then') {
return a...
ES6: Proxy API
await proxy.document.getElementById('x').value
// into:
askMainThread({
type: 'get',
target: {
type: 'call'...
ES7-powered API
parallel(async function (proxy) {
// get inputs
var x = await proxy.document.getElementById("x").value;
va...
ES7-powered API (just like dream!)
parallel(async function ({ document }) {
// get inputs
var x = await document.getElemen...
See the Future
ES7: data parallelism
var ar = [1, 2, 3];
var arInc = ar.mapPar(val => val + 1); // [2, 3, 4]
var sum = ar.reducePar((x, y...
ES7: SharedArrayBuffer
(http://j.mp/sharedarraybuffer)
UI thread SharedArrayBuffer Web Worker
Thank you!
es6.concurrency()
Upcoming SlideShare
Loading in …5
×

es6.concurrency()

2,232 views

Published on

Talk from MediterraneaJS 2015

Published in: Technology

es6.concurrency()

  1. 1. My name is JavaScript and I’m the fastest* language alive * I wish 
  2. 2. Parallelism looks cool
  3. 3. …but implementations might hurt
  4. 4. Calculation in the main thread // get inputs var x = document.getElementById("x").value; var y = document.getElementById("y").value; // VERY useful calculations for (var end = Date.now() + 3000; Date.now() < end; ); var result = x * y; // output result document.getElementById("output").value = result;
  5. 5. jsbin
  6. 6. Web Workers: client (main thread) var worker = new Worker("worker.js"); worker.addEventListener("message", function (event) { // output result document.getElementById("output").value = event.data.result; }); // get inputs var x = document.getElementById("x").value; var y = document.getElementById("y").value; worker.postMessage({ x: x, y: y });
  7. 7. Web Workers: server (worker) self.addEventListener("message", function (event) { // get inputs var x = event.data.x; var y = event.data.y; // VERY useful calculations for (var end = Date.now() + 3000; Date.now() < end; ); var result = x * y; postMessage({ result: result }); });
  8. 8. Web Workers: client (main thread) var worker = new Worker("worker.js"), inc = 0; // get inputs var id = inc++; var x = document.getElementById("x").value; var y = document.getElementById("y").value; worker.addEventListener("message", function handler(event) { if (event.data.id === id) { this.removeEventListener("message", handler); // output result document.getElementById("output").value = event.data.result; } }); worker.postMessage({ id: id, x: x, y: y });
  9. 9. Web Workers: server (worker) self.addEventListener("message", function (event) { // get inputs var id = event.data.id; var x = event.data.x; var y = event.data.y; // VERY useful calculations for (var end = Date.now() + 3000; Date.now() < end; ); var result = x * y; postMessage({ id: id, result: result }); });
  10. 10. jsbin
  11. 11. Calculation in the main thread // get inputs var x = document.getElementById("x").value; var y = document.getElementById("y").value; // VERY useful calculations for (var end = Date.now() + 3000; Date.now() < end; ); var result = x * y; // output result document.getElementById("output").value = result;
  12. 12. Web Workers //// index.js //// var worker = new Worker("worker.js"), inc = 0; // get inputs var id = inc++; var x = document.getElementById("x").value; var y = document.getElementById("y").value; worker.addEventListener("message", function handler(event) { if (event.data.id === id) { this.removeEventListener("message", handler); // output result document.getElementById("output").value = event.data.result; } }); worker.postMessage({ id: id, x: x, y: y }); //// worker.js //// self.addEventListener("message", function (event) { // get inputs var id = event.data.id; var x = event.data.x; var y = event.data.y; // VERY useful calculations for (var end = Date.now() + 3000; Date.now() < end;); var result = x * y; postMessage({ id: id, result: result }); });
  13. 13. Calculation in the main thread // get inputs var x = document.getElementById("x").value; var y = document.getElementById("y").value; // VERY useful calculations for (var end = Date.now() + 3000; Date.now() < end; ); var result = x * y; // output result document.getElementById("output").value = result;
  14. 14. Dream API parallel(function () { // get inputs var x = document.getElementById("x").value; var y = document.getElementById("y").value; // VERY useful calculations for (var end = Date.now() + 3000; Date.now() < end;); var result = x * y; // output result document.getElementById("output").value = result; });
  15. 15. Let’s mix some stuff
  16. 16. ES6: Promise API doSomethingAsync().then( function onSuccess(result) {}, function onError(error) {} ) // or just: return doSomethingAsync().then(function (result) { // do something with result })
  17. 17. ES6: Promise API $.ajax(url).then(function (data) { $('#result').html(data); var status = $('#status').html('Download complete.'); return status.fadeIn().promise().then(function () { return sleep(2000); }).then(function () { return status.fadeOut(); }); });
  18. 18. ES6: Promise API $.ajax(url).then(data => { $('#result').html(data); var status = $('#status').html('Download complete.'); return ( status.fadeIn().promise() .then(() => sleep(2000)) .then(() => status.fadeOut()) ); });
  19. 19. ES7: async/await var expr = await promise; nextStatement(); var expr; promise.then(result => { expr = result; nextStatement(); });
  20. 20. ES7: async/await var data = await $.ajax(url); $('#result').html(data); var status = $('#status').html('Download complete.'); await status.fadeIn.promise(); await sleep(2000); await status.fadeOut();
  21. 21. ES6: Proxy API var proxy = new Proxy({}, { get(target, name) { return name; }, set(target, name, value) { console.log(name, '=', value); }, // ... }); proxy.a; // 'a' proxy[0]; // '0' proxy.a = 1; // console: 'a = 1' proxy.b = 2; // console: 'b = 2'
  22. 22. ES6: Proxy API var proxy = new Proxy({}, { get(target, name) { if (name === 'then') { return new Promise(resolve => { resolve(name); }); } } }); proxy.a.then(result => console.log(result)); // 'a' proxy[0].then(result => console.log(result)); // '0'
  23. 23. Let’s mix! var proxy = new Proxy({}, { get(target, name) { if (name === 'then') { return new Promise(resolve => { resolve(name); }); } } }); console.log(await proxy.a); // 'a' console.log(await proxy[0]); // '0'
  24. 24. Let’s mix! var handlers = { get(target, name) { var chain = { type: 'get', target, name }; if (name === 'then') { return askMainThread(chain); } return new Proxy(chain, handlers); } }; var proxy = new Proxy({}, handlers); proxy.a; // {type: 'get', target: {}, name: 'a'} proxy.a.b; // {type: 'get', target: {…, name: 'a'}, name: 'b'} await proxy.a.b.c; // 'a.b.c'
  25. 25. ES6: Proxy API await proxy.document.getElementById('x').value // into: askMainThread({ type: 'get', target: { type: 'call', target: { type: 'get', target: { type: 'get', target: {}, name: 'document' }, name: 'getElementById' }, args: ['x'] }, name: 'value' }).then(...)
  26. 26. ES7-powered API parallel(async function (proxy) { // get inputs var x = await proxy.document.getElementById("x").value; var y = await proxy.document.getElementById("y").value; // VERY useful calculations for (var end = Date.now() + 3000; Date.now() < end;); var result = x * y; // output result proxy.document.getElementById("output").value = result; });
  27. 27. ES7-powered API (just like dream!) parallel(async function ({ document }) { // get inputs var x = await document.getElementById("x").value; var y = await document.getElementById("y").value; // VERY useful calculations for (var end = Date.now() + 3000; Date.now() < end;); var result = x * y; // output result document.getElementById("output").value = result; });
  28. 28. See the Future
  29. 29. ES7: data parallelism var ar = [1, 2, 3]; var arInc = ar.mapPar(val => val + 1); // [2, 3, 4] var sum = ar.reducePar((x, y) => x + y); // 6 Int32Array.fromPar([1, 2, 3], val => val * 2); // int32[2, 4, 6] // … even more … //
  30. 30. ES7: SharedArrayBuffer (http://j.mp/sharedarraybuffer) UI thread SharedArrayBuffer Web Worker
  31. 31. Thank you!

×