DEV Community: Nguyen Dinh Khai

How the Event Loop Handles Microtasks and Macrotasks

Nguyen Dinh Khai — Sun, 15 Sep 2024 13:36:15 +0000

In JavaScript, microtasks and macrotasks are two types of asynchronous tasks that the event loop manages, but they are handled in different ways. Understanding how they work is crucial for predicting the execution order of asynchronous code.

1. Macrotask Queue (Task Queue)

Macrotasks are placed into their own queue, often referred to as the task queue or macrotask queue.
Examples of macrotasks include: setTimeout, setInterval, I/O events, and DOM events (like click and load).
The event loop takes each macrotask from this queue to execute, but only after all microtasks in the microtask queue have been processed.

2. Microtask Queue

Microtasks have their own queue called the microtask queue.
Examples of microtasks include: .then() of Promise, MutationObserver.
The microtask queue has a higher priority than the macrotask queue. After each macrotask is executed, the event loop will process all the microtasks in this queue before moving on to the next macrotask.

How the Event Loop Handles Microtasks and Macrotasks:

Event Loop starts a new cycle.
Execute all synchronous code in the call stack.
When the call stack is empty
- Execute all microtasks in the microtask queue. If a microtask adds more microtasks, they will be executed immediately within the same cycle.
- Move to the first macrotask in the macrotask queue and execute it.
Repeat this process.

Example:

console.log('Start');

setTimeout(() => {
  console.log('Macrotask 1');

  Promise.resolve().then(() => {
    console.log('Microtask inside Macrotask 1');
  });
}, 0);

setTimeout(() => {
  console.log('Macrotask 2');
}, 0);

console.log('End');

Output

Start
End
Microtask 1
Microtask 2
Macrotask 1
Macrotask 2

Explanation:

console.log('Start'): Executes immediately and prints "Start".
setTimeout(..., 0) (Macrotask 1): Added to the macrotask queue.
Promise.resolve().then(...) (Microtask 1): Added to the microtask queue.
setTimeout(..., 0) (Macrotask 2): Added to the macrotask queue.
Promise.resolve().then(...) (Microtask 2): Added to the microtask queue.
console.log('End'): Executes immediately and prints "End".
Microtasks: The event loop will process all microtasks in the microtask queue before processing any macrotasks:
- Prints "Microtask 1".
- Prints "Microtask 2".
Macrotasks:
- Executes the first setTimeout(..., 0) (Macrotask 1), printing "Macrotask 1".
- Executes the second setTimeout(..., 0) (Macrotask 2), printing "Macrotask 2".

Summary:

Microtasks and macrotasks are placed into two separate queues: the microtask queue and the macrotask queue.
The microtask queue is processed before the macrotask queue in the event loop.
After every macrotask, the event loop processes all microtasks in the microtask queue before moving to the next macrotask in the macrotask queue.
This ensures that microtasks (e.g., Promise callbacks) have a higher priority and are executed sooner than macrotasks.

How the Event Loop Works

Nguyen Dinh Khai — Sun, 15 Sep 2024 13:10:55 +0000

The event loop in JavaScript is a fundamental concept that allows JavaScript to perform non-blocking operations, despite being single-threaded. It is responsible for handling asynchronous operations by managing the execution of multiple pieces of code over time.

How the Event Loop Works:

Call Stack: This is where your code gets pushed and executed. When a function is called, it gets added to the call stack, and when the function completes, it is removed (popped) from the stack. JavaScript executes code in the call stack synchronously (one at a time).
Web APIs: JavaScript in the browser environment provides APIs like setTimeout, fetch, DOM events, etc. These APIs handle time-consuming tasks asynchronously. When these tasks are invoked, they are executed outside the call stack by the browser.
Callback Queue (Task Queue): When asynchronous operations like setTimeout or fetch complete, their callbacks are pushed into the callback queue. This is a list of functions that are ready to be executed once the call stack is empty.
Event Loop: The event loop constantly monitors the call stack and the callback queue. If the call stack is empty, the event loop takes the first callback from the callback queue and pushes it onto the call stack for execution. This cycle repeats, allowing JavaScript to handle asynchronous tasks efficiently.

Please check this code below:

console.log('One');

setTimeout(() => {
  console.log('Three');
}, 1000);

console.log('Two');

The result:

One
Two
Three

Explanation:

