The document discusses async JavaScript features that are coming in ES7, including generators, promises, and async/await syntax. Generators allow functions to return multiple values and can be used to iterate over data asynchronously. Promises provide a better model for handling errors in async code compared to callbacks. Async/await syntax makes async code look more like synchronous blocking code for improved readability. These features can be used today via transpilation with Babel.

1. Async JavaScript in ES7
Modern Web UI Meetup
http://www.modernwebui.org
5/13/2015 @ Mozilla HQ

2. Who is Mike North?
2 @MichaelLNorth
UI Engineering Lead
@MichaelLNorth
github.com/truenorth

3. Blocking vs. Waiting
3
▪ Some people think of this as “push” vs “pull”
@MichaelLNorth
var weather = getForecast();
getForecast(function (weather) { ... });
▪ Blocking
▪ Waiting

4. Sync - Blocking is easy
4
▪ Code is simple
▪ Error handling with try/catch
▪ We only have one thread
@MichaelLNorth
function getForecast() {
let temperature = getTemperatureData();
let humidity = getHumidityData();
return {temperature, humidity};
}

5. Async - Callbacks
5
▪ See: Node.js
▪ Increased
complexity
▪ Explicit error
handling
@MichaelLNorth
function getForecast(cb) {
getTemperatureData( temperature => {
getHumidityData( humidity => {
cb({
temperature,
humidity
});
}, error => cb(error));
}, error => cb(error));
}

6. Async - Callbacks
6 @MichaelLNorth

7. Async - Promises
7
▪ Better error
handling model
▪ Still doesn’t look
like our “blocking”
code
▪ Promise-ness leaks
out everywhere
@MichaelLNorth
function getForecast() {
return
getTemperatureData(temperature => {
getHumidityData(humidity => {
return {
temperature,
humidity
};
})
})
}

8. Some cool stuff coming in 2016
that you can use right now

9. Iterators - Data Producers
9
▪ A convention that all ES6 Collections will implement
@MichaelLNorth
let it = getCollection()[Symbol.iterator]();
it.next(); // {value: 64, done: false}
it.next(); // {value: 68, done: false}
it.next(); // {value: undefined, done: true}

10. For-Of Loop
10 @MichaelLNorth
let a = [1,2,3,4,5];
for (let y of a) {
console.log(y);
}
let a = [1,2,3,4,5];
let it = a[Symbol.iterator]();
for(var i = it.next();
!i.done;
i = it.next()) {
console.log(i.value);
}

11. Generators - fns that return many values
11 @MichaelLNorth
function* getValues() {
yield 64;
yield 68;
return 71;
}
var values = getValues();
values.next(); // {value: 64, done: false}
values.next(); // {value: 68, done: false}
values.next(); // {value: 71, done: true}
▪ Generators return an iterator

12. Generators - fns that return many values
12 @MichaelLNorth
function* getValues() {
yield 64;
yield 68;
return 71;
}
▪ execution suspends @ yield
▪ values can be passed into a
generator
function* getValues() {
var x = yield 64;
var y = yield 2*x;
return 3*y;
}
it.next(31);

13. Generators - fns that return many values
13 @MichaelLNorth
function* getValues() {
yield 64;
yield 68;
return 71;
}
▪ execution suspends @ yield
▪ values can be passed into a
generator
function* getValues() {
var x = yield 64;
var y = yield 2*x;
return 3*y;
}
it.next(31);
▪ can iterate infinitely

14. Generators - fns that return many values
14 @MichaelLNorth
function* getValues() {
var x = yield 64;
var y = yield 2*x;
return 3*y;
}
var it = getValues();

15. Generators - fns that return many values
15 @MichaelLNorth
function* getValues() {
var x = yield 64;
var y = yield 2*x;
return 3*y;
}
var it = getValues();
it.next();
> {value: 64, done: false}

