#EventLoop — Bluesky Posts

@alaxhenry0121.bsky.social

4 days ago

Dart Has No Threads. So How Does Flutter Handle Concurrency — and Why Do Interviews Go There? Isolates, the Event Loop, Microtask Queue, async/await, and compute() — the full concurrency model that most Flutter developers use daily…

I just published Dart Has No Threads.
So How Does Flutter Handle Concurrency — and Why Do Interviews Go There? medium.com/p/dart-has-n...
#Flutter #Dart #FlutterDev #DartIsolate #AsyncAwait #EventLoop #FlutterInterview #DartAsync #Concurrency #MobileDevelopment #DartStream #FlutterPerformance

1 0 0 0

Frontend Dogma

@frontenddogma.com

3 months ago

End-to-end browser and accessibility event architecture - Max Design This article maps that entire path and shows how user input, JavaScript, layout, accessibility events, and assistive technology output move through the browser in sequence

End-to-End Browser and Accessibility Event Architecture, by (not on Mastodon or Bluesky):

www.maxdesign.com.au/articles/end-to-end-even...

#accessibility #browsers #eventloop #browserengines #javascriptengines

0 0 0 0

Saravanan

@saravanan.dev

4 months ago

What the heck is the event loop anyway? | Philip Roberts | JSConf EU YouTube video by JSConf

A very important explainer on the JavaScript Event Loop. It clarifies the async nature of JS in a simple, visually understandable way. Huge thanks to Philip Roberts for this gem.

An 11-year-old treasure that's still perfectly relevant.

www.youtube.com/watch?v=8aGh...
#JS #EventLoop #WebDevelopment

3 0 0 0

Frontend Dogma

@frontenddogma.com

5 months ago

Instrumenting the Node.js event loop with eBPF Recently, I was testing Coroot’s AI Root Cause Analysis on failure scenarios from the OpenTelemetry demo. One of them, loadgeneratorFloodHomepage, simulates a flood of excessive requests. As expected, it caused a latency degradation across the stack. Coroot’s RCA highlighted how the latency casca…

Instrumenting the Node.js Event Loop With eBPF, by @coroot@mastodon.social:

coroot.com/blog/instrumenting-the-n...

#nodejs #eventloop #events

2 1 0 0

javascript-job-alert

@javascript-job-alert.activitypub.awakari.com.ap.brid.gy

7 months ago

Async in JavaScript, Served Hot: The Chef’s guide to the Event Loop What is the JavaScript Event Loop? The event loop is a mechanism provided by the JavaScript...

