«Как перестать отлаживать асинхронные вызовы и начать...

Schlecht!Script

Schlecht!Script

function f1*red(a, b) {…}

f1*red(a, b)

function f2*blue(c) {…}

f2*blue(c)

3

Функции имеют цвет

Schlecht!Script

/* OK! */

function outer*blue() {

inner*blue()

}

4

Синие могут вызывать только другие синие функции

/* NOT OK! */

function outer*blue() {

inner*red()

}

Schlecht!Script

/* OK! */

function outer*red() {

inner2*red()

}

5

Красные могут вызывать и красные и синие функции

/* OK! */

function outer*red() {

inner2*blue()

}

Писать и вызывать красные функции больно!

6

Schlecht!Script7

Красные функции нужно называть на немецком!

/* Интерпретатор не поймёт */

function authUser*red() {…}

function getName*red() {…}

Schlecht!Script8

Красные функции нужно называть на немецком!

/* RICHTIG! */

function benutzerAutorisierung!*rot() {…}

function nameErhalten!*rot() {…}

Как писать на Schlecht!Script?

9

JavaScript

JavaScript extends

Schlecht!Script

11

Асинхронные функции это боль

12

JavaScript

• По-другому работают if/else, for, return • Нет try/catch • Ломают абстракцию

13


// выполнять последовательно

for (var i = 0; i < 10; i++) {

if (shouldProcess(i)) {

results.push(process(i));

}

}

14

if/for: синхронно

JavaScript

JavaScript

• Не работают if/then, for и т.д. • Нет try/catch • Ломают абстракцию

16


Асинхронностьв JavaScript

17

Андрей Саломатин

Productive Mobile MoscowJS RadioJS

18

@filipovskii

Асинхронность

Множество событий

Единичная операция

20

Асинхронность: два сценария

Чего мы хотим?

Контроля

22

Исключений

23

Единого интерфейса

24

25

КонтроляИсключений

Единого интерфейса

EventEmitter Stream

Async Generators (ES7)

27

Работа с множеством событий

Continuation Passing Style Promises

Coroutines Async/Await (ES7)

28

Работа с асинхронными операциями

Работа с множеством асинхронных

событий

30

31

Работа с множеством асинхронных событий

EventEmitter

Stream

EventEmitter32

Объект — источник событий

EventEmitter33

Примеры

Browser: XMLHttpRequest

Node: http.Server

EventEmitter

emitter.addEventListener(eventName, cb);

emitter.removeEventListener(eventName, cb);

34

API

EventEmitter35

События XMLHttpRequest

progress (n) load (1) abort (1) error (1)

EventEmitter36

Реализации

Браузер + Node:EventEmitter2, Tiny Emitter

Node:Node EventEmitter

37


EventEmitter

Stream

38


EventEmitter

Stream

Поток данных

Stream39

Stream40

Примеры

Node: fs.createReadStream(path)

Node: gulp.src(pattern)

Stream41

Типы потоков

stylus files css files css prefixed files

gulp.src('*.styl') stylus() autoprefixer() gulp.dest('dist')

Stream42

Типы потоков

источник преобразование преобразование потребитель

gulp.src('*.styl') stylus() autoprefixer() gulp.dest('dist')

Stream44


Изоморфные: RxJS, Kefir, Bacon.js

Node:Node Streams

45


EventEmitter Stream

46

Контроль

Исключения

Единый интерфейс

EventEmitter, Stream


47

48


Continuation Passing Style Promises

Coroutines

Continuation Passing Style49

Примеры

Browser:

navigator.geolocation.getCurrentPosition(cb)

Node:

fs.stat(path, cb)

try {

var user = fetchUser(userId);

var following = fetchFollowingUsers(userId);

var tweets = fetchTweets(following);

handleResult(tweets);

} catch (err) {

handleError(err);

}

50

Получить ленту твитов синхронно

Continuation Passing Style

fetchUser(userId, function(err, user) {

if (err) { return handleError(err); }

fetchFollowingUsers(user, function(err, following) {


fetchTweets(following, function(err, tweets) {



});

});

});

51

Получить ленту твитов асинхронно









});

52

Получить ленту твитов асинхронно


