LDNWebPerf December 2016 - Ingvar Stepanyan

Transcript

1. Abusing ES6+ features for nicer parallelism * Disclaimer: no people, animals or JS features were harmed during the talk Ingvar Stepanyan aka @RReverser
2. 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; jsbin
3. Parallelism looks cool
4. …but implementations might hurt
5. 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 });
6. 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 }); });
7. 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 });
8. 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
9. 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;
10. 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 }); });
12. 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;
13. 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; });
14. Let’s mix some stuff
15. ES6: Promise API doSomethingAsync().then( function onSuccess(result) {}, function onError(error) {} ) // or just: return doSomethingAsync().then(function (result) { // do something with result })
16. 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(); }); });
17. 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()) ); });
18. ES8: 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();
19. ES8: async/await var expr = await promise;
 nextStatement(); var expr; promise.then(result => { expr = result; nextStatement(); });
20. ES8: async/await console.log('Hello'); await { then: resolve => setTimeout(resolve, 3000) }; console.log('world');
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. ES6: Proxy API var proxy = new Proxy({}, { get(target, name) { if (name === 'then') { return resolve => resolve(target.name); } return new Proxy({ name }, this); } }); proxy.a.then(console.log); // 'a' proxy.a.b.c.then(console.log); // 'c' proxy[0].then(console.log); // '0'
23. Let’s mix! var proxy = new Proxy({}, { get(target, name) { if (name === 'then') { return resolve => resolve(target.name); } return new Proxy({ name }, this); } }); console.log(await proxy.a); // ‘a' console.log(await proxy.a.b.c); // 'c' console.log(await proxy[0]); // '0'
24. Let’s mix! var proxy = new Proxy({}, { get(target, name) { var chain = { type: 'get', target, name }; if (name === 'then') { return askMainThread(chain); } return new Proxy(chain, this); } }); 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. 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' })(resolve => …, reject => …)
26. ES8-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. ES8-powered API (just like we wanted!) 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. Thanks!