console.log('One') is executed first and added to the call stack, then removed after execution.
setTimeout is called, which sets a timer for 1 second. Its callback is sent to the Web API, not directly to the call stack.
console.log('Two') is added to the call stack and executed next.
After the 1-second timer finishes, the callback (() => { console.log('Three'); }) is placed in the callback queue.
The event loop checks the call stack, sees it's empty, and pushes the callback from the callback queue to the call stack.
The callback is executed, printing Three.

How to install oh-my-zsh and zsh-autosuggestions for macbook

Nguyen Dinh Khai — Tue, 09 Jul 2024 10:09:02 +0000

Step 1: Install oh-my-zsh via curl



sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Step 2: Add autocomplete plugin



git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ~/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting
git clone https://github.com/zsh-users/zsh-completions.git ~/.oh-my-zsh/custom/plugins/zsh-completions
git clone https://github.com/zsh-users/zsh-history-substring-search.git ~/.oh-my-zsh/custom/plugins/zsh-history-substring-search

Step 3: Open .zshrc and paste those code at the end of the file



# Terminal autocomplete fix
autoload -Uz compinit && compinit

plugins=(
    git
    docker
    asdf
    zsh-autosuggestions
    zsh-completions 
    zsh-history-substring-search 
    zsh-syntax-highlighting
)
source /PATH/TO/zsh-autosuggestions/zsh-autosuggestions.zsh
source /PATH/TO/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

Note: Change /PATH/TO with the path to zsh-autosuggestions and zsh-syntax-highlighting in your local macbook

Step 4: Done :D

Module not found: Can't resolve 'pino-pretty'

Nguyen Dinh Khai — Tue, 07 May 2024 02:59:40 +0000

Here's a simple way to fix the "Module not found: Can't resolve 'pino-pretty'" and "Module not found: Can't resolve 'encoding'" errors in your NextJS or ReactJS project:

Open your next.config.js file in the root folder of your project.
Add this line config.externals.push('pino-pretty', 'encoding');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false, net: false, tls: false };
    config.externals.push('pino-pretty', 'encoding');
    return config;
  },
};

module.exports = nextConfig;

Load Balancing with Docker Compose + Nginx + Nestjs

Nguyen Dinh Khai — Thu, 25 Apr 2024 09:31:43 +0000

Hello everyone.
It's possible that you have encountered cases where your server is overloaded, laggy, and unable to process incoming requests.
And when you face that case, there are several ways to address this issue, such as:

Option 1: Identify the root cause of the code causing the error.
Option 2: Increase server capacity.
Option 3: Use Docker + Nginx to create load balancing to distribute incoming requests.
etc,...

Today, I will introduce how to implement Option 3. The technologies I am using:

NestJS
Docker: Nginx, PM2

1. Create a simple NestJs source code

Prerequisites
Please make sure that Node.js (version >= 16) is installed on your operating system.

Setup
Setting up a new project is quite simple with the Nest CLI. With npm installed, you can create a new Nest project with the following commands in your OS terminal:

npm i -g @nestjs/cli
nest new load-balance-with-docker

Then go to the source code folder:

cd load-balance-with-docker

And you have a structure folder like the picture:

2. Docker configuration **
**Prerequisites
Install docker for your device: https://docs.docker.com/engine/install/

We need to configure 3 parts:

Nginx
Server
Pm2

2.1 Nginx
Create a root directory, create a new folder named nginx:

Create a file named Dockerfile in the nginx directory as follows:

# nginx/Dockerfile
FROM nginx:stable-alpine
COPY default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

The above configuration snippet is a Dockerfile to build a Docker image based on the nginx:stable-alpine image.

FROM nginx:stable-alpine: This line identifies the base image that the new image will be based on, in this case nginx:stable-alpine. Image nginx:stable-alpine is a stable version of Nginx on Alpine Linux.
COPY default.conf /etc/nginx/conf.d/default.conf: This line copies the default.conf file to the /etc/nginx/conf.d/default.conf path in the image. The default.conf file contains the Nginx configuration that will be used when the container is launched.
EXPOSE 80: This line specifies that the container will listen on port 80. However, using EXPOSE does not open the port on the host machine, it is just an instruction telling others which port the container will listen on.
CMD ["nginx", "-g", "daemon off;"]: This line defines the command that the container will execute when launched. In this case, the container will run the command nginx -g 'daemon off;' to start Nginx in non-daemon mode so that the container does not exit immediately after starting Nginx.

