The Story of Asynchronous JavaScript

This is the story of callbacks, promises, and Async/await in JavaScript.

[@t3dotgg]

Really pushing the bar for programming content man. Thank you for these efforts. So hyped for the next generation of engineers who get to grow up with stuff like this 🙏

[@uidotdev]

❤️

[@michastefanski565]

Dying from possibilities and amount of things to learn but we are crawling up 😂

[@aquilazyy1125]

The phone number vs. buzzer analogy is the best explanation I’ve ever seen on this topic

[@uidotdev]

Thank you!

[@KevinVandyTech]

I've used all of these patterns at some point in the past, but never fully understood the pros and cons of each pattern. Your videos are always the most clear explanations. Thank you

[@uidotdev]

Thank you Kevin! Glad it was helpful.

[@cool_christian92]

I totally agree with Kevin! As a Java developer leaning more on JavaScript these days, this video and especially the concept of Inversion of Control and the way you present code we’re done excellently.

[@michastefanski565]

It is somehow heartwarming seeing an experienced dev saying that he could not understand something meanwhile i'm hitting myself everytime I can't wrap my head around

[@hansmeyer2]

The first time I witnessed AJAX in action was on the Microsoft Developer Network web site circa 2000. It was being used to dynamically load expanded nodes in the table of contents. I remember calling over other devs to show them and we were all trying to wrap our heads around this sorcery. What a low key way to introduce such a revolutionary thing.

[@uidotdev]

Had to be one of the earliest use cases. Great story. Thanks for sharing!

[@robslaney3729]

@@uidotdev Before that, IE 5.0 had the original implementation in MSXML, late 1990s.

[@jamesparson]

@@robslaney3729 I remember that. Data islands. IE supported tag that would be loaded with (surprise) xml

[@MarcStober]

It seemed a little disingenuous that the Google executive talk about Gmail as maybe the first AJAX application when it was invented by Microsoft. Also I remember Google Maps rather than Gmail being the AJAX app that got everyone’s attention around 2004.

[@uidotdev]

@@MarcStober Finding high quality clips from that era is difficult. So it's less "who do I give credit to" and more "who has a useful clip that fits the narrative".

[@terencetuhinanshu]

I love the historical context presented in such a succinct way. Will definitely point all junior devs I come by to these videos to get their bearings on how we got here.

[@uidotdev]

Means a lot. Thanks Terence!

[@KalleJillheden]

For additional historical context, referencing C# is good for paying respect to the language authors. They invented the async/await pattern and since then all languages have followed. It's truly a masterful pattern that joins together synchronous and asynchronous code

[@flying-sheep]

@@KalleJillheden JavaScript has always been a bit more … amateurish than others. E.g its Promise class has problems (e.g. cancelling is not part of the API), and having map/reduce as array functions is also silly (having them on the iterator would be easier to JIT compile and also enable using them without having to convert some array-like thing like a NodeList into an array first: `document.querySelectorAll(...).iter().map(...).filter(...).toArray()` ).

[@pavfrang]

This is one of the cases where C# was revolutionary. C# brought the async/await pattern (in 2012) almost 5 years before JavaScript implemented it (in 2017).

[@shakimra]

Nice

[@HolyRamanRajya]

problem is the single threaded event loop of JS makes the behavior wildly different between C# and JS.

[@chadselph3076]

Nah, F# had it in 2007; but it's really just a specialization of the do-notation in Haskell which has been around since 1998

[@fyriss_]

these videos are one of the best on the whole platform, can't wait for more. It's especially great for young devs, who don't know context of some things in the past that well.

[@uidotdev]

Thanks so much. Means a lot.

[@jaykelly1729]

I get so confused learning JS man. Async is crazy for me rn… When I started digging in to async await a couple weeks ago I somehow found myself putting callbacks in my .then() functions. The other day I was writing Promise constructors inside async functions then trying to await them 😭😭 Learning JS I’ve found it’s less about syntax and more about concept. Knowing what you need and where. Videos like this help me organize these concepts so no matter the syntax I can always keep myself oriented in the code. For example, my end goal while learning async Js is to be able to refactor code from callbacks to async/await. Not through memorized syntax, but because I understand that success, failure callbacks turn in to resolve(), reject() and that the callback functions are turned to thenables. Same with going from Promise constructors to async/await. Sorry for long comment I’m an aspiring dev with no one to talk to about this stuff. Also if I said anything wrong please correct me. I need knowledge lol.