holenBenutzer!*rot(userId, function(err, user) {

if (err) { return handleError*blue(err); }

holenFolgendenBenutzer!*rot(user, function(err, following) {

if (err) { return handleError*blue(err); }

holenTweets!*rot(following, function(err, tweets) {


53

Получить ленту твитов asynchron!


54Schlecht!Script

55



Promises

Coroutines

56



Promises

Coroutines

Объект — асинхронная операция

Promises57

Promises

Promise.prototype.then(successCb, errorCb);

58

API

Promises

fetchUser(userId)

.then(fetchFollowingUsers)

.then(fetchTweets)

.then(handleResult, handleError);

59

API

Promises vs


60

Promises61


jQuery.Deffered Bluebird RSVP Q

62



Promises

Coroutines

63



Promises

Coroutines

Coroutines64

Coroutines

function getUserName(userId) {

var user = getUser(userId);

return user.name;

}

65

Остановите землю!

Функция, которую можно приостановить и возобновить

позже

Coroutines66

Coroutines

function * getUserName (userId) {

var user = yield getUser(userId);

return user.name;

};

67

Генераторы: шаг 1 из 3

Coroutines

function * getUserName (userId) {


return user.name;

};

68


Coroutines

getUserName = co.wrap(function * (userId) {


return user.name;

});

69


Coroutines



return user.name;

});

70


Coroutines

userNamePromise = getUserName(userId);

71


Использовать генераторы для асинхронного кода —

это хак

72

Использовать генераторы для асинхронного кода —

это хак

73

(но я вас не выдам)

Coroutines74


Браузер + Node (используют транспайлер):co (generators), task.js (generators)

Node (использует транспайлер):Fibers

75



Promises

Coroutines

76

Контроль

Исключения

Единый интерфейс

CPS, Promises, Coroutines

Работа с множеством событий: EventEmitter Stream

Работа с асинхронными операциями: CPS Promise Coroutine

77

ES6

Работа с асинхронными операциями: Async/Await

Работа с множеством событий: Async Generators

80

ES7



81

ES7

Async/Await



return user.name;

});

82

Генераторы

Async/Await

async function getUserName(userId) {

var user = await getUser(userId);

return user.name;

}

83

Async/Await

Async/Await

async function getUserName(userId) {

var user = await getUser(userId);

return user.name;

}

84

Асинхронная функция

Асинхронные функции легализованы в ES7

Async/Await85



86

ES7



87

ES7

Подписка на события для людей

Async Generators88

Async Generators

async function doDraw() {

for (ev on observe(win, 'mousemove')) {

draw(ev.clientX, ev.clientY);

}

}

89

События DOM

Async Generators

async function doDraw() {

for (ev on observe(win, 'mousemove')) {


}

}

90

События DOM



91

ES7

ES6 и ES7: асинхронные операции

92








});

});

});

93

Получить ленту твитов: CPS

ES6 и ES7

fetchUser(userId)

.then(fetchFollowingUsers)

.then(fetchTweets)

.then(handleResult, handleError);

94

Получить ленту твитов: Promise

ES6 и ES7

try {

var user = await fetchUser(userId);

var following = await fetchFollowingUsers(userId);

var tweets = await fetchTweets(following);


catch (err) {

handleError(err);

}

95

Получить ленту твитов: Async/Await

ES6 и ES7

ES6 и ES7: обработка множества событий

96

var handler = function(ev) {

if (canDraw(ev)) {


}

};

window.addEventListener('mousemove', handler);

window.removeEventListener('mousemove', handler); // позже

97

DOM события: EventEmitter

ES6 и ES7

Kefir.fromEvent(window, 'mousemove')

.filter(canDraw)

.onValue(function(ev) {

draw(ev.clientX, ev.clientY)

})

.end(); // позже

98

DOM события: Stream

ES6 и ES7

for (ev on observe(window, 'mousemove')) {

if (canDraw(ev)) {


}

}

99

DOM события: Async Generators

ES6 и ES7

Как перестать отлаживать асинхронный

код и начать жить

100

Определите задачу

101

Обдумайте ограничения

102

Используйте лучшие практики

103

Schlecht!Script?

Спасибо!

bit.ly/async-js

Андрей Саломатин @filipovskii

Frontend DevConf, Минск 18.04.2015

http://bit.ly/async-js

«Как перестать отлаживать асинхронные вызовы и начать...

Presentations & Public Speaking