Parallelism in JavaScript

JavaScript engines are single-threaded:

• All code runs in a single thread, in a single process,

  • In old browsers: one process for the whole browser,
  • In modern browsers: one tab = one process.

• No native way to do background work.

• All asynchronism is implemented through an event loop:

  while True:                   # Fictive implementation of an event loop
      while queue.is_empty():
          wait()
      task = queue.pop()
      task.execute()
  

• Two types of function calls:

  • Blocking: they execute immediately, block the thread until they are done,
  • Non-blocking: they yield control to the event loop, queue a task when they are done.

Function calls: blocking vs non-blocking

Blocking calls

Most function calls:

• User defined functions,
• Computations: Math, string manipulations, array/object manipulations, …
• DOM API: .querySelector(), .appendChild, …
• eval, require, console.log, …
• …

Non-blocking calls

• Sleeping: setTimeout(), setInterval(),
• Input/Output:
  • System: communicating with other processes (e.g., shell commands), …
  • Disk: reading/writing files, reading/executing templates, …
  • Network: reading/writing on sockets, HTTP requests/responses, XMLHttpRequest, fetch(), app.listen(), …
  • Databases: connecting to databases, querying databases, knex.raw(), knex.select(), …

Handling asynchronous calls: callbacks

Classic technique, typical of event-based programming

function callback() {             // (click to run)
  alert('Hello');
}
setTimeout(callback, 2000);       // Run callback in 2 secs
alert('world');

1. setTimeout queues callback, to be executed in 2 seconds,
2. Control goes to the next instruction,
3. After 2 seconds, callback is executed.

Also seen in event handlers, request handlers:

// Call when a click happens
div.addEventListener('click',
  function(e) {
    console.log('Hello click');
  });

// Call when a HTTP request happens
app.get('/toto',
  function(req, res) {
    res.send("Hello world");
  });

The problem with callbacks: Callback hell

app.get('/foo', function(req, res) {
  setTimeout(function() {
    knex.raw('SELECT * FROM users').asCallback(function(err, result) {
      if (err)
        console.log(err);
      else if (result.length > 0) {
        knex.raw(...).asCallback(...)
      }
    });
  }, 2000);
});

This style is error prone:

• Code flow hard to follow,
• Errors difficult to catch,
• Very painful to write loops:
  • exercise: write “Hello world” to the console every 2 seconds, without using setInterval.
• Hard to synchronize:
  • waiting for the end of two or more actions,
  • waiting for the end of the first among two or more actions.

Promises and async/await

Modern API and new syntax (only since ES2017) to handle asynchronous code

async function get_readme() {
  try {
    var response = await fetch('/README.md');    // wait for HTTP response
    var content = await response.text();         // wait for end of response body
    alert(content);
  } catch (err) {                                // asynchronous errors are catched too
    console.error(err);
  }
}
get_readme();

1. Non-blocking functions (e.g., fecth()) return Promises,
2. await blocks execution until the promise is done,
3. when the promise is done await passes on the promised value.

• Must always be wrapped in async function.
• Can be used in for loops, etc.
• Only supported by modern APIs and libraries, e.g., fetch(), Knex, …

Careful with naked promises

Racing promises

var start = Date.now()
function cb(response) {
  var elapsed = Date.now() - start;
  alert(`${response.url} (${elapsed}ms)`);
}
fetch('/index.html').then(cb);             // these two execute in parallel
fetch('/README.md').then(cb);

If you want to order requests, you must chain callbacks (or use async/await)

var start = Date.now()
fetch('/index.html')
  .then(function (response) {
    alert(`${response.url} (${Date.now() - start}ms)`);
    return fetch('/README.md');           // fetch 2nd only after 1st is done
  })
  .then(function (response) {
    alert(`${response.url} (${Date.now() - start}ms)`);
  });