Async in JavaScript

name: inverse
layout: true
class: center, middle
---
# Async in JavaScript

.footnote[Yeechan Lu]

---
## <s><ruby>エーシンク<rp>(</rp><rt>ēshinku</rt><rp>)</rp></ruby>・<ruby>イン<rp>(</rp><rt>in</rt><rp>)</rp></ruby>・<ruby>ジャーバスクリップト<rp>(</rp><rt>jābasukuripputo</rt><rp>)</rp></ruby></s>

.footnote[イェーチャン・ルー]
---
# <ruby>Async<rp>(</rp><rt>eɪˈsɪŋk</rt><rp>)</rp></ruby> <ruby>in<rp>(</rp><rt>ɪn</rt><rp>)</rp></ruby> <ruby>JavaScript<rp>(</rp><rt>ˈdʒɑːvəˌskrɪpt</rt><rp>)</rp></ruby>

.footnote[Yeechan Lu]
---
# <ruby>Concurrency<rp>(</rp><rt>并发</rt><rp>)</rp></ruby>
使多个操作可以在重叠的时间段内进行
---
class: center, middle, centercode
# <ruby>Parallelism<rp>(</rp><rt>并行</rt><rp>)</rp></ruby>
```
----------------▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇-----
--▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇----------------------------------------
----------------------------▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇---
```
---
class: center, middle, centercode
# <ruby>Coroutine<rp>(</rp><rt>协程</rt><rp>)</rp></ruby>
```
▇▇▇▇▇▇▇▇--------▇▇▇▇▇▇▇▇▇-----------------▇▇▇▇--------▇▇▇▇▇▇▇▇-
--------▇▇▇▇▇▇▇▇---------▇▇▇▇▇▇▇▇▇------------▇▇▇▇▇▇▇▇---------
----------------------------------▇▇▇▇▇▇▇▇---------------------
```
---
class: center, middle
## <q>node has non-blocking IO everywhere</q>
<cite>— Tim Caswell</cite>
---
## Single Thread (v8), Event Driven 
---
## Single-threaded Concurrency
---
name: wow
## Coroutine!
---
### ∵<q>node has non-blocking IO everywhere</q>
### ∴coroutine is requred everywhere
---
# Continuable
---
class: center, middle, inverse

# In Dark Ages...
---
class: email, inverse

```
From: Tim Caswell <tim@creationix.com>
To: nodejs@googlegroups.com
Subject: Comparison between continuables, promises and many variants on them.
Date: Thu, 18 Feb 2010 14:56:46 -0600

There has been a lot of discussion lately about the best way to do async functions in node.  This is so important because node has non-blocking IO everywhere and regular exceptions don't work in this case.

Several of us in IRC made a gist to show a quick example of the different styles.

https://gist.github.com/602efd6a0d24b77fda36

This is a simple example, but it highlights enough of the differences to get a feel for how everything works.

I think that ideally node should ship with three versions of the async io libraries.

- A base library based on pure callbacks
 - A true sync version of that library for the times you don't care about blocking
 - And a "blessed" async library that wraps the base async library in Ryan's favorite of these options.

The plain async library will great for us who want to do our own thing and don't want the overhead of wrapping someone else's stuff that you don't like.

The sync version will be very useful for short running scripts and things that only happen at server startup.

And for the node programmers who don't care what style of async code they use, but just want a common official style that's better than plain callbacks, will use the third lib.

The first two libs have to be shipped with node, but third may or may not.
```

---
layout: false

.left-column[
#### synchronous
]

.right-column[
```js
// synchronous
function test_and_load(filename) {
  var stat = fs.statSync(filename);
  
  // Filter out non-files
  if (!stat.isFile()) { return; }
  
  // Otherwise read the file in
  return fs.readFileSync(filename)
}
```
]

---
layout: false

.left-column[
#### synchronous
#### seperate cb
]