[@uidotdev]

Couldn't agree more. It helps if you try to understand the bigger "Why" before you dive into the details of the syntax. Sounds like you've figured that out.

[@HandledToaster2]

Hey friend. Keep up the good work! I wish you the best :)

[@rickmemmer5625]

"my end goal while learning async Js is to be able to refactor code from callbacks to async/await." I had a good chuckle at that -- since I was doing exactly the same thing. ;o) I've been meaning to get back to that (hence the reason I'm watching the video). I got sidetracked with other goals, and it's always a struggle in finding that balance between how far you go to try to "make up for lost time" and moving on to newer things like JS frameworks (but still practicing vanilla JS in parallel). For example: I'm starting a 20-week React bootcamp today. I thought about taking it last year, but I just felt I wasn't ready (and I was still deciding whether to go with Angular or React). But over the last year, I worked on things like calculators and populating grid & filtering a table. Filtering by a field is easy -- but filtering by a combination of fields, lists, option groups, etc. -- is something else entirely. Granted, you could use a 3-party grid to eliminate the hassle, but the "hassle" is the whole point -- to make it as complex as possible as a learning tool. I've got a glitch or two to fix, and then I'm gonna polish it up -- but the essence of it all works. That personal project just happens to be COVID data using the link below. I'm not making commentary on COVID one way or the other -- it's just data that provides a real-life example for filtering: coronavirus-19-api.herokuapp.com/countries Anyway, if you're interested -- I have plenty of advice to pass along if you have some questions and would like some suggestions & resources for your learning approach. And since I'm trying to keep my JS goals moving along in parallel with others, helping someone out would help me as well (especially since you're focused on something of great interest to me). And once I get this grid cleaned up fully-code commented, you're welcome to fork it from github if you like (same goes for the calculator). Oh, and I still haven't made up my mind on Angular vs React -- I need more experience to make up my mind (and even then, I'll keep the door open). As a learning tool to help out in a job I had where they were using AngularJS and ASP.NET MVC, I developed a personal application using those platforms (with the goal of migrating to Angular later). But I'm no longer at that company because I chewed out my manager for his sloppy work, poor customer service, and turbo-charged ego. Other than that, he was a great guy who taught me a lot. Unfortunately, he wasn't so keen on listening to others. Anyhoo, for various reasons -- I opted to go the React direction for now (with the aim of returning to Angular later so I can compare). And the bootcamp is a way to keep me on track (same goes for offering my help to you). For example: In preparing for that bootcamp, I bought a $39 course -- but instead of simply trying to plow through it, I paused after a couple of sections to practice what I've learned. I found these exercises that have been ideal for that purpose: coderfiles.dev/blog/reactjs-coding-exercises/ I'm not suggesting you start doing React (or any framework) right now -- just giving you some ideas for how you approach your goals.

[@CheekiTiki]

Old Async code drives me crazy bro lol. I'm still trying to wrap my head around it.

[@HolyRamanRajya]

tbh before this video I had the opposite and wrong idea of async await. Async+await is forcing the execution to behave synchronously i.e. one after the other. All that and without blocking the whole browser. I guess the keywords turned out to be a bit misleading for me till now.

[@PeteTheBrazilian]

Holy crap, this was the clearest, most concise explanation I've found for this topic. 10/10.

[@uidotdev]

So glad it was helpful. Thanks for watching!

[@uwagideon2723]

you always deliver awesome content

[@uidotdev]

Thank you!

[@taylorparrish4323]

More of these docs! As a web dev cutting my teeth in the modern era, where most things are abstracted away from you, context of where these technologies came from is invaluable.

[@TacoOblivion]

Haven't seriously done web dev in 13 years and let me tell you, it's a completely different ball game now. I barely recognize JavaScript along with my outdated HTML and CSS. I don't miss it though, it was a horrible mess before and Internet Explorer 6 is no longer anyone's worry. Good job to everyone involved in pushing the technology further and thank you for this brief summary of something big that I missed.

[@adityakachroo]

This is the best explanation of async/await. I always struggled in understanding it fully. Thanks for this amazing informative video

[@uidotdev]

Glad it was helpful!

[@sjadev]

These “The Story of” videos are pure gold.

[@uidotdev]

Thanks Stephen!

[@benjinguyen9965]

Damn man, you deserve yourself a hard-earned sub. Really appreciate the effort you put into these details which provides the perfect amount of detail. You're the "programmer historian" channel I've been looking for.

[@uidotdev]

Thank so much Benji!

[@avi12]

It's important to note that the downside of "await" is that it completely blocks the thread If you find yourself needing to call two or more Promises that do not depend on each other, you better off: const [value1, value2] = await Promise.all([promise1, promise2]);

[@pictzone]

That's a really good remark. Thanks for sharing it

[@uidotdev]

👍

[@peterd788]

True but a language in itself cannot determine the existence of or lack of dependency so dealing with it is left to the programmer. This is why in C# the mixing of async with the TPL is a developer choice to be tailored to the problem at hand.

[@alexandernordstrom1617]

But wait! There is more down that rabbit hole. - Use Promise.all if you need multiple promises to resolve successfully before proceeding and treat any rejected promise by immediately returning a rejection at the top level. - Use Promise.allSettled to wait for promises to either resolve or reject. This never rejects at the top level. It resolves to an array of {status, value} objects, so you can check the status of each promise and handle the outcomes. - Use Promise.any if you can proceed as soon as one of the promises succeeds. This will reject at the top level if all individual promises are rejected. - Use Promise.race to proceed as soon as the first promise resolves or rejects. This will resolve or reject depending on the outcome of the first settled promise.

[@francis_n]

I'm pretty confident with async Javascript but this was a great history and refresher. Well explained Tyler!

[@uidotdev]

Thank you Francis! Glad you enjoyed it.

[@stephanschuster9106]

I'd be glad to see a sequel of this explaining the glory of Observables.

[@hv7460]

why is more important to me when learning new things and thanks for this.

[@uidotdev]

Agree!

[@prog_demos]

Amazing content as always. I just love how it is still referred to as AJAX when mostly there's no XML to be found. One older dev I talked to simply used to call JSON XML until I corrected him. I guess it's really hard for older devs to keep track of all the changes in the front-end world.

[@uidotdev]

Ironically, it's also hard for new devs to get why things are done they way they are (specifically around weird naming conventions).

[@JeyDotC]

@@uidotdev yeah, some weird stuff exist for historical reasons, or because of mathematicians! :P

[@smoothbeak]

Beautiful explanation, probably the most clear and extensively explained example on this I have seen

[@uidotdev]

Thanks for the kind words ❤️

[@tyrodev5281]

I adore the story telling and the occasional memes. Almost everything that's new is built upon something existing and I absolutely love the fact that you provide the whole journey of a feature, that context helps clear the abstraction with a lot of new tech that we just use without really understanding the depths of it and why should we use it.

[@uidotdev]

So glad it was helpful. Thanks for watching!

[@pictzone]

This channel will blow up. Glad I found you early. Exceptional information and love your point of view on this kind of stuff.

[@uidotdev]

Thank you so much for the kind words ❤️

[@cinnanyan]

The one thing that JavaScript is still missing natively is the ability to handle asynchronous streams of data, which means an external library like RxJS is needed to make doing this manageable.

[@uidotdev]

The RxJS people have been in full force in the comments 😅

[@pizzapanni]

could you state an example for handling asynchronous streams of data?

[@cinnanyan]

​@@pizzapanni WebSocket connections

[@OmgImAlexis]

@@cinnanyan look at for await you can use that with a generator that is fed by the websocket messages.

[@fatrickwilbur1370]

These are some high quality videos, happy the algorithm recommended this channel

[@uidotdev]

Thank you!

[@square-pixel]

Fun video. One point I’d add is that async/await is built on-top of the same Promise API. Every async function returns a promise; and likewise, await operates on a promise. It’s actually possible to implement async/await-like behavior using generator functions and some glue logic to connect the Promise API-making async/await a kind of syntactic sugar.

[@lawrencedoliveiro9104]

That’s sort of how Python does it. Promises/futures and the event loop are just part of the standard library (asyncio), implementable in pure Python, rather than being part of the core language.

[@flow7502]

I'm learning JS at the moment, only getting started with the async part of it. And this is just the video I needed. Everything makes so much more sense. Thanks a lot for this. Liked and subbed.

[@uidotdev]

Glad it was helpful!

[@VE5ETA]

this is the best channel I've came across , thank you god 💘

[@uidotdev]

Thanks for watching!

[@BharadwajGiridhar]

For a guy who learned JS only from Async / Await - this is fucking amazing!

[@uidotdev]

Thank you!

[@warkentien2]

The simplicity and depth of these tutorials are second to none. Congratulations on the channel!

[@SuboptimalEng]

JS Dev: Call me back when you get the chance Date: No promises

[@uidotdev]

😩😩😩

[@johng3222]

This is the most incredibly entertaining programming video I've ever seen

[@uidotdev]

Glad you enjoyed it!

[@sleros7773]

Great video! Always great to learn how one tool came to existence and what is the reason behind its existence.

[@uidotdev]

Thank you!

[@MalikMehsi]

That's the best video on promises I have seen so far

[@uidotdev]

Thank you!

[@benoitleger-derville6986]

🟡Wonderful hindsight and clear vision of technological advances.

[@uidotdev]

Thank you!

[@minierparedes5177]

This is a phenomenal "Tutorial" history lesson!

[@uidotdev]

So glad you enjoyed it!

[@JacoblBroughton]

Here before 100k, i love these history / explanatory videos

[@uidotdev]

Ayyy ❤️❤️❤️

[@HarryLowtonIT]

Another awesome video! Can really tell the incredible amount of time you put into this episode🔥 my main question to myself after watching was should I go to Denny’s? 🥞🍳

[@uidotdev]

Thank you Harry! My only goal in life is to get restaurants to sponsor me for these. Imagine the possibilities.

[@HarryLowtonIT]

@@uidotdev I fully support your life goals!

[@bozz1g]

This felt like a movie, great video!

[@uidotdev]

Thanks for watching!

[@TheBicPen]

Nice video! JS has a reputation for having many weird quirks, but this video just shows that with a great team behind it, a language can improve and fix some of the problems of past design. Can't wait to see what other features will be added in the future!

[@uidotdev]

I agree!

[@olivermontalvan1416]

I'm so glad I found this channel!

[@friedpetrol]

This is a brilliant video, uidotdev. Great job mate.

[@uidotdev]

Thank you! Means a lot.

[@ZiddYT]

Love this style of video, really helps get the context and a better understanding of the reason behind different kind of implementations. Hopefully you will continue this series.

[@uidotdev]

Glad you enjoyed it!

[@lonewolfcoding5208]

i already used this in my capstone project and because of that i graduated BSIT college now im continue to learn

[@nuwandammikaabeysekera6049]

100 for creativity , and 100 for content , thank you

[@VerySadBatman]

Amazing video man! I can't believe I've been missing such great content. Thank you 🙏🏾🙏🏾

[@uidotdev]

So glad you enjoyed it!

[@macot79]

Fantastic video! Great examples that you provide along the way, very easy to follow and grasp while you at the same time maintain a good pace. Already looking forward to your next video! :)

