NGNTJS - part 4
In the previous part 3 and data storing.
In this part, we will consider the libUV library, as well as get acquainted with the operation of event-loop.
[Image taken from the following NodeCongress23 talk]
Now we know that JavaScript is a single-threaded language, where a thread "opens" an execution context (Global EC and, if necessary, Function ECs as well), which hoists its primitives and referenced data on the stack and heap respectively.
In addition, we also know that JavaScript is a synchronous language, it means the execution is performed by passing each command by blocking them.
However, as we know, apart from JavaScript engine, there are other components as wall that ensure the implementation of asynchronous operations.
There are some "bridges" (Web APIs) between the JavaScript and the async support part so that it is possible to pass data from one to the other to perform certain async operations.
Often the commands used to perform these asynchronous operations are confusing, and sometimes some people think they are part of JavaScript, but they are Web APIs (for example implemented for the browser) to perform these asynchronous, non-blocking operations and send back responses.
There are quite a few Web APIs that use the event-loop mechanism to handle asynchronous operations in the browser. The list of Web APIs is constantly expanding and changing over the time as new technologies are developed and adopted, however below are some of the most common ones:
- setTimeout
- setInterval
- fetch
- requestAnimationFrame
- addEventListener
- geolocation API
- WebSockets
- Web Workers
- IndexedDB
- FileReader API
- WebRTC
- Web Audio API
- Service Worker API
- Notification API
- MediaDevices.getUserMedia()
- Intersection Observer API
- Resize Observer API
- Mutation Observer API
- …
[https://github.com/libuv/libuv#readme]
libUV (UV = Unicorn Velociraptor) is an open source and cross-platform library written in C, mainly for asynchronous I/O operations. It was originally written for Node.js (used in other environments as well) to support async operations and provide non-blocking execution. thread-pool, event-loop and other mechanisms are used here for doing that.
event-loop works both in the browser environment and in the Node.js runtime, and their work has a certain commonality for both of them.
However, one of the main differences between event-loop mechanism in Node.js and browsers (we can consider the Chrome browser as an example, as the V8 engine is implemented there and in Node.js as well) is that in browsers the event-loop works in the same thread where the browser UI works, while in Node.js the event-loop works in a separate thread.
In general, although there are differences between the event-loop mechanisms of Node.js and browsers, they both serve the same purpose of allowing non-blocking, asynchronous operations.
There is an interesting conference-talk on YouTube, where the speaker talks about the event-loop in browsers, where you can see and understand the browser part of event-loop quite clearly through examples.
[The video conference was back in 2014, but I think it's worth posting as a pretty successful talk]
In order not to get a repetition here, or a mere translation, I think we can consider the information provided on that video as a part of event-loop topic (in browsers).
But just to save time, here are some important key-parts where event-loop is graphically presented in the browser:
[example using call stack without event-loop (sync operations)]
[example of using event-loop using setTimeout() timer-type Web API]
The speaker has provided other examples that can be implemented using latentflip/loupe. Another link to the similar tool at CodeSandbox.
While writing this series of articles, I have studied the materials produced by various authors on the topic, where some visuals about event-loop are found, such as:
Event Loop and the Big Picture - NodeJS Event Loop Part 1 [Apr, 2017]
The JavaScript Event Loop: Explained [Apr, 2021]
Event Loop in NodeJS - Visualized [Nov, 2021]
What you should know to really understand the Node.js Event Loop [Jul, 2017]
Synchronous vs Asynchronous JavaScript - Call Stack, Promises, and More [Sep, 2021]
NodeConf EU | A deep dive into libuv - Saul Ibarra Coretge [Nov, 2016]
Node.js Tutorial - 42 - Event Loop [Jan, 2023]
Pictures with such visuals can be found in many places. Although at first glance these are different from each other, in fact their logic is the same: to show the workflow of the event-loop. As a more suitable image (according to subjective circumstances) in the next part we will use an image similar to the last visual.
event-loop is one of the features of libUV library written in C, but not the only one. In general, this is a mechanism whose task is to manage JavaScript asynchronous operations. In addition to libUV, in the modern tech world there are few other software which implementing the idea of event-loop. For example, Deno created by the same Node.js creator Ryan Dahl, uses another asynchronous event-driven platform called Tokio written in Rust, instead of libUV written in C.
Deno, as well as other modern alternatives, will be discussed in more detail in part 7.
In this part of the series of NGNTJS articles, we looked at the libUV library, got acquainted with the operation of the event-loop mechanism.
Next, in part 5 we will have some idea about thread pool, and for that we will have a practical example from real life.
If you liked this article, feel free to follow me here. 😇
To explore projects working with various modern technologies, you can follow me on GitHub, where I actively publicize much of my work.
For more information, you can visit my website: https://boolfalse.com/
Top comments (0)