SlideShare una empresa de Scribd logo
1 de 43
Descargar para leer sin conexión
Make Async Great Again
Serge Karankevich, Intellectsoft
MinskJS #2
=> 1, 3, 2
Make Async Great Again
Асинхронность
1. Неблокирующее исполнение
2. Взаимодействие «Сейчас <=> Потом»
3. Последовательность инструкций
Только AJAX и setTimeout?
• Работа с файлами (FileAPI, fs)
• Анимации (requestAnimationFrame, тайминги)
• WebWorkers
• События DOM
• «Тяжелые» циклы
• И так далее…
«Плоский» асинхронный код
Make Async Great Again
Make Async Great Again
*this
Make Async Great Again
Make Async Great Again
callbackhell.com
Promises
Before Promise A+
• $.Deferred
• when.js
• Q.js
• RSVP.js
• Other awesome custom promise-like object
Make Async Great Again
Make Async Great Again
Make Async Great Again
kosamari.com/notes/the-promise-of-a-burger-party
github.com/mattdesl/promise-cookbook
Make Async Great Again
Make Async Great Again
NodeJS 4+
Generators
Make Async Great Again
Как запускать?
COroutines
COmagic
github.com/tj/co
Make Async Great Again
NodeJS 4+
Async Functions
ES2017
TC39 Stage 4 (Finished)
Как запускать?
«Плоский» асинхронный код
Make Async Great Again
А если ошибка?
Make Async Great Again
NodeJS 7.0, V8 5.4
--harmony-async-await
NodeJS 7.6, V8 5.5
March 2017
Babel ;)
Make Async Great Again
npm install --save-dev babel-plugin-transform-regenerator
Слайд про Vue.js :)
Спасибо за внимание!
Вопросы?

Más contenido relacionado

La actualidad más candente

Мониторь, автоматизируй Docker
Мониторь, автоматизируй DockerМониторь, автоматизируй Docker
Мониторь, автоматизируй DockerBadoo Development
 
Near-realtime аналитика событий в высоконагруженном проекте
Near-realtime аналитика событий в высоконагруженном проектеNear-realtime аналитика событий в высоконагруженном проекте
Near-realtime аналитика событий в высоконагруженном проектеAlexandr Krasheninnikov
 
VVV. Сервер для WordPress-разработчика
 VVV. Сервер для WordPress-разработчика VVV. Сервер для WordPress-разработчика
VVV. Сервер для WordPress-разработчикаKolya Korobochkin
 
Benchmarking PostgreSQL in Linux and FreeBSD
Benchmarking PostgreSQL in Linux and FreeBSDBenchmarking PostgreSQL in Linux and FreeBSD
Benchmarking PostgreSQL in Linux and FreeBSDAlex Chistyakov
 
Moбильная база данных Realm. Прошло ли время SQLite?
Moбильная база данных Realm. Прошло ли время SQLite?Moбильная база данных Realm. Прошло ли время SQLite?
Moбильная база данных Realm. Прошло ли время SQLite?Олег Чебулаев
 
maps.sputnik.ru #highload2014
maps.sputnik.ru #highload2014maps.sputnik.ru #highload2014
maps.sputnik.ru #highload2014Maxim Dementyev
 
