JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue

Learn how the browser event loop, task queue, microtask queue, and Web APIs work together to enable non-blocking, asynchronous JavaScript.
- / lydiahallie
- buymeacoffee.com/lydiahallie
- / lydiahallie
- / lydia-hallie
- / theavocoder
Timestamps:
0:00 Intro
0:32 Call Stack
1:18 Single-threaded Problem
2:01 Web APIs
2:47 Callback-based APIs
4:04 Task Queue
4:39 setTimeout
6:22 Microtask Queue
8:40 Promisifying Callbacks
8:57 Challenge
10:52 Recap
11:58 Outro

[@theavocoder]

Btw if you're in a hurry you can just fast-forward to 10:52 haha! I use Apple Keynote for everything. 💡Just a heads up: I explain these concepts in a way that personally helped me conceptualize the processing order. E.g. the event loop doesn't directly "prioritize" the microtask queue, rather they're just processed and completed before the event loop continues to the next task. One iteration of the event loop is executing a single task, processing all available microtasks, and then updating the rendering of the page if needed (that's not covered in this video, might be another video, things like requestAnimationFrame). However, within your code, you'll get the sense that the microtasks are "prioritized" over the task queue-based parts.

[@sadatarefinrafat]

Gotta love you for respecting our time.

[@swaminathbera6407]

From where did you learn?

[@sourabhjana1278]

Can you please extend this more to explain NodeJS runtime 🙏

[@inowatchvideos]

Those slides are wonderful, it’s still a mystery to me how they are so good. Skills.

[@joshuafontiveros7877]

Thank you for doing this. I love the visuals you made here!

[@bilalarain4632]

i think thousands of senior developers finally understood it today.

[@DasBeatz]

🤯

[@scryptum]

fake senior developers. No theory , not a real dev!

[@KAIDO-mi1tr]

Knowing the todays reality, you wanted to say "junior" developers ? : )

[@bilalarain4632]

@@KAIDO-mi1tr haha

[@carltongordon]

Where has this channel been all my life?

[@pawanpulami6091]

Exactly I was thinking the same 😂

[@peacemurder3778]

In the future obviously. 😂

[@riccardoguitar]

She already done a longer vid for freeCodeCamp 2 years ago and she's on FrontedMasters as Teacher kzbin.info/www/bejne/rpTOeWipaLqojpY

[@theblackelephant]

Same here❤❤❤❤❤

[@pubudusenarathne]

Exactly!!

[@ryandawson1220]

I have been programming for 15 years and I don't think I have seen information presented so succinctly in that span. Thank you so much for this.

[@fadichamieh]

100%

[@jamesallen74]

I've been in software development for 16 years. This video is outstanding. Probably one of the best I've ever seen for JavaScript. Lydia, I want to encourage you to keep doing these if you desire. This visual, animated approach combined with your ability to teach is a home run. Thank you so much for doing this. I am now subscribed.

[@draco_2727]

9 years ago was this video... her video seems a rip-off kzbin.info/www/bejne/bpKqmY2HoNR5mLM&ab_channel=JSConf

[@TheNomadsTimeCapsule]

I can only agree. Especially for this topic, it was hard to find such an amazing explanation. You really helped me out. Thank you,

[@modolief]

ditto

[@Ainigma]

@Lydia Hallie Are you kidding? This level of detail, every animation, every transition, the highlighting (and temporarily hiding unimportant components) is just so good. Very well done, love it.

[@ramlaaal]

wow the visualization is awesome. The colours, gradients, design and animation. Its perfect down to the tiny details.

[@amulpatel]

it is very very rare to have material like this presented in such a visual and engaging way .. animation is hardly ever used in js tutorials. Visualization of these concepts is so important for the visual learners out there. THANK YOU. instantly subscribed.

[@thepassionatecoder5404]

God bless you Lydia. Hands down the most important and enlightening JavaScript tutorial on the KZbin that every serious JavaScript developer needs. God

[@scaly86]

The sign of mastery is being able to simply explain a complicated concept. This preso is a thing of beauty... and mastery!

[@huycaoviet8367]

I finally understand Event Loop after 1 year writing JS.

[@ericjeker]

Don't worry, many devs still don't understand it after 10 years of writing JS.

[@jonniem]

I thought I did… until today😅

[@lamhung4899]

No you do not 😂

[@chess4964]

huh do you need to understand it? coding js/ts for 3 years now

[@ahmedmaaz4390]