[@uidotdev]

Thanks for watching!

[@MickenCZProfi]

This is awesome! Defo saving this for later.

[@uidotdev]

Thank you!

[@EmilYOo0]

subbing.. that promise analogy was amazing.

[@uidotdev]

Thank you!

[@astronemir]

This is actually interesting not just for js but super well made, Thanks. So good that I’m watching again to absorb

[@uidotdev]

Thank you!

[@raelindan]

Well thought out video, another (probably opinionated) view is that as a result of moving towards async await in javascript is that it starts to behave more like typed languages i.e. C# in which try catch is a reasonably similar thing to use with asynchronous code. Thus making it easier for devs to dabble in both language and barrier to entry to either one of the two could potentially be smaller if you already know one of the two

[@uidotdev]

Great comment. Thanks for watching!

[@lawrencedoliveiro9104]

try-catch is for exceptions, which JavaScript also has. But that’s an entirely separate thing. async/await is the resurgence of a very old CS concept called _coroutines_ , which are basically a way of avoiding threading. It’s become popular in many languages now, including Python with its asyncio framework.

[@bhagyashingale5663]

Fireship style loving it!

[@uidotdev]

Jeff is the 🐐

[@derickmoncado]

Outstanding man. THIS is the type of coding content I've been looking for. Absolutely destroying the like button on this one.

