Async JavaScript in ES7

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

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

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

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};
}

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));
}

Async - Callbacks
6 @MichaelLNorth

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
};
})
})
}

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

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}

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);
}

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 @MichaelLNorth
yield 64;
yield 68;
return 71;
}
▪ execution suspends @ yield

▪ values can be passed into a
generator
var x = yield 64;
var y = yield 2*x;
return 3*y;
}
it.next(31);

13 @MichaelLNorth
yield 64;
yield 68;
return 71;
}
▪ execution suspends @ yield

▪ values can be passed into a
generator
var x = yield 64;
var y = yield 2*x;
return 3*y;
}
it.next(31);
▪ can iterate infinitely

14 @MichaelLNorth
var x = yield 64;
var y = yield 2*x;
return 3*y;
}
var it = getValues();

15 @MichaelLNorth
var x = yield 64;
var y = yield 2*x;
return 3*y;
}
it.next();
> {value: 64, done: false}

16 @MichaelLNorth
var x = yield 64 6;
var y = yield 2*x;
return 3*y;
}
it.next();
it.next(6);

17 @MichaelLNorth
var x = yield 64 6;
var y = yield 2*x 3;
return 3*y;
}
it.next();
it.next(6);
it.next(3);
> {value: 9, done: true}

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);
}
};
});
}

@MichaelLNorth20
if (!done) {
}
else {
accept(value);
}
};
});
}
function* getWeather(zip) {
var temperature = yield getTemperature(zip);
var humidity = yield getHumidity(zip);
}
spawn(getWeather(zip)).then(weather => console.log(weather));

@MichaelLNorth21
if (!done) {
}
else {
accept(value);
}
};
});
}
}
Promise

@MichaelLNorth22
if (!done) {
}
else {
accept(value);
}
};
});
}
var temperature = yield getTemperature(zip) 72;
}
Promise
Value

@MichaelLNorth23
if (!done) {
}
else {
accept(value);
}
};
});
}
var temperature = yield getTemperature(zip) 72;
var humidity = yield getHumidity(zip) 0.32;
}
Value

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

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;
}

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

Async JavaScript in ES7

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Async JavaScript in ES7

Similaire à Async JavaScript in ES7 (20)

Plus de Mike North

Plus de Mike North (19)

Dernier

Dernier (20)

Async JavaScript in ES7