JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue
Vložit
- čas přidán 1. 06. 2024
- 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
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.
Gotta love you for respecting our time.
From where did you learn?
Can you please extend this more to explain NodeJS runtime 🙏
Those slides are wonderful, it’s still a mystery to me how they are so good. Skills.
Thank you for doing this. I love the visuals you made here!
i think thousands of senior developers finally understood it today.
🤯
fake senior developers. No theory , not a real dev!
Knowing the todays reality, you wanted to say "junior" developers ? : )
@@KAIDO-mi1tr haha
now adays, senior and junior have similar salary, so whats the difference
Where has this channel been all my life?
Exactly I was thinking the same 😂
In the future obviously. 😂
She already done a longer vid for freeCodeCamp 2 years ago and she's on FrontedMasters as Teacher
czcams.com/video/xckH5s3UuX4/video.html
Same here❤❤❤❤❤
Exactly!!
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.
100%
Absolutely 🤟
This video should receive the Oscar for best animation
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.
9 years ago was this video... her video seems a rip-off
czcams.com/video/8aGhZQkoFbQ/video.html&ab_channel=JSConf
I can only agree. Especially for this topic, it was hard to find such an amazing explanation. You really helped me out. Thank you,
ditto
@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.
If anyone had a question in the Challenge section as to why console.log(1) didn't execute immediately, even though it was in the Microtask Queue and the Call Stack was empty, read on.
All the code on the left is a script and can be represented as an anonymous function. At the very beginning of the "Challenge" section in the Call Stack, there should have been an "anonymous" block. This block starts executing (the script is being executed), and then everything is the same as in the video, except that the "anonymous" block is always at the bottom of the Call Stack. The "anonymous" block disappears from the Call Stack after console.log(5) is executed, because it is the last operation in the script.
And so when the "anonymous" block disappears from the Call Stack, Microtask Queue and Task Queue processing starts (10:04).
Great video!
Thank you. Absolutely wondered this.
Yep, the anonymous block is referred to as Global Execution Context
The best visualisation of the JS runtime I've ever seen! Respect Lydia!
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.
wow the visualization is awesome. The colours, gradients, design and animation. Its perfect down to the tiny details.
4 months ago, I learned event loop from your dev.to post titled JavaScript Visualized: Event Loop - which is the best visualised minimalistic explanation I have come across, and then to refresh it, I watched this video you recently posted.
Thank you Lydia Hallie.
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.
This is the type of visualization that coding vids need
it reminds me of debuggers we used to have in the late 80ies
I finally understand Event Loop after 1 year writing JS.
Don't worry, many devs still don't understand it after 10 years of writing JS.
I thought I did… until today😅
No you do not 😂
huh do you need to understand it? coding js/ts for 3 years now
Then you're a shit developer tbh
Ridiculously simple when you explain it. You just got new subscriber !
Your presentation is absolute the best event loop explanation I ever saw. Thank you and congratulations in doing such amazing work to help other people.
Top tier presentation, this is easily one of the best visualizations I've seen on CZcams. 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.
The sign of mastery is being able to simply explain a complicated concept. This preso is a thing of beauty... and mastery!
One of the best video on event loop, till now on youtube, words are not enough to appreciate it... really... thank you...
12 min just recalled my last 2 years ❤🎉
I'm a web programmer for 15+ years now and I'm stunned how well made this explanation is. really Amazing! Subscribed right away!
Hands down, the best event loop explanation ever!
Amazing. I'm a visual learner, and it was a pleasure to watch and learn. Thank you for the content. 👏🏻👏🏻👏🏻
That's a really good way to explain something which can be complex trying to understand it without the visualization! Thanks alot for sharing this gold content!
The visualization is outstanding, providing one of the clearest and most informative explanations I've come across.
Thank you.
This is the best explanation I've seen.
Whoa, I'm so happy that this channel exists. The visuals help SO MUCH with understanding all the JS flow!
Amazing visual explanation! Thank you!
Lydia, your teaching style is the best I've seen. Please continue to educate us.
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.
Amazingly simple explaniation and satisfying graphics! Really thankful for this video. Keep it up!
New Knowledge Gold Mine ALERT!!!!!!!!!!!
Fantastic work Lydia, thank you so much for this video. I'll be one of your subscriber for the entire of your youtube journey.
Keep teaching using such mind blowing visuals which are sooo helpful in understanding the concepts.
Thanks you again.
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! 💯
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.
Just jamming here... being C++ developer for 30 years, reading all these comments about seniors and juniors...I wonder: Guys have you ever read a text book about your profession?
Nice video btw!
The world cheers for splashy things and call themselves a "coder" and then cry that AI will take the job. The traditional way is long gone where we used to read the books, make our own interpretation and test our understanding by hands-on coding.
But, a good explanation in the video. no doubt.
One of the best explainer videos I've ever seen, thank you! Subbed
Fucking hell Lydia, this is incredible
Ah thank you Matt! 🙏
Best possible explanation out there for understanding event loop concept in JS. Thanks for the video.
very clean and beautiful presentation
Are you Ai? This seems too perfect
*too (This has been your ai powered nostalgia post troll, have a nice day.)
Mam can you make a video on how exactly the react works under the hood ?
This is the best topic
These videos are extremely well presented!
I have no words. I’ve never seen a coding, programming or any kind of software dev video this well laid out! Your visuals and your ability to “talk shop” are both incredible. If you sell a course, I’d buy it immediately.
This is excellent work, Lydia! Your visualization of the event loop definitely can help millions of JS engineers understand it better. Huge impact, congratulations!
This channel is a gold mine, thanks for sharing it, this is amazing
You just got yourself a new subscriber! I actually watched a video about all these a few days ago and I kinda understood how it all works but this video is the icing on the cake, I now perfectly understand how it all works and it's all thanks to the beautiful visualizations you used and your straightforward explanation. This video is a goldmine ✅
beautiful and simple, Lydia great work. Thank you!
You made it easy for me to understand the sequence of execution between the microtask queue and task queue. Thank you!
I'm preparing for an interview and this helps a lot. The promises video and this one are simply incredible. Love the series.
Absolutely incredible explanation and visualisation. Thank you!!
Never thought I grab some popcorn🍿 to learn about the inner workings of JavaScript, yet here I am. Awesome work!
What you've done is mind-blowing, ma'am.
Okay it doesn’t look like me to just stupidly show appreciation, but this video is straight up great
By far the most simple yet effective way to show event loop . Really enjoyed it
I really loved this video!! Amazing explanation! Thanks!!
I am in awe of the explanation and the masterful use of Keynote. Great stuff. Congrats!
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.
This crazy visualisation 🔥
Super easy, super fun 😮
One of the best video ever that explains concepts this clear. 🙌
Best video ive seen on this subject. The visuals help a lot!
Excellent visual explanation
This presentation is crazy good. I can only imagine the amount of work put into it. Congratulations.
This was absolutely amazing!! The way you broke down callbacks from methods, visuals to see what’s happening. Best of all a challenge to really help drive the subject home, best way to improve learning. I can’t wait for more to come from you and THANK YOU!
I didn't know this was possible but this video is JavaScript meets Absolute Cinema
So far the best explanation of how Java script works. Thanks
Thank you for all the efforts with the graphics!.. very well explained!! 👍👍
Best event look explanation video I’ve seen
Awesome work! ❤
Amazing explanation! Thanks for sharing this.
Well explained with smooth & meaningful animation.
Awesome 👏👍
This channel is a gold mine... literally.. please post more.
Amazing explanations, and I love the reiterative approach of the ideas and concepts!!
Well done! the best way to understand these concepts is with a visual explanation. Keep it up! 🔥
one of the best video on javascript visulization.
thank you lydia Hallie.
Make more videos like this.
Awesome explanation! Thank you!😊
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!!
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
The best explanation and visualisation! Kudos!
Instant subscription!
Where was this video when I was doing interviews 2 months ago 😆
An incredible video, really useful and clear. Thank you and well done 👏
Thanks! A well put together explanation.
Lydia, your explanation is by far the clearest i've seen out there. I'd love to watch something similar for async-await!
Pls, don't stop making videos like this, it's really enlightening!❤
이런 시각화 자료를 통해서 공부를 하게 되니 이해가 쉽게 됩니다. 감사합니다.
Simply Amazing, this content is gold 🙌!!!
I already knew all these but still watched it because of the quality of your presentation.
Great work.
Keep doing what you're doing.
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!
The explanation is awesome, thank you
Absolutely fantastic video
this single video has taught me more about js under the hood then months of watching other videos
Simply Great illustration of a seemingly simple yet inherently complex topic: JavaScript tasks and async / promise execution
This is simply amazing 🤩. Learned a lot today
Hope you keep doing this great job. This is one of the best explanations I've seen in the last few months.
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
This video showcases a true understanding of the web api and the javascript event system resulting in a extremely high quality presentation.
The presentation and clarity of this information is excellent! Thank you for making this video. It made understanding the Event Loop so much easier!
this is the best ever explanation i've ever seen... Thank you for this amazing video
Magnificent Video...!!! I will share this video to all my Front End developers and my junior developers. It will give them a clear understanding of events and callbacks. Im convinced to subscribe to your channel.
Lydia, this is the best explanation I’ve ever heard about this topic ❤ thank you!
Bro you are amazingly explaining. Like the animation.
The presentation quality is top-notch! This is probably the best JS "under-the-hood" explainer out there