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
×

of

es6.concurrency() Slide 1 es6.concurrency() Slide 2 es6.concurrency() Slide 3 es6.concurrency() Slide 4 es6.concurrency() Slide 5 es6.concurrency() Slide 6 es6.concurrency() Slide 7 es6.concurrency() Slide 8 es6.concurrency() Slide 9 es6.concurrency() Slide 10 es6.concurrency() Slide 11 es6.concurrency() Slide 12 es6.concurrency() Slide 13 es6.concurrency() Slide 14 es6.concurrency() Slide 15 es6.concurrency() Slide 16 es6.concurrency() Slide 17 es6.concurrency() Slide 18 es6.concurrency() Slide 19 es6.concurrency() Slide 20 es6.concurrency() Slide 21 es6.concurrency() Slide 22 es6.concurrency() Slide 23 es6.concurrency() Slide 24 es6.concurrency() Slide 25 es6.concurrency() Slide 26 es6.concurrency() Slide 27 es6.concurrency() Slide 28 es6.concurrency() Slide 29 es6.concurrency() Slide 30 es6.concurrency() Slide 31 es6.concurrency() Slide 32
Upcoming SlideShare
RxAndroid: 비동기 및 이벤트 기반 프로그래밍을 위한 라이브러리
Next
Download to read offline and view in fullscreen.

4 Likes

Share

Download to read offline

es6.concurrency()

Download to read offline

Talk from MediterraneaJS 2015

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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!
  • PaulYuriychuck

    Jun. 26, 2015
  • yarikponomarenko

    Jun. 26, 2015
  • webknjaz

    Jun. 24, 2015
  • DenisRadin

    Jun. 23, 2015

Talk from MediterraneaJS 2015

Views

Total views

2,596

On Slideshare

0

From embeds

0

Number of embeds

19

Actions

Downloads

6

Shares

0

Comments

0

Likes

4

×