“Drag Me Down” for a cappella

Higher-rank and higher-kinded types

Background: what is parametric polymorphism?

String chooseString(String head, String tail) {
  if (Math.random() < 0.5) {
    return head;
  } else {
    return tail;
  }
}

<T> T chooseValue(T head, T tail) {
  if (Math.random() < 0.5) {
    return head;
  } else {
    return tail;
  }
}

Higher-rank types

String chooseStringWeird(
  <T> BiFunction<T, T, T> randomChoice,
  String head,
  String tail
) {
  if (randomChoice(true, false)) {
    return randomChoice(head, tail);
  } else {
    return randomChoice(tail, head);
  }
}

String bestEditor() {
  return chooseStringWeird(chooseValue, "emacs", "vim");
}

Higher-kinded types

Stack<String> names;

class GraphSearch<T> {
  T<Node> frontier;
}

GraphSearch<Stack> depthFirstSearch;
GraphSearch<Queue> breadthFirstSearch;

Conclusion

Footnotes

Huffgram: convert strings into memorizable phrases

How it works

Socket.js: real-time communication with WebSockets

Introduction

• ...deliver messages out of order.
• ...deliver duplicate messages.
• ...deliver messages after the application thinks the socket has been closed.
• ...deliver queued up messages before the “reconnect” event is fired in the case of a temporary network failure.
• ...leak memory in the server or client.
• ...have undefined or insecure behavior if it receives a malformed or malicious message from a client.

• ...automatically reconnect if the connection is lost, unless it was intentionally closed by the application.
• ...validate inputs to all methods and fail fast.
• ...drop messages (and not resend them) if there is a network interruption.

Installation

Server

npm install socket.js

Client

<script src="socket.min.js"></script>

Server API

var socketjs = require('socket.js');

socketjs(httpServer, handler);

var http = require('http');

var server = http.createServer();
server.listen(3000, function() {
  console.log('Listening on port 3000.');
});

• socket.send(type, message) sends a message to the client. type is a string indicating the type of message. message is any value that can be converted to JSON.
• socket.receive(type, handler) registers a handler for a particular type of message. type is a string, and handler is a function which takes the message as an argument. If handler === null, any existing handler for this message type is removed.
• socket.close(handler) registers a callback to be invoked when the connection is closed, either intentionally or because of a network interruption. If handler === null, any existing handler for this event is removed. If handler is not provided (or handler === undefined), this method closes the socket.

Example server

var http = require('http');
var socketjs = require('socket.js');

// start an http server
var server = http.createServer();
server.listen(3000, function() {
  console.log('Listening on port 3000.');
});

socketjs(server, function(socket, reconnectData) {
  // if we get disconnected and subsequently reconnect, the client can pass data here
  if (reconnectData === null) {
    console.log('A user connected.');
  } else {
    console.log('A user reconnected with: ' + JSON.stringify(reconnectData) + '.');
  }

  // log messages as they arrive
  socket.receive('greeting', function(message) {
    console.log('Received: ' + JSON.stringify(message));
  });

  // periodically send messages to the client
  var interval = setInterval(function() {
    socket.send('greeting', 'Hello from the server!');
  }, 1000);

  // if the client disconnects, stop sending messages to it
  socket.close(function() {
    console.log('A user disconnected.');

    clearInterval(interval);
  });
});

Client API

• socketjs.isSupported() returns a boolean indicating whether the browser supports WebSockets.
• socketjs.connect(host, secure) returns an object representing the connection to the server. host is the name of the host and optionally the port, separated by a colon. secure is a boolean indicating whether to use the WS or the WSS protocol. If these parameters are missing, Socket.js will attempt to connect to the host that served the page, using the same port and security level.