Okay ma'am, I noticed you only have 3 videos on your channel. Don't stop until you have at least a 20 video playlist on your channel. This is gold.

[@SaiPrakash16]

By far the most simple yet effective way to show event loop . Really enjoyed it

[@HamzaKhan-rs2yo]

The visualization is outstanding, providing one of the clearest and most informative explanations I've come across.

[@paulopontovaz]

Whoa, I'm so happy that this channel exists. The visuals help SO MUCH with understanding all the JS flow!

[@slevinstayshere]

I'm a web programmer for 15+ years now and I'm stunned how well made this explanation is. really Amazing! Subscribed right away!

[@leepaulison4928]

Lydia, your teaching style is the best I've seen. Please continue to educate us.

[@viatrixhd]

I have been programming for some years now, as a visual learner this video was awesome. Perfectly visualized and straight to the point! Keep up the great work

[@flnnx]

I'm preparing for an interview and this helps a lot. The promises video and this one are simply incredible. Love the series.

[@jackwright517]

Whoaaaa... Ive been writing js for years and this is hands down the BEST event loop video resource ive ever seen. My god its presented so simply! 💯

[@gabriellinassi3382]

Thank you, Lydia. You explain very well. After 3 years writing JS, I'm finally taking the time to go back to the basics and learn the fundamentals and I'm learning a lot

[@TC14]

Top tier presentation, this is easily one of the best visualizations I've seen on KZbin. You clearly have excellent teaching and communication skills. I know you are focusing your content on JavaScript but if you were ever interested in giving us an overview of some of your presentation techniques in Apple Keynote, I think many viewers could greatly benefit from it. Keep up the awesome content! I can't wait to see what videos you have in store for this channel.

[@aGoodOmen]

I am in awe of the explanation and the masterful use of Keynote. Great stuff. Congrats!

[@meetfilipe_]

I can't imagine the amount of work you put in to explain something so complex put so simply

[@forkanshanto2228]

This video brilliantly illustrates the intricate workings of JavaScript's Event Loop, Web APIs, and (Micro)task Queue. The visuals make complex concepts crystal clear, making it easier to grasp how JavaScript manages asynchronous tasks behind the scenes. Kudos to the creators.

[@mohitkarki7185]

I think this is the best event loop explanation in the internet. You have described each and every point in such detailed way, making this topic feel so simple to understand. The animation is also made with such detail, making life easier.

[@DesignsbyBlanc]

Never thought I grab some popcorn🍿 to learn about the inner workings of JavaScript, yet here I am. Awesome work!

[@MagnumCarta]

10 / 10 quality. The explanation of the different queues helped clear up confusion I had in the background of how asynchronous tasks work underneath the hood in the context of Javascript. Even with a bachelor's degree in computer science it was still a pretty head scratching concept thinking "how does the engine know what is I/O blocking and what is not? How does it handle that?". I would always hear "oh its just on the event loop! Its just on the event loop!" but I'd be like "all these diagrams suggest the blocking and non-blocking are on the same queue". I had no idea about the microtask queue and that is where fetch's then calls are appended to. Also I can't help but look at the word "event loop" and just think of Froot Loops.

[@TheDogn]

I've never seen this information provided with such uncompromising clarity. Subbed. This is the first video I've seen of yours, but if the rest are anything like this one, you're worth it. Amazing.

[@JoysterRodrigues7]

The presentation quality is top-notch! This is probably the best JS "under-the-hood" explainer out there

[@mvkotekar]

Where was this channel all this time. Great visualization. Thanks for all the handwork to put across all the details together.

[@v14mpo-fw5sd]

Excelent video all around. Visuals, audio quality, the pace and the clarity with which you speak are superb. Thanks!

[@nelsonelijah5327]

This is phenomenal. I just started learning javascript coming from an Embedded systems background and never understood how the execution of commands happened. This cleared a year of misconceptions for me and unprecedented years of troubles. Wow! Some people are just goated!

[@EbrahimTahernejad]

I already knew all these but still watched it because of the quality of your presentation. Great work. Keep doing what you're doing.

[@user-so4kv5oo5d]

Lydia, I want to encourage you to keep doing these if you desire. This visual, animated approach combined with your ability to teach is a home run.

[@t.k.raphaelngan6002]

Glad to be more clear about async stuff. Before just confused with the sequence and did not know why. Not even heard terms of promise based and callback based and their respectively being thrown to microtask queue and general task queue. Thanks 👏