Web performance 101 [GDG nsk webdev meetup #3]
Web performance 101 [GDG nsk webdev meetup #3]Web performance 101 [GDG nsk webdev meetup #3]
Web performance 101 [GDG nsk webdev meetup #3]Eugene Chekan
 
GDGNSK Работа с геоданными в Go
GDGNSK Работа с геоданными в GoGDGNSK Работа с геоданными в Go
GDGNSK Работа с геоданными в GoAndrew Minkin
 
My talk on Docker, Youcon 2015
My talk on Docker, Youcon 2015My talk on Docker, Youcon 2015
My talk on Docker, Youcon 2015Alex Chistyakov
 
Networks for beginners
Networks for beginnersNetworks for beginners
Networks for beginnersAndrew Minkin
 
Борис Каплуновский, Aviasales.ru
Борис Каплуновский, Aviasales.ruБорис Каплуновский, Aviasales.ru
Борис Каплуновский, Aviasales.ruOntico
 
Архитектура растущего проекта, на примере ВКонтакте
Архитектура растущего проекта, на примере ВКонтактеАрхитектура растущего проекта, на примере ВКонтакте
Архитектура растущего проекта, на примере ВКонтактеTKConf
 
My talk at Highload++ 2015
My talk at Highload++ 2015My talk at Highload++ 2015
My talk at Highload++ 2015Alex Chistyakov
 
Обработка геоданных в Go
Обработка геоданных в GoОбработка геоданных в Go
Обработка геоданных в GoAndrew Minkin
 
Андрей Федоренчик- «Высоконагруженная система с аналитикой на InfoBright»
Андрей Федоренчик- «Высоконагруженная система с аналитикой на InfoBright»Андрей Федоренчик- «Высоконагруженная система с аналитикой на InfoBright»
Андрей Федоренчик- «Высоконагруженная система с аналитикой на InfoBright»Tanya Denisyuk
 
Серверный JavaScript: NodeJS и CouchDB
Серверный JavaScript: NodeJS и CouchDBСерверный JavaScript: NodeJS и CouchDB
Серверный JavaScript: NodeJS и CouchDBStepan Stolyarov
 

La actualidad más candente (20)

Мониторь, автоматизируй Docker
Мониторь, автоматизируй DockerМониторь, автоматизируй Docker
Мониторь, автоматизируй Docker
 
Near-realtime аналитика событий в высоконагруженном проекте
Near-realtime аналитика событий в высоконагруженном проектеNear-realtime аналитика событий в высоконагруженном проекте
Near-realtime аналитика событий в высоконагруженном проекте
 
VVV. Сервер для WordPress-разработчика
 VVV. Сервер для WordPress-разработчика VVV. Сервер для WordPress-разработчика
VVV. Сервер для WordPress-разработчика
 
Benchmarking PostgreSQL in Linux and FreeBSD
Benchmarking PostgreSQL in Linux and FreeBSDBenchmarking PostgreSQL in Linux and FreeBSD
Benchmarking PostgreSQL in Linux and FreeBSD
 
Moбильная база данных Realm. Прошло ли время SQLite?
Moбильная база данных Realm. Прошло ли время SQLite?Moбильная база данных Realm. Прошло ли время SQLite?
Moбильная база данных Realm. Прошло ли время SQLite?
 
maps.sputnik.ru #highload2014
maps.sputnik.ru #highload2014maps.sputnik.ru #highload2014
maps.sputnik.ru #highload2014
 
Барнаул15
Барнаул15Барнаул15
Барнаул15
 
Devconf15
Devconf15Devconf15
Devconf15
 
Web performance 101 [GDG nsk webdev meetup #3]
Web performance 101 [GDG nsk webdev meetup #3]Web performance 101 [GDG nsk webdev meetup #3]
Web performance 101 [GDG nsk webdev meetup #3]
 
GDGNSK Работа с геоданными в Go
GDGNSK Работа с геоданными в GoGDGNSK Работа с геоданными в Go
GDGNSK Работа с геоданными в Go
 
Build your own multistack JS startup
Build your own multistack JS startupBuild your own multistack JS startup
Build your own multistack JS startup
 
My talk on Docker, Youcon 2015
My talk on Docker, Youcon 2015My talk on Docker, Youcon 2015
My talk on Docker, Youcon 2015
 
On Docker
On DockerOn Docker
On Docker
 
Networks for beginners
Networks for beginnersNetworks for beginners
Networks for beginners
 
Борис Каплуновский, Aviasales.ru
Борис Каплуновский, Aviasales.ruБорис Каплуновский, Aviasales.ru
Борис Каплуновский, Aviasales.ru
 
Архитектура растущего проекта, на примере ВКонтакте
Архитектура растущего проекта, на примере ВКонтактеАрхитектура растущего проекта, на примере ВКонтакте
Архитектура растущего проекта, на примере ВКонтакте
 
My talk at Highload++ 2015
My talk at Highload++ 2015My talk at Highload++ 2015
My talk at Highload++ 2015
 
Обработка геоданных в Go
Обработка геоданных в GoОбработка геоданных в Go
Обработка геоданных в Go
 
Андрей Федоренчик- «Высоконагруженная система с аналитикой на InfoBright»
Андрей Федоренчик- «Высоконагруженная система с аналитикой на InfoBright»Андрей Федоренчик- «Высоконагруженная система с аналитикой на InfoBright»
Андрей Федоренчик- «Высоконагруженная система с аналитикой на InfoBright»
 
Серверный JavaScript: NodeJS и CouchDB
Серверный JavaScript: NodeJS и CouchDBСерверный JavaScript: NodeJS и CouchDB
Серверный JavaScript: NodeJS и CouchDB
 

Similar a Make Async Great Again

Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)Ontico
 
#7 "Многообещающий JavaScript – Promises" Денис Речкунов
#7 "Многообещающий JavaScript – Promises" Денис Речкунов#7 "Многообещающий JavaScript – Promises" Денис Речкунов
#7 "Многообещающий JavaScript – Promises" Денис РечкуновJSib
 
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полнойОмские ИТ-субботники
 
Node.js введение в технологию, КПИ #ITmeetingKPI
Node.js введение в технологию, КПИ  #ITmeetingKPINode.js введение в технологию, КПИ  #ITmeetingKPI
Node.js введение в технологию, КПИ #ITmeetingKPITimur Shemsedinov
 
Анатомия веб сервиса (HighLoad-2014)
Анатомия веб сервиса (HighLoad-2014)Анатомия веб сервиса (HighLoad-2014)
Анатомия веб сервиса (HighLoad-2014)Andrey Smirnov
 
Анатомия веб-сервиса, Андрей Смирнов (ex-Skype)
Анатомия веб-сервиса, Андрей Смирнов (ex-Skype)Анатомия веб-сервиса, Андрей Смирнов (ex-Skype)
Анатомия веб-сервиса, Андрей Смирнов (ex-Skype)Ontico
 
TК°Conf. Организация разработки Frontend. Виталий Слободин.
TК°Conf. Организация разработки Frontend. Виталий Слободин.TК°Conf. Организация разработки Frontend. Виталий Слободин.
TК°Conf. Организация разработки Frontend. Виталий Слободин.TKConf
 
Alexei Sintsov - "Between error and vulerability - one step"
Alexei Sintsov - "Between error and vulerability - one step"Alexei Sintsov - "Between error and vulerability - one step"
Alexei Sintsov - "Between error and vulerability - one step"Andrew Mayorov
 
Прокачиваем WebDriverAgent или как тестировать iOS-приложения после ядерного ...
Прокачиваем WebDriverAgent или как тестировать iOS-приложения после ядерного ...Прокачиваем WebDriverAgent или как тестировать iOS-приложения после ядерного ...
Прокачиваем WebDriverAgent или как тестировать iOS-приложения после ядерного ...Alexey Makhov
 
Сергей Шамбир, Адаптация Promise/A+ для взаимодействия между C++ и Javascript
Сергей Шамбир, Адаптация Promise/A+ для взаимодействия между C++ и JavascriptСергей Шамбир, Адаптация Promise/A+ для взаимодействия между C++ и Javascript
Сергей Шамбир, Адаптация Promise/A+ для взаимодействия между C++ и JavascriptSergey Platonov
 
Node.js Меньше сложности, больше надежности Holy.js 2021
Node.js Меньше сложности, больше надежности Holy.js 2021Node.js Меньше сложности, больше надежности Holy.js 2021
Node.js Меньше сложности, больше надежности Holy.js 2021Timur Shemsedinov
 
Webuibasics - Lesson 3 - Nginx, SSI (in russian)
Webuibasics - Lesson 3 - Nginx, SSI (in russian)Webuibasics - Lesson 3 - Nginx, SSI (in russian)
Webuibasics - Lesson 3 - Nginx, SSI (in russian)xasima
 
Codeception UATestingDays
Codeception UATestingDaysCodeception UATestingDays
Codeception UATestingDaysdavertmik
 
Badoo в облаках. Решение для запуска cli-скриптов в облаке собственной разраб...
Badoo в облаках. Решение для запуска cli-скриптов в облаке собственной разраб...Badoo в облаках. Решение для запуска cli-скриптов в облаке собственной разраб...
Badoo в облаках. Решение для запуска cli-скриптов в облаке собственной разраб...Badoo Development
 
разработка Metro style приложений
разработка Metro style приложенийразработка Metro style приложений
разработка Metro style приложенийОлег Винников
 
Система обработки бизнес-логики server-side приложения на Groovy
Система обработки бизнес-логики server-side приложения на GroovyСистема обработки бизнес-логики server-side приложения на Groovy
Система обработки бизнес-логики server-side приложения на GroovyRegn
 
Async Javascript
Async JavascriptAsync Javascript
Async JavascriptGetDev.NET
 

Similar a Make Async Great Again (20)

Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
 
#7 "Многообещающий JavaScript – Promises" Денис Речкунов
#7 "Многообещающий JavaScript – Promises" Денис Речкунов#7 "Многообещающий JavaScript – Promises" Денис Речкунов
#7 "Многообещающий JavaScript – Promises" Денис Речкунов
 
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной
 
Node.js введение в технологию, КПИ #ITmeetingKPI
Node.js введение в технологию, КПИ  #ITmeetingKPINode.js введение в технологию, КПИ  #ITmeetingKPI
Node.js введение в технологию, КПИ #ITmeetingKPI
 
Анатомия веб сервиса (HighLoad-2014)
Анатомия веб сервиса (HighLoad-2014)Анатомия веб сервиса (HighLoad-2014)
Анатомия веб сервиса (HighLoad-2014)
 
Анатомия веб-сервиса, Андрей Смирнов (ex-Skype)
Анатомия веб-сервиса, Андрей Смирнов (ex-Skype)Анатомия веб-сервиса, Андрей Смирнов (ex-Skype)
Анатомия веб-сервиса, Андрей Смирнов (ex-Skype)
 
PowerShell
PowerShellPowerShell
PowerShell
 
TК°Conf. Организация разработки Frontend. Виталий Слободин.
TК°Conf. Организация разработки Frontend. Виталий Слободин.TК°Conf. Организация разработки Frontend. Виталий Слободин.
TК°Conf. Организация разработки Frontend. Виталий Слободин.
 
Codeception Introduction
Codeception IntroductionCodeception Introduction
Codeception Introduction
 
Alexei Sintsov - "Between error and vulerability - one step"
Alexei Sintsov - "Between error and vulerability - one step"Alexei Sintsov - "Between error and vulerability - one step"
Alexei Sintsov - "Between error and vulerability - one step"
 
Прокачиваем WebDriverAgent или как тестировать iOS-приложения после ядерного ...
Прокачиваем WebDriverAgent или как тестировать iOS-приложения после ядерного ...Прокачиваем WebDriverAgent или как тестировать iOS-приложения после ядерного ...
Прокачиваем WebDriverAgent или как тестировать iOS-приложения после ядерного ...
 
Сергей Шамбир, Адаптация Promise/A+ для взаимодействия между C++ и Javascript
Сергей Шамбир, Адаптация Promise/A+ для взаимодействия между C++ и JavascriptСергей Шамбир, Адаптация Promise/A+ для взаимодействия между C++ и Javascript
Сергей Шамбир, Адаптация Promise/A+ для взаимодействия между C++ и Javascript
 
Node.js Меньше сложности, больше надежности Holy.js 2021
Node.js Меньше сложности, больше надежности Holy.js 2021Node.js Меньше сложности, больше надежности Holy.js 2021
Node.js Меньше сложности, больше надежности Holy.js 2021
 
Rx
RxRx
Rx
 
Webuibasics - Lesson 3 - Nginx, SSI (in russian)
Webuibasics - Lesson 3 - Nginx, SSI (in russian)Webuibasics - Lesson 3 - Nginx, SSI (in russian)
Webuibasics - Lesson 3 - Nginx, SSI (in russian)
 
Codeception UATestingDays
Codeception UATestingDaysCodeception UATestingDays
Codeception UATestingDays
 
Badoo в облаках. Решение для запуска cli-скриптов в облаке собственной разраб...
Badoo в облаках. Решение для запуска cli-скриптов в облаке собственной разраб...Badoo в облаках. Решение для запуска cli-скриптов в облаке собственной разраб...
Badoo в облаках. Решение для запуска cli-скриптов в облаке собственной разраб...
 
разработка Metro style приложений
разработка Metro style приложенийразработка Metro style приложений
разработка Metro style приложений
 
Система обработки бизнес-логики server-side приложения на Groovy
Система обработки бизнес-логики server-side приложения на GroovyСистема обработки бизнес-логики server-side приложения на Groovy
Система обработки бизнес-логики server-side приложения на Groovy
 
Async Javascript
Async JavascriptAsync Javascript
Async Javascript
 

Make Async Great Again

Notas del editor

  1. Название созвучно с лозунгом одного очень известного политика в одной очень известной стране. Мы его сегодня еще увидим. Кто пишет асинхронный код на JS?
  2. Нечто подобное вы наверняка видели в начале своей карьеры или на собеседованиях в качестве одного из первых вопросов.
  3. То чувство, когда начинаешь что-то подозревать…
  4. Что такое асинхронность? Мы не будем рассматривать асинхронность на примере этой схемы. Асинхронность для меня, как для человека, который пишет и читает код – это …
  5. Какие функции могут быть асинхронными?
  6. Рассмотрим абстрактную задачу. Я записал вызовы функций в той последовательности, в которой по-моему мнению коду стоило бы выполняться: получить список твитов, обработать список авторов и вывести его в консоль. В некоторых других языках это бы вполне работало. Но в JS – нет.
  7. Ну теперь уже точно не подозреваешь, а откровенно в шоке…
  8. Решение в лоб: передать некоторые функции, которые выполнятся только после завершения асинхронного действия. Функции обратного вызова. Этот код весьма нелегко читать и поддерживать. Добавление дополнительного вызова метода «углубляет» нас в этой иерархии. Есть еще одно НО…
  9. Т.к. коллбек выполняется в другом контексте, можно допустить ошибку при использовании `this`. Поверьте, в эпоху до стрелочных функций это была очень распространенная ошибка. С лечением типа `var self = this` и bind(this), но не все и сейчас знают про bind))
  10. Давайте внимательно посмотрим на каноническую пирамиду коллбеков в вакууме. Здесь есть всё: и консоль логи, и форычи, и bind this. Вложенность вызовов все углубляется и углубляется. Подобный код до сих пор можно найти в плагинах для того же ExpressJS v4.
  11. Забыл предупредить что вас снимает скрытая камера! Кто узнал себя?
  12. Различные библиотеки. Главная идея: вызов асинхронной функции возвращает нам некий объект, для которого мы можем описать поведение на изменение статуса (успешно/неудачно).
  13. Комикс Mariko Kosaka
  14. В комиксе автор описывает промис, как брелок, который выдает мне повар…
  15. А брелок в свою очередь оповестит меня, когда стоит подойти на стойку выдачи заказа, чтобы получить или нет бургер. Некоторое подобие одноразового медиатора.
  16. Полезные ссылки
  17. Я переписал код на промисы. Промис можно возвращать в функцию высшего порядка. Последовательность инструкций достаточно легко читать. Сложность: новички (и не только) могут запутаться в цепочках then-catch. Promise.race()
  18. Возвращается итератор. Вызываем next => объект-итерация. Фактически, есть возможность запаузить функцию. Т.е. передать управление функции высшего порядка, не теряя состояние текущей. Споры: звездочка в имени функции.
  19. Как запускать? Можно написать свою обертку, которая будет вызывать итератор, проверять его состояние done true/false, исполнять код далее или нет.
  20. Библиотек CO. CO сам создает итератор, вызывает next() нужное кол-во раз и т.д. Такой подход используется в KoaJS v.1 В целом, у меня получилось написать последовательность инструкций, которая выполняется в этом порядке, этот код гораздо легче читать и писать.
  21. Перепишу мой код на async-await.
  22. Такой подход KoaJS v.2
  23. Йеее! Успех!
  24. Просто оборачиваю try-catch.