Async in JavaScript, Served Hot: The Chef’s guide to the Event Loop What is the JavaScript Event Loop? The event loop is a mechanism provided by the JavaScript environment (like your browser or N...

#javascript #programming #eventloop

Origin | Interest | Match

1 0 0 0

Jay

@jay52-tx.bsky.social

7 months ago

Tidbit 01: How Does Event Loop Handle Promises? Ever Thought? Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.

Tidbit 01: How Does #EventLoop Handle Promises? Ever Thought? || #JavaScript #WebDev #Coding bit.ly/3UiIw3j

1 0 0 0

Yohann Ciurlik

@yohann.ciurlik.fr

9 months ago

hromium.com - Event Loop Visualized Understand the JavaScript Event Loop with visual explanations! Learn how the Call Stack, Web API, Microtasks, and Macrotasks work together to handle asynchronous operations. Interactive models include...

JavaScript Event Loop Visualized – The Ultimate Interactive Guide - hromium.com/javascript-v... #JavaScript #EventLoop #Dev #WebDev

0 0 0 0

Forem

@forem.com.web.brid.gy

11 months ago

Understanding the Event Loop: The Heart of Asynchronous JavaScript ## 📋 Table of Contents 1. Introduction 2. Step-by-Step Explanation of the JavaScript Event Loop Execution 3. Data Structures: Call Stack and Event Queue 4. Key Takeaways 🔗 **Live Demo** : Click Here 🎥 **Demo Video** : ## Introduction JavaScript is a **single-threaded** language, meaning it can only execute one task at a time on the main thread. However, this doesn't mean JavaScript can't handle multiple tasks simultaneously. The key to understanding this behavior lies in the **Event Loop**. The Event Loop allows JavaScript to perform asynchronous operations, such as waiting for a network request or timer, without blocking the main thread. By offloading tasks to be executed later, JavaScript creates the illusion of parallel execution while still maintaining its single-threaded nature. In this article, we’ll take a closer look at how the Event Loop manages both **synchronous** and **asynchronous** tasks. We’ll walk through how JavaScript handles operations, manages callbacks, and uses the Event Loop to ensure that asynchronous tasks don't block the execution of synchronous code. To help visualize this process, we provide a **series of visualizations** that illustrate each step of how JavaScript handles tasks. These visualizations are based on a specific code example, which is shown throughout the images to simplify the explanation. Each visualization is accompanied by a **description** to clarify what's happening at each step. This approach helps us see how tasks move through the **Call Stack** , the **Event Queue** , and how the **Event Loop** orchestrates everything. ## Data Structures: Call Stack and Event Queue In this article, we’ll also briefly touch on the two main data structures that help JavaScript manage synchronous and asynchronous tasks: 🍽️🍽️🍽️ **Call Stack** : The _Call Stack_ is where JavaScript keeps track of **synchronous** functions that are executing. It works like a stack of plates in the kitchen sink — as each plate gets added, it’s placed on top of the stack. When the sink gets full, the plate that is **added last is the first to be removed**. Similarly, when a function is called, it’s added on top of the stack, and once it finishes executing, it’s removed from the top. ☕🚶‍♂️🚶‍♀️ **Event Queue** : The _Event Queue_ holds **asynchronous** tasks waiting to be processed. It works like a line at a coffee shop. The first person in line is the first to get coffee, meaning the **first task added in the queue will be the first one to be processed** once the _Call Stack_ is clear. ## Step-by-Step Explanation of the JavaScript Event Loop Execution For better visualization, all synchronous execution contexts are pushed onto the call stack, ready to be executed. 🚀 `console.log('Start');` is executed immediately, producing `"Start"` as output. ⏸️ The _Event Loop_ is **paused** while synchronous code runs in the main thread. ⏳ The `setTimeout(() => { zeroSecondsLater(); }, 0);` function is **asynchronous**. 🔄 The JavaScript engine **delegates** it to the _Browser API_. 📩 Since the delay is 0ms, the _Browser API_ processes the request immediately and moves the `zeroSecondsLater callback` to the _Event Queue_. 🔄 `setTimeout(() => { console.log('3 seconds later'); }, 3000);` is **delegated** to the _Browser API_ , which starts a 3-second timer. ⏳ Similarly, `setTimeout(() => { console.log('4 seconds later'); }, 4000);` is **delegated** to the _Browser API_ , which starts a 4-second timer. ⏩ Meanwhile, **synchronous code continues executing in the main thread without waiting for these timers**. 🛑 Important: The **Call Stack executes only synchronous functions** and must complete all synchronous tasks before handling anything else. The _Event Loop_ does not move callbacks from the _Event Queue_ to the _Call Stack_ until all synchronous code has finished executing. 🚀 `console.log('End');` is executed immediately, producing `"End"` as output. 👀 At this point, the _Call Stack_ is empty, **signaling** the _Event Loop_ to check the event queue. 🎧 The _Event Loop_ waits for the _Call Stack_ to become empty and then moves the **first** callback from the _Event Queue_ to the _Call Stack_ for execution. 🔁 The `zeroSecondsLater();` callback is moved from the event queue to the call stack. 📩 The _Browser API_ completes the 3-second timer and moves `console.log('3 seconds later');` to the _Event Queue_. 📩 One more second has passed so the _Browser API_ moves `console.log('4 seconds later');` to the _Event Queue_ , placing it after the `console.log('3 seconds later');` callback. 🔄 The `zeroSecondsLater();` callback invokes `oneSecondLater();`. 🔄 `oneSecondLater();` invokes `console.log`. 💬 `"1 second later"` is printed in the console. 🔄 Then, `zeroSecondsLater();` invokes `twoSecondsLater();`. 🔄 `twoSecondsLater();` invokes `console.log`. 💬 `"2 seconds later"` is printed in the console. All the synchronous code has been executed and the callback function `zeroSecondsLater()` completes its execution. At this point, the _Call Stack_ becomes empty, signaling the _Event Loop_ to begin processing callbacks from the _Event Queue_. 👀 The _Event Loop_ moves `console.log('3 seconds later');` from the _Event Queue_ to the _Call Stack_. 🚀 The function executes, producing `"3 seconds later"` in the console. 👀 Again, the _Call Stack_ is empty, allowing the _Event Loop_ to move `console.log('4 seconds later');` from the _Event Queue_ to the _Call Stack_. 🚀 The function executes, producing `"4 seconds later"` in the console. ## Key Takeaways ✅ **Only synchronous code is executed in the Call Stack** (Execution Stack) on the **main thread**. The _Event Loop_ does not move callbacks from the _Event Queue_ to the _Call Stack_ until all synchronous code has finished executing ✅ Asynchronous functions (e.g., setTimeout) are **delegated** to the _Browser API_ , which processes them in **parallel** while synchronous code continues. ✅ Callbacks enter the _Event Queue_ based on when they were **processed** by the _Browser API_ , not necessarily in the order they were requested. ✅ The _Event Loop_ waits for the _Call Stack_ to be **empty** before moving a callback from the _Event Queue_ to the _Call Stack_. Thank you for reading! I would be grateful to understand your opinion.

0 0 0 0

Isaac

@isaac-ai.bsky.social

1 year ago

Node.js: "I'm single-threaded, I swear!" 🤥 *insert Pinocchio meme*
...Proceeds to block the event loop. 🤦
Lesson: Asynchronous code FTW! 🚀 #NodeJS #JavaScript #EventLoop

2 0 0 0

CosmicCookie 🪐🍪

@cosmiccookieit.bsky.social

1 year ago

Technical Interview Questions - Part 5 - Event Loop Introduction Hello, everybody! Today, as the title says 😉, I’ll be talking about the event...

Hello!! 😀

Excited to share a new post: The Event Loop 🔄 🚀

dev.to/giulianaolmo...

I explain how it works with examples + an interactive page to test functions and see it in action! 💻✨

#TechInterviews #EventLoop #JavaScript #InteractiveLearning

6 0 2 0

CosmicCookie 🪐🍪

@cosmiccookieit.bsky.social

1 year ago

A comment that says "Great insights on the event loop working. Love the detailed examples and the visual representation. Keep writing."

This is the best part of writing for my blog.
The comments from the community. 💖

#Javascript #eventLoop #development #blog #softwaredevelopment #devs

5 0 0 0

Jalin Rabei

@pintodomeupai.bsky.social

1 year ago

#javascript #react #eventloop #frontend

2 0 0 0

Mathieu Laurent

@echec-et-matt.bsky.social

7 years ago

What the heck is the event loop anyway? | Philip Roberts | JSConf EU JavaScript programmers like to use words like, “event-loop”, “non-blocking”, “callback”, “asynchronous”, “single-threaded” and “concurrency”. We say things like “don’t block the event loop”, “make sure your code runs at 60 frames-per-second”, “well of course, it won’t work, that function is an asynchronous callback!” If you’re anything like me, you nod and agree, as if it’s all obvious, even though you don’t actually know what the words mean; and yet, finding good explanations of how JavaScript actually works isn’t all that easy, so let’s learn! With some handy visualisations, and fun hacks, let’s get an intuitive understanding of what happens when JavaScript runs. Transcript: http://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html License: For reuse of this video under a more permissive license please get in touch with us. The speakers retain the copyright for their performances.

"Philip Roberts: Boucle d’événement, que diable est ce au fait?" (English video#javascript #eventloop #asynchronous

youtu.be/8aGhZQkoFbQ

0 0 0 0

Mathieu Laurent

@echec-et-matt.bsky.social

7 years ago