• send(type, message) sends a message to the server. type is a string indicating the type of message. message is any value that can be converted to JSON.
• socket.receive(type, handler) registers a handler for a particular type of message. type is a string, and handler is a function which takes the message as an argument. If handler === null, any existing handler for this message type is removed.
• socket.disconnect(handler) registers a callback to be invoked when the network is interrupted. If handler === null, any existing handler for this event is removed.
• socket.reconnect(handler) registers a callback to be invoked when the connection is restored after a network interruption. The value returned by the callback will be sent to the server (see reconnectData above). If handler === null, any existing handler for this event is removed.
• socket.close(handler) registers a callback to be invoked when the connection is closed by either the server or the client. If handler === null, any existing handler for this event is removed. If handler is not provided (or handler === undefined), this method closes the socket.

Example client

// make sure socket.js is supported
if (socketjs.isSupported()) {
  // connect to the server
  var socket = socketjs.connect();

  // log messages as they arrive
  socket.receive('greeting', console.log);

  // log a message if we get disconnected
  socket.disconnect(function() {
    console.log('Temporarily disconnected.');
  });

  // log a message when we reconnect
  socket.reconnect(function() {
    console.log('Reconnected.');

    // whatever we return here is sent back to the server
    return 'reconnected';
  });

  // periodically send messages the server
  var interval = setInterval(function() {
    socket.send('greeting', 'Hello from the client!');
  }, 1000);

  // if the server disconnects, stop sending messages to it
  socket.close(function() {
    console.log('Connection closed.');

    clearInterval(interval);
  });
} else {
  // let the user know that socket.js is not supported
  console.log('Your browser does not support WebSockets.');
}

Fun with promises in JavaScript

What’s a promise?

$.ajax({
  url: '/value',
  success: function(value) {
    var result = parseInt(value) + 10;
    setTimeout(function() {
      console.log(result);
    }, 5000);
  }
});

ajax({ url: '/value' }).then(function(value) {
  return parseInt(value) + 10;
}).then(
  delay(5000)
).then(function(result) {
  console.log(result);
})

promise.then(onFulfilled, onRejected)

promise.catch(onRejected) := promise.then(null, onRejected)

How do you make a promise?

var promise = new Promise(function(resolve, reject) {
  // maybe do some async stuff in here
  resolve('result');
});

Timeouts

function delay(milliseconds) {
  return function(result) {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        resolve(result);
      }, milliseconds);
    });
  };
}

delay(1000)('hello').then(function(result) {
  console.log(result);
});

somePromise.then(delay(1000)).then(function() {
  console.log('1 second after somePromise!');
});

AJAX

function ajax(options) {
  return new Promise(function(resolve, reject) {
    $.ajax(options).done(resolve).fail(reject);
  });
}

ajax({ url: '/' }).then(function(result) {
  console.log(result);
});

function ajax(url, method, data) {
  return new Promise(function(resolve, reject) {
    var request = new XMLHttpRequest();
    request.responseType = 'text';
    request.onreadystatechange = function() {
      if (request.readyState === XMLHttpRequest.DONE) {
        if (request.status === 200) {
          resolve(request.responseText);
        } else {
          reject(Error(request.statusText));
        }
      }
    };
    request.onerror = function() {
      reject(Error("Network Error"));
    };
    request.open(method, url, true);
    request.send(data);
  });
}

ajax('/', 'GET').then(function(result) {
  console.log(result);
});

Deferred execution

new Promise(function(resolve, reject) {
  console.log('A');
  resolve();
}).then(function() {
  console.log('B');
});
console.log('C');

var defer = Promise.resolve();

defer.then(function() {
  console.log('A');
});
console.log('B');

Closing remarks

1. The callbacks for then and catch can return any value, but they behave differently if the value is a promise. Ordinarily, the return value is passed to the next then continuation in the chain. But if the return value is a promise, the promise’s fulfillment value is passed to the continuation instead. This means returning Promise.resolve(x) is the same as returning x.
2. The function passed to the Promise constructor is executed synchronously, but any continuations sequenced with then or catch will be deferred until the next event loop cycle. The latter behavior is why defer works.
3. catch is a reserved keyword used for exception handling in JavaScript, but it’s also the name of the method to attach an error handler to a promise. It seems like an unfortunate naming collision. On the bright side, it’s easy to remember; so maybe the collision isn’t unfortunate after all!