[@uidotdev]

Ayy thank you!

[@coreyleelarson]

Loving this series!

[@uidotdev]

Thanks for watching!

[@adamowada1751]

This is the best explanation of asynchronous code I've ever seen!

[@kevinfredericks2335]

Promise.all() is still very useful and can be more convenient and robust than async-await

[@amirhosseinahmadi3706]

Such a phenomenal channel! Keep up the great work...

[@uidotdev]

❤️

[@malkitsingh01]

Simply amazing!

[@uidotdev]

Thank you!

[@aliplaysgtr]

Extremely clear explanations, subscribed !

[@wlockuz4467]

I have never thought of Promises as eliminating inversion of control, pretty cool detail!

[@TechDiffuse]

That is some great content. You surely deserve many more subs and views! Looking forward to more videos!

[@uidotdev]

❤️

[@howwitty]

The restaurant analogy is helpful for understanding inversion of control. Thanks.

[@uidotdev]

Glad it helped!

[@Cyndaquil15]

Wish I had this video a few months ago when I was first really trying to learn about promised and async await functions in JavaScript. This video explained everything I miss understood and had to trial an error to get, as well as neatly condensed everything I did understand from probably 5-10 videos of much longer length. Can’t wait to see more content from you and definitely plan to check out your other videos

[@uidotdev]