.right-column[
```js
// simple continuable with seperate callback and errback
function test_and_load(filename) { return function (callback, errback) {
  fs.stat(filename)(function (stat) {

// Filter out non-files
    if (!stat.isFile()) { callback(); return; }

// Otherwise read the file in
    fs.readFile(filename)(callback, errback);

}, errback);
}}
```
]

---
layout: false

.left-column[
#### synchronous
#### seperate cb
#### combined cb
]

.right-column[
```js
// simple continuable with single combined callback
function test_and_load(filename) { return function (callback) {
  fs.stat(filename)(function (stat) {

// Pass along any errors before we do anything
    if (stat instanceof Error) { callback(stat); return; }

// Filter out non-files
    if (!stat.isFile()) { callback(); return; }

// Otherwise read the file in
    fs.readFile(filename)(callback);

});
}}

```
]

---
layout: false

.left-column[
#### synchronous
#### seperate cb
#### combined cb
#### inimino
]

.right-column[
```js
// inimino style continuables
function test_and_load(filename) { return function (cont) {
  fs.stat(filename)(rightContinuation(cont)(function (stat) {

// Filter out non-files
    if (!stat.isFile()) { cont(); return; }

// Otherwise read the file in
    fs.readFile(filename)(cont);

}));
}}
```
]

---
layout: false

.left-column[
#### synchronous
#### seperate cb
#### combined cb
#### inimino
#### continuables
]

.right-column[
```js
// http://github.com/bentomas/node-continuables
function test_and_load(filename) {
  return fs.stat(filename)(function (stat) {
    
    // Pass along any errors before we do anything
    if(stat instanceof Error) { return; }
    
    // Filter out non-files
    if (!stat.isFile()) { return null; }

// Otherwise read the file in
    return fs.readFile(filename);

});
}
```
]

---
layout: false

.left-column[
#### synchronous
#### seperate cb
#### combined cb
#### inimino
#### continuables
#### node-promise
]

.right-column[
```js
// promise based with node-promise helpers (github.com/kriszyp/node-promise)
var when = require("promise").when;
function test_and_load(filename) {
  return when(fs.stat(filename), function (stat) {
 
    // Filter out non-files
    if (!stat.isFile()) { return; }
 
    // Otherwise read the file in
    return fs.readFile(filename);
    
  });
}
```
]
---
layout: false

.left-column[
#### synchronous
#### seperate cb
#### combined cb
#### inimino
#### continuables
#### node-promise
#### patch-promise
]

.right-column[
```js
// promise based with CommonJS monkey patch (github.com/kriszyp/node-commonjs/blob/master/patch-promise.js)
function test_and_load(filename) {
  return fs.stat(filename).then(function (stat) {
 
    // Filter out non-files
    if (!stat.isFile()) { return; }
 
    // Otherwise read the file in
    return fs.readFile(filename);
    
  });
}
```
]
---
layout: false

.left-column[
#### synchronous
#### seperate cb
#### combined cb
#### inimino
#### continuables
#### node-promise
#### patch-promise
#### promise based
]

.right-column[
```js
// promise based (how it works in current node)
function test_and_load(filename) {
  var promise = new process.Promise();
  fs.stat(filename).addCallback(function (stat) {

// Filter out non-files
    if (!stat.isFile()) { promise.emitSuccess(); return; }

// Otherwise read the file in
    fs.readFile(filename).addCallback(function (data) {
      promise.emitSuccess(data);
    }).addErrback(function (error) {
      promise.emitError(error);
    });

}).addErrback(function (error) {
    promise.emitError(error);
  });
  return promise;
}

```
]
---
class: email, inverse

