Async js
Download as PPTX, PDF3 likes965 views
The document discusses the evolution of asynchronous programming in JavaScript, highlighting the transition from callbacks to promises and async functions. It covers various aspects such as the history, definitions, and analogs of these concepts in other programming languages. Additionally, it mentions the ongoing development of async generators and current usage support across different environments.
Async js
- 1. ITERA UKRAINE 2017 ASYNC JAVASCRIPT OLEKSANDR SKACHKOV @alSkachkov
- 2. β’ callbacks β’ promises β’ async function β’ async generator Async Javascript Journey from callback to async generator
- 3. ASYNC JAVASCRIPT β’ Is JavaScript really async? β’ JavaScript as language was sync until ES6 β’ What about: Event Loop, setTimeout, events and etc? It is part of the W3C spec β’ Promise β the first async feature in JavaScript
- 4. IN THE BEGINNING WAS THE FUNCTION β’ Callback function is a function that is passed to another function as a parameter β’ Problem with using callback β’ synchronization β’ callback hell β’ not clear flow
- 5. β’ Promise β 1976 β’ Promise pipeline β 1988 PROMISES Promises in computer science
- 6. TERMS Future vs Promise vs Deferred: β’ Future β’ Promise β’ Deferred - is the value - is the function that sets the value to future - is an object than can create a promise Operations of setting value is fulfill or resolve promise
- 7. PROMISES Analogs in other popular languages β’ C++ ->std::feature / std:promise β’ .Net ->Task β’ Java ->CompletableFuture
- 8. PROMISES IN JS History in JS: β’ Dojo - Deferred API β’ Promise/A+ specification β’ jQuery deferred and Q/$Q β’ Promises is part of ES6
- 9. PROMISES IN JS β’ What is Promise in ES6? The Promise object is used for asynchronous computations. A Promise represents a value which may be available now, or in the future, or never. β’ Promiseβs states: β’ fulfilled β’ pending β’ rejected
- 10. PROMISES IN JS β’ How to create? new Promise() β’ Promise.resolve β’ Promise.reject
- 11. PROMISES IN JS β’ Promise object has methods: β’ then β’ catch β’ finally - soon
- 12. FLOW WITH PROMISES Flow with promises: β’ Promise.all β’ Promise.race
- 13. CAN WE USE PROMISE? Global support 77% Yes we can
- 14. ASYNC FUNCTION β’ Coroutine β async function β’ History: β’ Coroutine is coined by Melvin Conway in 1958 β’ Inspired by C#/F#, started in 2014 by Luke Hoban and finished by Brian Terlson. CAN WE MAKE BETTER?
- 15. ASYNC FUNCTION Analogs β’ .Net - C# Async function β’ Java β Spring (directive @Async) β’ C++ - different approaches on is std::async
- 16. ASYNC FUNCTION β’ async function β’ async/await keyword β’ async function always returns Promise
- 17. ASYNC FUNCTION β’ async arrow function β’ async method in class
- 18. ASYNC FUNCTION Throw exception in async function reject in await can be handled by try/catch
- 19. IS FUNCTION ASYNC FUNCTION? typeof or toString? Symbol.toStringTag and Object.prototype.toString.call(β¦) No
- 20. FLOW WITH ASYNC FUNCTION Promise Async function
- 21. CAN WE USE ASYNC FUNCTION? Yes we can Global support 65%
- 22. CAN WE MAKE BETTER?
- 23. ASYNC GENERATOR Started developed by Kevin Smith in 2014, and finished by Domenic Denicola in 2017. Currently it is on STAGE - 3 Analogs: β’ .Net C# - AsyncEnumerator β’ C++ - Proposals n4244 & N3858(C++17) - Resumable Functions (resume/await) β’ Java β Not supported
- 24. ASYNC GENERATOR. RUN TIME β’ Async generator return iterator object β’ Async generator does not execute its body immediately
- 25. ASYNC GENERATOR Async generator return iterator with methods: β’ next β’ return β’ throw
- 26. ASYNC GENERATOR New keywords: for await, yield *
- 27. IS FUNCTION ASYNC GENERATOR? typeof or toString? Symbol.toStringTag and Object.prototype.toString.call(β¦)
- 28. CAN WE USE ASYNC GENERATOR? Not, but: β’ only in Chrome Canary with --js-flags=--harmony-async-iteration β’ my MacBook
- 29. QUESTION?
Editor's Notes
- #4: JS ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠΌ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΠΈ https://www.w3.org/TR/html5/webappapis.html#timers https://www.w3.org/TR/html5/webappapis.html#event-loops Streams https://streams.spec.whatwg.org
- #5: Piramide of The DOOM
- #6: ΠΡΠΎΠΌΠΈΡΡ ΠΈΠ·Π²Π΅ΡΡΠ½Ρ Ρ 1976 ΠΠ°ΡΠ±ΡΠ° ΠΠΈΡΠΊΠΎΠ²Π° ΠΠ°ΡΠΊ Π‘ΠΈΠΌΠΎΠ½
- #9: Dojo - 2009 JQuery β 2013 (me) Q - 2014 ES6 β 2014/2015
- #10: pending: initial state, not fulfilled or rejected. fulfilled: meaning that the operation was completed successfully. rejected: meaning that the operation failed.
- #20: http://gs.statcounter.com/ Babel Π΄Π»Ρ ΡΡΠ°ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΠΈΡΠΈΠ»
- #21: Part of the ES2017 Π‘ΠΎΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°Β (Π°Π½Π³Π». coroutine) β ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ, ΠΎΠ±ΠΎΠ±ΡΠ°ΡΡΠΈΠΉ ΠΏΠΎΠ½ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²Ρ ΠΎΠ΄Π½ΡΡ ΡΠΎΡΠ΅ΠΊ (Π° Π½Π΅ ΠΎΠ΄Π½Ρ, ΠΊΠ°ΠΊ ΠΏΠΎΠ΄ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°), ΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΡ ΠΈ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
- #22: Part of the ES2017 Π‘ΠΎΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°Β (Π°Π½Π³Π». coroutine) β ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ, ΠΎΠ±ΠΎΠ±ΡΠ°ΡΡΠΈΠΉ ΠΏΠΎΠ½ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²Ρ ΠΎΠ΄Π½ΡΡ ΡΠΎΡΠ΅ΠΊ (Π° Π½Π΅ ΠΎΠ΄Π½Ρ, ΠΊΠ°ΠΊ ΠΏΠΎΠ΄ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°), ΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΡ ΠΈ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
- #28: Symbol.toStringTag is property
- #31: https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&targets=&browsers=&builtIns=false&debug=false&code_lz=IYZwngdgxgBAZgV2gFwJYHsL3egFAShgG8AoGGYAd2FWRgHIBGegbjJgCcBTZBDregCZWJAL4kScHARZA
- #40: Symbol.toStringTag is property