So glad it was helpful!

[@shikhar2811]

Please continue making such videos , they're great

[@uidotdev]

We definitely will. Thanks for watching!

[@puyamoayer8214]

Oi, where was this 3 years ago when I needed it 😭

[@uidotdev]

Thanks for watching!

[@Sam-qn4ly]

Great vid! So smooth.

[@uidotdev]

Thanks for watching!

[@TheAcademik]

This video just showed up in my timeline and even though I was fairly certain I'd know all the information, but I clicked on it anyway because I'm always curious to hear what "new" voices are saying in the dev community. I was very impressed with the video production and the concise and precise explanations and thought to myself, "who is this guy." I then saw the "tylermcginnis" in the getuser example, and thought "ah yes, this all checks out." Keep making stuff Tyler! You've already had a massively positive impact on my career growth as a SWE, and I'm excited to see you're now on KZbin, making your content more broadly accessible to the wider community! 👍

[@uidotdev]

I always love comments like these. Thank you so much for all the support throughout the years. Glad I could be helpful! ❤️

[@chebrubin]

wasn't the first version of Outlook for the Web - a XHR dynamic desktop app like site?

[@scalalearning7850]

The meme clips you choose are next level

[@uidotdev]

Thank you!

[@user-ol6tq5hw7s]

Great video like always, give us some more! :)

[@uidotdev]

Working on it! ❤️

[@user-ol6tq5hw7s]

@@uidotdev I have no doubt, a big greeting from Serbia and just keep it up! :)

[@martinasdf4056]

another banger from uidotdev

[@uidotdev]

❤️

[@alexenax1109]

Amazing content!

[@riddixdan5572]

love the content

[@uidotdev]

Thank you!

[@mahmoodahmed7828]

Simply remarkable! 😍

[@uidotdev]

Thanks for watching!

[@lawrencedoliveiro9104]

9:07 The issue isn’t the difficulty of adding new features to JavaScript, it has more to do with the overhead of those features. Here we want to add a coroutine feature. The traditional way coroutines were implemented allows preemption to occur inside any function call. This means each coroutine “thread” needs its own full stack, just like you have with multithreading. This is called “stackful” coroutines. The way JavaScript, Python and other languages do it, with the async/await keywords, is called “stackless”. What that really means is, because preemption can only occur on explicit “await” calls, and these are only allowed in the bodies of “async” functions, only a small amount of stack data needs to be switched when preemption happens.

[@dionysios4714]

This was a damn good visual and conceptual analogy of Promises. Hats off to you sir.

[@uidotdev]

Thank you!

[@anncascarano8589]