```
From: Ryan Dahl <coldre...@gmail.com>
To: nodejs@googlegroups.com
Subject: Re: [nodejs] Comparison between continuables, promises and many variants on them.
Date: Fri, 19 Feb 2010 10:00:08 -0800

Hey everyone,
I'm going to remove promises entirely. For places where promises would
be used (fs, dns) I will instead use a standard callback interface:

method(arg0, arg1, arg2, function (error, result0, result1) {
     puts('complete');
  });

That is, the completion callback will always be the last parameter and
the first argument the completion will always be reserved for an error
object. By following this scheme everywhere, I'm confident that very
good user-land deferred/promise/continuation libraries will spring up.

Expect this interface in the next version of node, 0.1.30.
```
---
class: center, middle, bigcode
```js
method(arg0, arg1, arg2, function (error, result0, result1) {
  puts('complete');
});
```
---
class: center, middle
# Callback Ages
---
class: center, middle
```js
function doGreatWork(userId, fileName, callback) {
  getUser(userId, function (err, user) {
    if (err) return callback(err, null);
    getCompany(user.companyId, function (err, company) {
      if (err) return callback(err, null);
      getLocation(company.location, function (err, location) {
        if (err) return callback(err, null);
        getLatLong(location, function (err, latLong) {
          if (err) return callback(err, null);
          findSatelitteImage(latLong, 5 * km, function (err, imageUrl) {
            if (err) return callback(err, null);
            downloadImage(imageUrl, function (err, image) {
              if (err) return callback(err, null);
              writeToFile(fileName, image, function (err, result) {
                if (err) return callback(err, null);
                return callback(null, fileName)
              });
            });
          });
        });
      });
    });
  });
}
```
---
class: center, middle
layout: false

### <q>By following this scheme everywhere, I'm confident that very good user-land deferred / promise / continuation libraries will spring up.</q>
<cite>— Ryan Dahl</cite>
---
class: center, middle

# libraries will spring up
---
class: center, middle

![](assets/npm1.png)
---
class: center, middle

![](assets/npm2.png)
---
class: center, middle

![](assets/npm3.png)
---
class: center, middle

![](assets/npm4.png)
---
class: center, middle

![](assets/npm5.png)
---
class: center, middle