16. Generators - fns that return many values
16 @MichaelLNorth
function* getValues() {
var x = yield 64 6;
var y = yield 2*x;
return 3*y;
}
var it = getValues();
it.next();
> {value: 64, done: false}
it.next(6);
> {value: 12, done: false}

17. Generators - fns that return many values
17 @MichaelLNorth
function* getValues() {
var x = yield 64 6;
var y = yield 2*x 3;
return 3*y;
}
var it = getValues();
it.next();
> {value: 64, done: false}
it.next(6);
> {value: 12, done: false}
it.next(3);
> {value: 9, done: true}

18. @MichaelLNorth18

19. Async Iteration
19 @MichaelLNorth
function spawn(generator) {
return new Promise((resolve, reject) => {
var resultHandler = lastResult => {
var {value, done} = generator.next(lastResult);
if (!done) {
value.then(resultHandler, reject);
}
else {
accept(value);
}
};
});
}

20. @MichaelLNorth20
function spawn(generator) {
return new Promise((resolve, reject) => {
var resultHandler = lastResult => {
var {value, done} = generator.next(lastResult);
if (!done) {
value.then(resultHandler, reject);
}
else {
accept(value);
}
};
});
}
function* getWeather(zip) {
var temperature = yield getTemperature(zip);
var humidity = yield getHumidity(zip);
return {temperature, humidity};
}
spawn(getWeather(zip)).then(weather => console.log(weather));

21. @MichaelLNorth21
function spawn(generator) {
return new Promise((resolve, reject) => {
var resultHandler = lastResult => {
var {value, done} = generator.next(lastResult);
if (!done) {
value.then(resultHandler, reject);
}
else {
accept(value);
}
};
});
}
function* getWeather(zip) {
var temperature = yield getTemperature(zip);
var humidity = yield getHumidity(zip);
return {temperature, humidity};
}
spawn(getWeather(zip)).then(weather => console.log(weather));
Promise

22. @MichaelLNorth22
function spawn(generator) {
return new Promise((resolve, reject) => {
var resultHandler = lastResult => {
var {value, done} = generator.next(lastResult);
if (!done) {
value.then(resultHandler, reject);
}
else {
accept(value);
}
};
});
}
function* getWeather(zip) {
var temperature = yield getTemperature(zip) 72;
var humidity = yield getHumidity(zip);
return {temperature, humidity};
}
spawn(getWeather(zip)).then(weather => console.log(weather));
Promise
Value

23. @MichaelLNorth23
function spawn(generator) {
return new Promise((resolve, reject) => {
var resultHandler = lastResult => {
var {value, done} = generator.next(lastResult);
if (!done) {
value.then(resultHandler, reject);
}
else {
accept(value);
}
};
});
}
function* getWeather(zip) {
var temperature = yield getTemperature(zip) 72;
var humidity = yield getHumidity(zip) 0.32;
return {temperature, humidity};
}
spawn(getWeather(zip)).then(weather => console.log(weather));
Value

24. @MichaelLNorth
But wait…
24
function* getWeather(zip) {
var temperature = yield getTemperature(zip);
var humidity = yield getHumidity(zip);
return {temperature, humidity};
}
async function getWeather(zip) {
var temperature = await getTemperature(zip);
var humidity = await getHumidity(zip);
return {temperature, humidity};
}
function getWeather(zip) {
var temperature = getTemperature(zip);
var humidity = getHumidity(zip);
return {temperature, humidity};
}

25. Use it today
25 @MichaelLNorth
babel: {
nonStandard: false,
optional: [
'es7.asyncFunctions'
]
}
regeneratorRuntime.wrap(function getValues$
(context) {
while (1) switch (context.prev = context.next) {
case 0:
context.next = 2;
return 1;
case 2:
context.next = 4;
return 2;
case 4:
return context.abrupt("return", 31);
case 5:
case "end":
return context.stop();
}
}, ...);
function *getValues() {
yield 1;
yield 2;
return 31;
}

26. @MichaelLNorth
Learn More
26
Netflix JavaScript Talks - Version 7: The Evolution of JavaScript