Then create a default.conf file in the nginx directory

# nginx/default.conf
upstream my-loadbalancer {
    server my-loadbalancer:3000;    
}

server {
    listen 80;

    location / {
        proxy_pass http://my-loadbalancer/;
    }
}

upstream my-loadbalancer { server my-loadbalancer:3000; }: This snippet defines a group of servers (upstream) named "my-loadbalancer". In this case, there is only one back-end server running on port 3000.
server { listen 80; ... }: This is the configuration for an Nginx server. It listens on port 80 to handle incoming HTTP requests.
location / { proxy_pass http://my-loadbalancer/; }: This section defines a default location for all requests. It uses proxy_pass to redirect all requests to the upstream "backend". This allows Nginx to act as a proxy and redirect requests to the back-end server running on port 3000.

2.2 Server
In the main directory, create a Dockerfile file for the server as follows:

# Use node:18 image
FROM node:18.0.0

# Set working directory
WORKDIR /app

# Install dependencies
COPY package*.json ./
RUN npm install

# Copy source code
COPY . .

# Build app
RUN npm run build

# Install PM2 globally
RUN npm install pm2 -g

# Set environment variables
ENV PORT 3000

# Expose port
EXPOSE $PORT

# Start app
CMD ["pm2-runtime", "start", "ecosystem.config.js"]

Then create a docker-compose.yml file:

version: '1'

services:
  nginx: 
    build: ./nginx
    ports:
      - "80:80"
    depends_on: 
      - my-loadbalancer
  my-loadbalancer:
    build: .
    environment:
      - PORT=3000 
    deploy:
      replicas: 4

The above configuration is a docker-compose file used to define and run services in a Docker environment.

It first defines two services: nginx and my-loadbalancer.
The nginx service is built from the ./nginx directory and exposes port 80 on the host and container.
The nginx service also depends on the my-loadbalancer service before starting.
The my-loadbalancer service is built from the current directory (the directory containing the docker-compose file) and sets the environment variable PORT=3000.
Finally, the my-loadbalancer service is deployed with 4 replicas to create a load-balanced environment. You can change the number of replicas với sự tương thích của máy chủ server

2.3 Pm2
Create a file ecosystem.config.js in the root directory:

module.exports = {
    apps: [{
      name: 'my-loadbalancer',
      script: 'dist/main.js',
      instances: 'max',
      autorestart: true,
      watch: false,
      max_memory_restart: '1G',
    }]
  };

3. Done
Finally, to run the server, you can use the command:

docker-compose up -d

Then you can check the containers by docker ps:

Finally you can access the server at the url: http://localhost:80

You can check the stats of containers with the docker stats command

You can find the source code here.

Thank you for reading.

Fix Code helper plugin(visual studio code) leak memory Macbook

Nguyen Dinh Khai — Tue, 02 Apr 2024 07:37:31 +0000

When you work with VSC for a long time, it will consume a lot of RAM, hindering your work process and making your computer sluggish.
Here's how you can address that:

Open svcode

Press the keyboard shortcut Command + Shift + Dand select Preferences: Open user settings (JSON)

3.Add extra setting in settings.json



{
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/tmp": true,
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    "files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/**": true,
        "**/tmp/**": true,
        "**/bower_components/**": true,
        "**/dist/**": true
    }
}

Restart the vs code

It reduces from 1.2 GB to 100 MB of RAM. Sounds great!

Pick, Omit and Partial in Typescript

Nguyen Dinh Khai — Sat, 24 Feb 2024 08:50:08 +0000

A. Pick
Use pick to create a new type from a previous type with only a few necessary keys.

interface User {
  name: string;
  age: number;
}

type PickUser = Omit<User, 'name'>;

// Resut
type PickUser = {
    name: string;
};

B. Omit
While Pick is handy, there are occasions when the inverse operation is required. We may need to construct a type that includes everything except a few fields from a preceding type

interface User {
  name: string;
  age: number;
}

type OmitUser = Omit<User, 'name'>;

// Resut
type OmitUser = {
    age: number;
};

C. Partial
This utility type facilitates swift creation of a type with optional or undefined properties based on an existing type

interface User {
  name: string;
  age: number;
}

type PartialUser = Partial<User>;

// Resut
type PartialUser = {
    name?: string | undefined;
    age?: number | undefined;
};