![](assets/npm6.png)
---
class: center, middle
# Let's talk about Promise
---
class: center, middle, bigcode
```js
method(arg0, arg1, arg2).then(function(result) {
  puts('complete');
}).catch(function(error) {
  puts('failed');
})
```
---
class: center, middle
```js
function doGreatWork(userId, fileName) {
  return getUser(userId).then(function (user) {
    return getCompany(user.companyId)
  }).then(function(company) {
    return getLocation(company.location)
  }).then(function(location) {
    return getLatLong(location)
  }).then(function(latLong) {
    return findSatelitteImage(latLong, 5 * km)
  }).then(function(imageUrl) {
    return downloadImage(imageUrl)
  }).then(function(image) {
    return writeToFile(fileName, image)
  }).then(function() {
    return fileName;
  })
}
```
---
class: center, middle
# Looks great?
---
class: center, middle, bigcode
```js
function doGreatWork(userId, fileName) {
  return getUser(userId).then(function (user) {
    return getCompany(user.companyId)
  }).then(function(company) {
    /* I need user here */
  })
}
```
---
class: center, middle, bigcode
```js
function doGreatWork(userId, fileName) {
  return getUser(userId).then(function (user) {
    return getCompany(user.companyId).then(function(company) {
      return user.sayHello(company);
    })
  })
}
```
---
class: center, middle
# 🤣
---
class: center, middle, bigcode
```js
function doGreatWork(userId, fileName) {
  var _user;
  return getUser(userId).then(function (user) {
    _user = user;
    return getCompany(user.companyId)
  }).then(function(company) {
    return _user.sayHello(company);
  })
}
```
---
class: center, middle, bigcode
```js
function doGreatWork(userId, fileName) {
  var ctx = {};
  return getUser(userId).then(function (user) {
    ctx.user = user;
    return getCompany(user.companyId)
  }).then(function(company) {
    return ctx.user.sayHello(company);
  })
}
```
---
class: center, middle, bigcode
```coffeescript
# CoffeeScript
do_great_work = (file_name) ->
  get_user(user_id).then (@user) =>
    get_company(@user.company_id)
  .then (@company) =>
    @user.say_hello(@company)
```
---
class: center, middle, bigcode
```js
// Bluebird
function doGreatWork(userId, fileName) {
  return getUser(userId).bind({}).then(function (user) {
    this.user = user;
    return getCompany(user.companyId)
  }).then(function(company) {
    return this.user.sayHello(company);
  }).bind()
}
```
---
class: center, middle
# Meanwhile...
---
class: center, middle, bigcode
```js
function doLittleWork(name) {
  return uploadHighScore(getDeviceId(), name, name.length)
    .then(() => true)
    .catch(() => false)
}

doLittleWork("orzFly").then(() => saveAndQuit());
```
---
class: center, middle, bigcode
```js
function doLittleWork(name) {
  return uploadHighScore(getDeviceId(), name, name.length)
    .then(() => true)
    .catch(() => false)
}

doLittleWork(undefined).then(() => saveAndQuit());
// TypeError: Cannot read property 'length' of undefined
// at doLittleWork (presentation.js:6:51)
```
---
class: center, middle
# 🤣
---
class: center, middle
name: wow
## Generator!
---
class: center, middle
# Promise with Generator
---
class: center, middle, bigcode
```js
co(function* () {
 try {
 let result = yield method(arg0, arg1, arg2);
 puts('complete');
 } catch (error) {
 puts('failed');
 })
})
```
---
class: center, middle, bigcode
```js
var doGreatWork = co.wrap(function* (userId, fileName) {
 var user = yield getUser(userId);
 var company = yield getCompany(user.companyId);
 var location = yield getLocation(company.location);
 var latLong = yield getLatLong(location);
 var imageUrl = yield findSatelitteImage(latLong, 5 * km);
 var image = yield downloadImage(imageUrl);
 yield writeToFile(fileName, image);
 return fileName;
});
```
---
class: center, middle
# Bluebird.coroutine
---
class: center, middle, bigcode
```js
var doGreatWork = Promise.coroutine(function* (userId, fileName) {
 var user = yield getUser(userId);
 var company = yield getCompany(user.companyId);
 var location = yield getLocation(company.location);
 var latLong = yield getLatLong(location);
 var imageUrl = yield findSatelitteImage(latLong, 5 * km);
 var image = yield downloadImage(imageUrl);
 yield writeToFile(fileName, image);
 return fileName;
});
```
---
class: center, middle
# async & await
---
class: center, middle, bigcode
```js
var doGreatWork = async function (userId, fileName) {
 var user = await getUser(userId);
 var company = await getCompany(user.companyId);
 var location = await getLocation(company.location);
 var latLong = await getLatLong(location);
 var imageUrl = await findSatelitteImage(latLong, 5 * km);
 var image = await downloadImage(imageUrl);
 await writeToFile(fileName, image);
 return fileName;
};
```
---
class: center, middle, bigcode
```js
var doGreatWork = async function (userId, fileName) {
 let user = getUser(userId);
 let company = yield getCompany(user.companyId);
 return yield user.sayHello(company);
};
```
---
class: center, middle, bigcode
```js
var doLittleWork = async function (userId, fileName) {
 try {
 yield uploadHighScore(getDeviceId(), name, name.length);
 return true;
 } catch (e) {
 return false;
 }
};

doLittleWork(undefined).then(() => saveAndQuit());
```
---
class: center, middle

![](assets/caniuse.png)
---
class: center, middle, inverse

# One more thing...
---
class: center, middle

![](assets/webkit.png)
---
class: center, middle, bigcode

```js
new Thread(function() { console.log("Hello, threads!"); });
```

```js
let result = new Thread(() => 42).join(); // returns 42
```

```js
new Thread(() => 42).asyncJoin().then((result) => /* result is 42 */)
```
---
class: center, middle

## <q>The next step for this wild thought experiment is to attempt to implement it and see if it works. </q>

---
class: center, middle
layout: true
# Q&A
---