[@ylaguardia]

Congrats on this video. I've read a lot about this topic... articles, tweets, book passages. I've seen videos and talks about this. None of them were so thorough, clear and enlightening as this one. Keep up with the outstanding work!

[@geoffreymoluba7448]

It's so well explained that after 1minutes 27 seconds of watching I had to subscribe. This is pure quality content

[@sebas_xs]

Your explanations are crystal clear and your slides are absolutely stunning! You have a real talent for breaking down complex topics in such an engaging way. Keep up the fantastic work, you're making learning an absolute pleasure!

[@marianopainefil3537]

Este video es INCREIBLE. Completamente deberia ser un MUST en cualquier capacitación/universidad. Millones de gracias!

[@erick2051]

Lydia, your explanation is by far the clearest i've seen out there. I'd love to watch something similar for async-await!

[@Isaac-hd6vs]

Hands down, the best event loop explanation ever!

[@snoopy8870]

Thank you for detailed , visualised explanation Lydia!!!

[@teleprint-me]

This video showcases a true understanding of the web api and the javascript event system resulting in a extremely high quality presentation.

[@Fernando-du5uj]

Love all those illustrations. It really helps to understand the concepts. Thank you for everything you've done. Keep going! 👍

[@DontFollowZim]

I've already learned all this, but this is the probably the clearest, best, and most beautiful explanation I've seen. I need to share this...

[@CrusaderMen]

Thank you. This is the best explanation I've seen.

[@ilonakhomenko3797]

This video is absolutely amazing! Very clear and straight to the point. I often struggle with understanding JS, and I found this video incredibly helpful. Thanks, Lydia! Looking forward for your new videos 👍

[@suenkaiching1580]

Thank you! This is absolutely the best explanation I have ever seen. 12 mins of video cleared out all the my confusions I had in event loop from day 1!!

[@IceBreakerGamer]

This channel is a gold mine... literally.. please post more.

[@hoangduy500]

This channel is a precious gem! Thank you, Lydia. I know it takes a lot of effort, but I hope you could make more videos with excellent visual explanations like this.

[@vikramtatke5930]

This is absolute gold! So glad KZbin recommended this video. Lydia, it is amazing to see the effort you've put into creating these slides. I subscribed in the first 60 seconds. This is how the universities should have taught us! Kudos! Looking forward to your next one!

[@ShredNekM80]

The presentation and clarity of this information is excellent! Thank you for making this video. It made understanding the Event Loop so much easier!

[@marcinkossowski6579]

this channel and fireship, kevin powell and web dev simplified is all a dev needs these days. Amazing job, keep it coming!

[@MrFamboYT]

Super sold on the animations and slides. Ton's of work and dedication can be seen. Super awesome.

[@4733R70]

wow! the animations are crazy and helped me so much to understand what's going on behind the scenes! you also have a beautiful voice, it's so soothing!

[@RemigiuszDudek]

beautiful and simple, Lydia great work. Thank you!

[@ashuvssut]

No BS just pure content! True GEM!! Subscribed right away at 4:22 These small concepts took me a long time to grasp while working with JS over the years

[@nemethricsi]

Lydia, this is the best explanation I’ve ever heard about this topic ❤ thank you!

[@eyeiaye]

You've broken this down so simply that I'm surprised this isn't the standard model for teaching this. I don't deal with js a ton so you've helped explain behaviors I had witnessed but never fully understood, thank you!

[@TheZenJin]

Just wow! This is pants down the best Tutorial-Style-Vid I have ever seen. Please keep it up, I love it!

[@ssygon2]

Nice visual explanation of the types of stack n queues used for each call and the event loop lifecycle.

[@SanketBhat7]

So far the best explanation of how Java script works. Thanks

[@uncle.boonmee]

this is very difficult to me, but your explanation was perfect. you're a great instructor and the presentation is beautiful!

[@miguelbautista3628]

The slides really made it click, keep sticking to that way of teaching, that was great

[@warta312]

Hope you keep doing this great job. This is one of the best explanations I've seen in the last few months.

[@TaekwondoGer]

I am so glad that you keep on doing these videos. They are more than just awesome!

[@AntonioLettieri]

Best example of a task queue I have seen in a very long time.

[@cusematt23]

I've seen 2-3 of Lydia's videos over the years (not sure if they are all of this channel) and they really are just phenomenally well-organized and delivered. I always learn a ton even though I have sadly watched a large proportion of JavaScript KZbin and one might think I have seen everything. Well done Lydia! Hope to see more in the future.

