Downloaded 11 times
Uploaded byMoscowJS
"Как перестать отлаживать асинхронный код и начать жить", Андрей Саломатин, FrontendConf 2015
Документ обсуждает сложности работы с асинхронным кодом в JavaScript, предлагая примеры различных подходов, таких как continuation passing style, promises и coroutines. Основное внимание уделяется лучшим практикам в разработке асинхронных функций и обработке событий. В завершение автор делится рекомендациями по улучшению процесса отладки асинхронного кода.
"Как перестать отлаживать асинхронный код и начать жить", Андрей Саломатин, FrontendConf 2015
- 1. Как перестать отлаживать асинхронныйкод и начать жить Андрей Саломатин FrontendConf, Москва 21.05.2015
- 2.
- 3. Schlecht!Script function f1*red(a, b){…} f1*red(a, b) function f2*blue(c) {…} f2*blue(c) 3 Функции имеют цвет
- 4. Schlecht!Script /* OK! */ functionouter*blue() { inner*blue() } 4 Синие могут вызывать только другие синие функции /* NOT OK! */ function outer*blue() { inner*red() }
- 5. Schlecht!Script /* OK! */ functionouter*red() { inner2*red() } 5 Красные могут вызывать и красные и синие функции /* OK! */ function outer*red() { inner2*blue() }
- 6. Писать и вызыватькрасные функции больно! 6
- 7. Schlecht!Script 7 Красные функции нужно называтьна немецком! /* Интерпретатор не поймёт */ function authUser*red() {…} function getName*red() {…}
- 8. Schlecht!Script 8 Красные функции нужно называтьна немецком! /* RICHTIG! */ function benutzerAutorisierung!*rot() {…} function nameErhalten!*rot() {…}
- 9. Как писать наSchlecht!Script? 9
- 10.
- 11.
- 12.
- 13. JavaScript • По-другому работаютif/else, for, return • Нет try/catch • Ломают абстракцию 13 Асинхронные функции это боль
- 14. // выполнять последовательно for(var i = 0; i < 10; i++) { if (shouldProcess(i)) { results.push(process(i)); } } 14 JavaScript if/for синхронно
- 15. function maybeProcess(i) { if(i >= 10) { return; } shouldProcess(function(should) { if (should) { process(i, function(result) { results.push(result); maybeProcess(i++); }); } maybeProcess(i++); }); } maybeProcess(0); 15 JavaScript if/for асинхронно
- 16. JavaScript • Не работаютif/then, for и т.д. • Нет try/catch • Ломают абстракцию 16 Асинхронные функции это боль
- 17.
- 18.
- 19.
- 20.
- 22.
- 23.
- 24.
- 25.
- 27. • Работа смножеством событий EventEmitter Stream • Работа с асинхронными операциями Continuation Passing Style Promises Coroutines 27 ES6
- 28. • Работа смножеством событий Async Generators • Работа с асинхронными операциями Async/Await 28 ES7
- 29.
- 30.
- 31. 31 Работа с множествомасинхронных событий EventEmitter Stream
- 32.
- 33.
- 34.
- 35. EventEmitter 35 События XMLHttpRequest progress (n) load(1) abort (1) error (1)
- 36. EventEmitter 36 Реализации Браузер + Node: EventEmitter3,Tiny Emitter Node: Node EventEmitter
- 37. 37 Работа с множествомасинхронных событий EventEmitter Stream
- 38. 38 EventEmitter Stream Работа с множествомасинхронных событий
- 39.
- 40.
- 41. Stream 41 Типы потоков stylus filescss files css prefixed files gulp.src('*.styl') stylus() autoprefixer() gulp.dest('dist')
- 42. Stream 42 источник преобразование преобразованиепотребитель gulp.src('*.styl') stylus() autoprefixer() gulp.dest('dist') Типы потоков
- 43.
- 44.
- 45. 45 Работа с множествомасинхронных событий EventEmitter Stream
- 46.
- 47.
- 48. 48 Работа с асинхроннымиоперациями Continuation Passing Style Promises Coroutines
- 49.
- 50. try { var user= fetchUser(userId); var following = fetchFollowingUsers(userId); var tweets = fetchTweets(following); handleResult(tweets); } catch (err) { handleError(err); } 50 Continuation Passing Style Получить ленту твитов синхронно Получить ленту твитов асинхронно
- 51. fetchUser(userId, function(err, user){ if (err) { return handleError(err); } fetchFollowingUsers(user, function(err, following) { if (err) { return handleError(err); } fetchTweets(following, function(err, tweets) { if (err) { return handleError(err); } handleResult(tweets); }); }); }); 51 Continuation Passing Style Получить ленту твитов асинхронно
- 52. fetchUser(userId, function(err, user){ if (err) { return handleError(err); } fetchFollowingUsers(user, function(err, following) { if (err) { return handleError(err); } fetchTweets(following, function(err, tweets) { if (err) { return handleError(err); } 52 Continuation Passing Style Получить ленту твитов асинхронно
- 53. 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) { if (err) { return handleError(err); } 53 Continuation Passing Style Holen Sie sich die Band tweets asynchron!
- 54.
- 55. 55 Работа с асинхроннымиоперациями Continuation Passing Style Promises Coroutines
- 56. 56 Continuation Passing Style Promises Coroutines Работас асинхронными операциями
- 57.
- 58.
- 59.
- 60.
- 61.
- 62. 62 Continuation Passing Style Promises Coroutines Работас асинхронными операциями
- 63. 63 Continuation Passing Style Promises Coroutines Работас асинхронными операциями
- 64.
- 65. Coroutines function getUserName(userId) { varuser = getUser(userId); return user.name; } 65 Остановите землю!
- 66. Функция, которую можно приостановитьи возобновить позже 66 Coroutines
- 67. function * getUserName(userId) { var user = yield getUser(userId); return user.name; }; 67 Генераторы: шаг 1 из 3 Coroutines
- 68. function * getUserName(userId) { var user = yield getUser(userId); return user.name; }; 68 Coroutines Генераторы: шаг 1 из 3
- 69. getUserName = co.wrap(function* (userId) { var user = yield getUser(userId); return user.name; }); 69 Coroutines Генераторы: шаг 2 из 3
- 70. getUserName = co.wrap(function* (userId) { var user = yield getUser(userId); return user.name; }); 70 Coroutines Генераторы: шаг 2 из 3
- 71.
- 72. Использовать генераторы для асинхронногокода — это хак 72
- 73. Использовать генераторы для асинхронногокода — это хак 73 (но я вас не выдам)
- 74. 74 Реализации Браузер + Node(используют транспайлер): co (generators), task.js (generators) Node (использует транспайлер): Fibers Coroutines
- 75. 75 Continuation Passing Style Promises Coroutines Работас асинхронными операциями
- 76.
- 77. Работа с множествомсобытий: EventEmitter Stream Работа с асинхронными операциями: CPS Promise Coroutine 77 ES6
- 79.
- 80. Работа с асинхроннымиоперациями: Async/Await Работа с множеством событий: Async Generators 80 ES7
- 81. Работа с асинхроннымиоперациями: Async/Await Работа с множеством событий: Async Generators 81 ES7ES7
- 82. Async/Await getUserName = co.wrap(function* (userId) { var user = yield getUser(userId); return user.name; }); 82 Генераторы
- 83. async function getUserName(userId){ var user = await getUser(userId); return user.name; } 83 Async/Await Async/Await
- 84. async function getUserName(userId){ var user = await getUser(userId); return user.name; } 84 Асинхронная функция Async/Await
- 85. Асинхронные функции легализованы вES7 85 Async/Await
- 86. Работа с асинхроннымиоперациями: Async/Await Работа с множеством событий: Async Generators 86 ES7
- 87. Работа с асинхроннымиоперациями: Async/Await Работа с множеством событий: Async Generators 87 ES7
- 88. Подписка на события длялюдей Async Generators 88
- 89. async function doDraw(){ for (let ev on observe(win, 'mousemove')) { draw(ev.clientX, ev.clientY); } } 89 События DOM Async Generators
- 90. async function doDraw(){ for (let ev on observe(win, 'mousemove')) { draw(ev.clientX, ev.clientY); } } 90 Async Generators События DOM
- 91. doDrawPromise = doDraw(); 91 AsyncGenerators События DOM
- 92. async function *filterWSMessages(ws){ for (let msg on observe(ws, 'message')) { if (isValid(msg)) yield msg; } } 92 WebSocket сообщения Async Generators
- 93. async function *filterWSMessages(ws){ for (let msg on observe(ws, 'message')) { if (isValid(msg)) yield msg; } } 93 WebSocket сообщения Async Generators
- 94. ??? = filterWSMessages(ws); ???= observe(win, 'mousemove'); ??? = observe(ws, 'message'); 94 Что возвращает Async Generator? Async Generators
- 95. messagesObservable = filterWSMessages(ws); eventsObservable= observe(win, 'mousemove'); eventsObservable = observe(ws, 'message'); 95 Async Generators Что возвращает Async Generator?
- 96.
- 97. Работа с асинхроннымиоперациями: Async/Await Работа с множеством событий: Async Generators 97 ES7
- 98. ES6 и ES7: асинхронныеоперации 98
- 99. fetchUser(userId, function(err, user){ if (err) { return handleError(err); } fetchFollowingUsers(user, function(err, following) { if (err) { return handleError(err); } fetchTweets(following, function(err, tweets) { if (err) { return handleError(err); } handleResult(tweets); }); }); }); 99 ES6 и ES7 Получить ленту твитов: CPS
- 100.
- 101. try { var user= await fetchUser(userId); var following = await fetchFollowingUsers(userId); var tweets = await fetchTweets(following); handleResult(tweets); } catch (err) { handleError(err); } 101 Получить ленту твитов: Async/Await ES6 и ES7
- 102. ES6 и ES7: обработкамножества событий 102
- 103. var handler =function(ev) { if (canDraw(ev)) { draw(ev.clientX, ev.clientY); } }; window.addEventListener('mousemove', handler); window.removeEventListener('mousemove', handler); // позже 103 DOM события: EventEmitter ES6 и ES7
- 104. Kefir.fromEvent(window, 'mousemove') .filter(canDraw) .onValue(function(ev) { draw(ev.clientX,ev.clientY) }) .end(); // позже 104 DOM события: Stream ES6 и ES7
- 105. for (ev onobserve(window, 'mousemove')) { if (canDraw(ev)) { draw(ev.clientX, ev.clientY); } } 105 DOM события: Async Generators ES6 и ES7
- 106. Как перестать отлаживать асинхронный коди начать жить 106
- 107.
- 108.
- 109.
- 110.
- 111.