Talk from MediterraneaJS 2015

1. My name is JavaScript
and I’m the fastest* language alive
* I wish 

2. Parallelism looks cool

3. …but implementations might hurt

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. jsbin

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. 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. 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. 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. jsbin

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

14. 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;

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

16. Let’s mix some stuff

17. ES6: Promise API
doSomethingAsync().then(
function onSuccess(result) {},
function onError(error) {}
)
// or just:
return doSomethingAsync().then(function (result) {
// do something with result
})

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

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

20. ES7: async/await
var expr = await promise;
nextStatement();
var expr;
promise.then(result => {
expr = result;
nextStatement();
});

21. 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();

22. 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'

23. 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'

24. 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'

25. 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'

26. 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(...)

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

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

29. See the Future

30. 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 … //

31. ES7: SharedArrayBuffer
(http://j.mp/sharedarraybuffer)
UI thread SharedArrayBuffer Web Worker

32. Thank you!