[@Henrique01010]

Love this illustrations, gets really easy for any beginner to follow along with you explanation

[@jojodi]

This was fantastically produced. Thanks for the clear explanation and visualization!

[@eestidev]

only 2 videos, and you are still killing it. Amazing content!

[@hellcat8886]

Pls, don't stop making videos like this, it's really enlightening!❤

[@vasudevkoneru]

A brilliant explainer. Just what I was looking for coming from a Java ecosystem. Visuals are stunning. Thank you ma'am!

[@kaipang-whitsett2379]

This is the type of visualization that coding vids need

[@AndrewTSq]

it reminds me of debuggers we used to have in the late 80ies

[@fadichamieh]

Simply Great illustration of a seemingly simple yet inherently complex topic: JavaScript tasks and async / promise execution

[@sylensdrake9706]

This is by far the best explanation for the event loop ive ever seen. This is going out to the rest of my team. Great job. U got my sub

[@LIZzARDsTeam]

Amazing presentation style, very nice and smooth animations, clear explenations and ended with a tricky question to make sure people understand the topic. This truly must be the best way to learn. Thank you for the video.

[@noorulamin2652]

Thank you! 💌 This is hands down the best explanation I've come across.

[@MM-ts9jy]

I must say, this is the best visual representation of JS I've seen so far

[@zackanderson6084]

Amazing explanations, and I love the reiterative approach of the ideas and concepts!!

[@joaquinarlettaz]

What an amazing work! Apprecciate very much that level of details, animations & explanations, so clear, loved it. Thanks lyd!

[@valde_ua]

It's brilliant explanation. Visualization is on a high level, perhaps the best one I have ever seen. Thanks!

[@GUYX10]

One of the best explainer videos I've ever seen, thank you! Subbed

[@DannyCallaghan]

A better video or explanation of the JavaScript event loop than this does not exist. An outstanding video.

[@riccardoguitar]

Always her 2 years ago for freeCodeCamp kzbin.info/www/bejne/rpTOeWipaLqojpY

[@gustavokobayashi2738]

Extraordinary graphics, not to mention the content quality. Congratulations and keep up with the great work

[@theseus_dev]

Absolutely loved your course on Frontend Masters! Super excited about your new KZbin channel and can't wait for your upcoming videos. By the way, hands down, your lectures and the way you explained this topic is the best I've seen.

[@zlatanonkovic2424]

Extremely well structured! The quiz in the end was a great idea

[@sauravbond]

One of the best video I have seen related to event loop, visualization is top notch

[@prasadhonrao]

I seriously need to think of my presentation skills. Well done ma'am. You got a new subscriber.

[@pryansh_]

I were to make notes on my notion for this.. but adding just the youtube link.. Best explanation on entire Internet by a great margin. Subscribed !

[@danielwilkowski5899]

I can't believe, there is literally not one incorrect word here. Amazing.

[@lmarts]

Wow! I'm surprised at how well the JavaScript asynchronous lifecycle is explained in this video. The best of its kind bar none.

[@noozytechz]

What you've done is mind-blowing, ma'am.

[@Cangussu97]

Absolutely incredible explanation and visualisation. Thank you!!

[@asdfz0mg]

Amazing visualizations and well explained! Truly a worthy successor to Philip Roberts talk from JSConf EU 2014.

[@haraseesgill8491]

This is a really great resource for learning the importance of the event loop. This is the perfect medium between deep technical understanding and practical application of the event loop and Javascript as a whole. Even though I knew all of this, I found it refreshing relearning with the way you organized information, and I even forgot about the Microservice queue so that cleared up some of my async JavaScript understanding. This was an awesome watch! Looking forward to your future explanations/animations. Please keep it up 😁

[@abcdabcd8605]

Amazing explanation on Event Loop. 100% would recommend to anyone who wants to learn about Event Loop.

[@Hlfe0]

That is some high quality stuff. High quality video, high quality slides, and high quality knowledge. I think you’re on the way to becoming one of my favorite channels 🤛🏼👏🏼,, Keep up the amazing work.

[@shokhbozabdullayev6260]

This was so well structured visualization and I was able to find the answer for the quiz correctly and I have become sure that the confusion around Event Loop/Callback/(Micro)TaskQueue do not bother me anymore. Thanks @theavocoder )