SM Presentation -- From Callbacks to Promises to Async / Await

01.js

// ES5
move(r(2), function() {
  move(d(2), function() {
    move(l(2), function() {
      move(u(2));
    });
  });
});

// ES2015 refactor 1
move(r(2), () => {
  move(d(2), () => {
    move(l(2), () => {
      move(u(2));
    });
  });
});

// ES2015 refactor 2
move(r(2), () => 
  move(d(2), () => 
    move(l(2), () => 
      move(u(2))
    )
  )
);

// ES2015 refactor 3
move(r(2), () => move(d(2), () => move(l(2), () => move(u(2)))));

02.js

// Promises to reduce callback nesting

move(r(2))
.then(function() { return move(d(2)); })
.then(function() { return move(l(2)); })
.then(function() { return move(u(2)); })

// ES2015 refactor 1
move(r(2))
.then(() => move(d(2)))
.then(() => move(l(2)))
.then(() => move(u(2)))

// ES2015 refactor 2

Don't think there's something else we can do here...

03.js

// Picking up boxes in ES5

// The natural way:

for(var box = 0; box < 9; box++) {
  var x = 7 * (box % 3);
  var y = 4 * Math.floor(box / 3);
  console.log("Moving ship to X and Y coordinates: " + x + ":" + y);  
  move(point(x, y), r(3), d(3), l(3), u(3));
}

// Another natural 2-loop way:
for(var currentRow = 0; currentRow < 4; currentRow++) {
  var startX = currentRow * 7;
  for(var box = 0; box < 3; box++) {
    var startY = box * 4;
    console.log("Moving ship to X and Y coordinates: " + startX + ":" + startY);
    move(point(startX, startY));
    move(r(3));
    move(d(3));
    move(l(3));
    move(u(3));
  }
}


// ES5 refactor using Promises
var x = 0,
    y = 0,
    total = 9,
    done = 0,
    distX = 7,
    distY = 4;

var pickup = function() {
  if (done < total) {
    var nextX = x + (distX * (done % 3));
    var nextY = y + (distY * Math.floor(done / 3));
    move(point(nextX, nextY))
    .then(function() { return move(r(3)); })
    .then(function() { return move(d(3)); })
    .then(function() { return move(l(3)); })
    .then(function() { return move(u(3)); })    
    .then(function() {
      done++;
      pickup();
    });
  }
}

pickup();
 
// ES2015 refactor 2 with move() improvement

var x = 0,
    y = 0,
    total = 9,
    done = 0,
    distX = 7,
    distY = 4;

var pickup = function() {
  if (done < total) {
    var nextX = x + (distX * (done % 3));
    var nextY = y + (distY * Math.floor(done / 3));
    move(point(nextX, nextY), r(3), d(3), l(3), u(3)), pickup);
    done++;
  }
};

pickup();


// ES2015 refactor: not much help

const x = 0,
      y = 0,
      total = 9,
      distX = 7,
      distY = 4;
let   done = 0;

let pickup = () => {
  if (done < total) {
    var nextX = x + (distX * (done % 3));
    var nextY = y + (distY * Math.floor(done / 3));
    move(point(nextX, nextY), r(3), d(3), l(3), u(3), pickup);
    done++;
  }
};

pickup();

04.js

// Enter ES2016 async / await proposal

// One loop

for(let box = 0; box < 9; box++) {
  let x = 7 * (box % 3);
  let y = 4 * Math.floor(box / 3);
  console.log("Moving ship to X and Y coordinates: ${x}:${y}`);  
  await move(point(x, y), r(3), d(3), l(3), u(3));
}

// One loop with range
for(let box of range(9)) {
  let x = 7 * (box % 3);
  let y = 4 * Math.floor(box / 3);
  console.log("Moving ship to X and Y coordinates: ${x}:${y}`);  
  await move(point(x, y), r(3), d(3), l(3), u(3));
}

// Two loops
for(let row = 0; row < 4; row++) {
  let startX = row * 7;
  for(let box = 0; box < 3; box++) {
    let startY = box * 4;
    console.log(`Moving ship to X and Y coordinates: ${startX}:${startY}`);
    await move(point(startX, startY));
    await move(r(3));
    await move(d(3));
    await move(l(3));
    await move(u(3));
  }
}
alert('Done!');

// ES2016 refactor
for (let x of range(3)) {
  x *= 7;
  for (let y of range(3)) {
    y *= 4;
    await move(point(x, y), r(3), d(3), l(3), u(3));
  }
}
alert('Done!');

async await

for(let box = 0; box < 9; box++) {
  let x = 7 * (box % 3);
  let y = 4 * Math.floor(box / 3);
  console.log(`Moving ship to X and Y coordinates: ${x}:${y}`);  
  await move(point(x, y), r(3), d(3), l(3), u(3));
}
alert('Done!');