My name is JavaScriptand I’m the fastest* language alive

* I wish

Parallelism looks cool

…but implementations might hurt

Calculation in the main thread// get inputsvar x = document.getElementById("x").value;var y = document.getElementById("y").value;

// VERY useful calculationsfor (var end = Date.now() + 3000; Date.now() < end; );var result = x * y;

// output resultdocument.getElementById("output").value = result;

jsbin

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 inputsvar x = document.getElementById("x").value;var y = document.getElementById("y").value;

worker.postMessage({ x: x, y: y });

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 });});

Web Workers: client (main thread)var worker = new Worker("worker.js"), inc = 0;

// get inputsvar 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 });

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 });});

jsbin

Calculation in the main thread// get inputsvar x = document.getElementById("x").value;var y = document.getElementById("y").value;

// VERY useful calculationsfor (var end = Date.now() + 3000; Date.now() < end; );var result = x * y;

// output resultdocument.getElementById("output").value = result;

Web Workers//// index.js ////var worker = new Worker("worker.js"), inc = 0;

// get inputsvar 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 });});

Calculation in the main thread// get inputsvar x = document.getElementById("x").value;var y = document.getElementById("y").value;

// VERY useful calculationsfor (var end = Date.now() + 3000; Date.now() < end; );var result = x * y;

// output resultdocument.getElementById("output").value = result;

Dream APIparallel(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;});

Let’s mix some stuff

ES6: Promise APIdoSomethingAsync().then( function onSuccess(result) {}, function onError(error) {})

// or just:

return doSomethingAsync().then(function (result) { // do something with result})

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(); });});

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()) );});

ES7: async/await

var expr = await promise;nextStatement();

var expr;promise.then(result => { expr = result; nextStatement();});

ES7: async/awaitvar data = await $.ajax(url);$('#result').html(data);var status = $('#status').html('Download complete.');await status.fadeIn.promise();await sleep(2000);await status.fadeOut();

ES6: Proxy APIvar 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'

ES6: Proxy APIvar 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'

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'

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'

ES6: Proxy APIawait 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(...)

ES7-powered APIparallel(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;});

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;});

See the Future

ES7: data parallelismvar 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 … //

ES7: SharedArrayBuffer (http://j.mp/sharedarraybuffer)

UI thread SharedArrayBuffer Web Worker

Thank you!