This is a gem.

[@uidotdev]

Thank you!

[@youpele5226]

Amazing content, informative as well as entertaining. Your analogies are on point.

[@uidotdev]

Much appreciated!

[@BishalUdash]

The explanation is beautiful, you've earned a new sub 👍

[@uidotdev]

Welcome!

[@pranitchavan4549]

Amazing!

[@uidotdev]

❤️

[@Christobanistan]

Promises are just Tasks from the .Net Task Parallel Library, and async/await are from C#, utilizing them the same way. Microsoft was on the committee, obviously. ;)

[@BrunoOliveira-tj5xw]

Great vídeo! Saved as part of my theory material. Subscribed

[@elenangocam]

You deserve my subscription for this!!

[@uidotdev]

Welcome!

[@hoelefouk]

Damn man, you are amazing!

[@uidotdev]

Thank you!

[@ravgeetdhillon2990]

Very well executed video! Keep up the good work. I just subscribed!

[@uidotdev]

Thank you!

[@Sauvenil]

Awesome video, thanks!

[@uidotdev]

You're welcome!

[@techworld3043]

loving the video

[@uidotdev]

Thanks for watching!

[@binyamsintayehu5599]

This is great, thanks.

[@orozcoapaza1660]

Man those examples are amazing.... very clear...

[@uidotdev]

Thanks for watching!

[@jamespotts8372]

Excellent content. Thank you. 🙏

[@uidotdev]

Thanks for watching!

[@elgalas]

Try/catch towers of hell are also a thing. I think knowing all three patterns is a must. For example, code that is not sequential, but rather forks, might be better encapsulated inside an API, which takes callbacks for each possible fork, of course that it self has its issues, though it applies only for certain cases, but at least it helps keeping things declarative without creating special return types for every fork.

[@uidotdev]

I agree!

[@blu3_enjoy]

Fantastic work

[@uidotdev]

Thank you!

[@tomraaff4576]

First time I hear a valid argument for async/await over .then() / .catch()... Thank you!

[@uidotdev]

Glad you enjoyed it!

[@moczikgabor]

I don't know... Why don't catch errors where it occured? The gigantic catch block where all exceptions fall in, and you don't know what caused the problem never made sense to me...

[@uidotdev]

@@moczikgabor You can still use .catch on individual await calls if you want (since they return a promise).

[@moczikgabor]

@@uidotdev Ye, but what's the point then... Await takes away the async nature of the calls and blocks instead. It's not an evolved way to write code, just a possibility to avoid dealing with Promises if we don't need asynchronity. Prqctically it just turns a Promise into a function call as if it were ended with a while (!completed) continue; wait loop. If you really need asynchronity in the callee, you still have to write .then() calls.

[@moczikgabor]

...and catching the error in the Promise in the first await will not trigger a higher level try/catch block, so it will not jump out of the execution of the block and continues with the second await call. This is usually not what one wants, when the calls depend on each other. In my opinion the .then() syntax does not decrase readability making harder to follow. Rather the opposite: it clearly signifies dependency, it is seen when something will be executed in the chain, you can see that there is a dependency chain even, not just a series of function calls below each other.

[@johnmcway6120]

I'm a backend dev only learning about these amazing and powerful tools. It's pretty great

[@uidotdev]

Glad you enjoyed it!

[@mahangk2714]

amazing content

[@uidotdev]

Thank you!

[@echoo200]

You've earned a new sub.

[@uidotdev]

Welcome!

[@mohtashimali581]

keeping making this kind of videos and also try to make another kind of videos too. So that I dont get bored.

[@cmilkau]

Await is almost as powerful as continuation passing. And it's just amazing for readability, from inside it looks like a simple callback to fill the missing bits, but from outside you can use the implemented parts as if THEY were simple calls. So by this turning-a-call-into-a-hidden-return you can stitch control flows together with unprecedented freedom, while maintaining full readability and modularity.

[@uidotdev]

Great comment. Thanks for watching!

[@joshuabharathi706]

i misread 52k subs as 520k subs lol. underrated channel

[@uidotdev]

One day!

[@Lord_Vertice]

JS is very easy... until you hear about this stuff. Good thing we got this video

[@hadisiswanto1062]

ciamik om.. sip