## Introduction

As we know Node JS is single-threaded. Usually, most of the processors we use are of having multiple threads and multiple cores. So to take advantage of these multi-threaded/multi-core processors, we'll use the cluster module. 

According to Node JS docs 

> A single instance of Node.js runs in a single thread. To take advantage of multi-core systems, the user will sometimes want to launch a cluster of Node.js processes to handle the load. The cluster module allows easy creation of child processes that all share server ports.

In a nutshell with the help of cluster module, we can spin up multiple instances of a Node JS process which are called worker processes to handle the incoming requests.

![](https://mermaid.ink/img/eyJjb2RlIjoiZ3JhcGggVEJcbmFbSW5jb21pbmcgcmVxdWVzdHNdIC0tPiBiW1wiQ2x1c3RlciBNYW5hZ2VyIChNYXN0ZXIgcHJvY2VzcylcIl1cbmIgLS0-IGNbXCJ3b3JrZXIgIzEgKENoaWxkIHByb2Nlc3MpXCJdXG5iIC0tPiBkW1wid29ya2VyICMyIChDaGlsZCBwcm9jZXNzKVwiXVxuYiAtLT4gZVtcIndvcmtlciAjMyAoQ2hpbGQgcHJvY2VzcylcIl1cbmIgLS0-IGZbXCJ3b3JrZXIgIzQgKENoaWxkIHByb2Nlc3MpXCJdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)

Here,

* The cluster manager is the parent process, which manages the workers. 
* Cluster manager doesn't execute any application code.
* Cluster manager distributes the incoming requests to worker processes. 
* All the network requests (Like API calls) are handled by the workers.
* All the workers are independent processes, they can be killed re-spawned without affecting other workers.

## Using the Cluster Module

As an example let's create a simple express app which calculates Fibonacci number.

Let's start by creating a folder named `cluster-example`.

Open it inside your terminal and run the following commands

```bash
$ npm init -y
```

It creates the `package.json` file.

Now install express using

```bash
$ npm install express
```

#### Without Cluster Module

Let create two files, First one `without-cluster.js` which doesn't use the cluster module.

```javascript
//without-cluster.js

const express = require('express');
const app = express();
const port = 5000;

//Calculate Fibonacci Number
function fib(n) {
  if (n < 2) {
    return n;
  }
  return fib(n - 1) + fib(n - 2);
}

app.get('/', (req, res) => {
  const result = fib(30);
  return res.send({ data: result });
});

app.listen(port, () => console.log(`App listening on port ${port}!`));
```

If you look at the above code, it's a simple express app which calculates the Fibonacci number and sends the result. To keep this post simple I'm not going to explain the Fibonacci number.

To start the app just run

```bash
$ node without-cluster.js
```

Now,  When you go to `localhost:5000/` you'll get the Fibonacci number as follows

```json
{"data":832040}
```

#### With Cluster Module

Let's create another file named `with-cluster.js` which uses cluster module.

```javascript
//with-cluster.js

const cluster = require("cluster");
const express = require("express");
const app = express();
const port = 5000;

//To check whether it's a cluster manager(Master Process)
if (cluster.isMaster) {
    //This method creates the worker processes
    cluster.fork();
    cluster.fork();
    cluster.fork();
    cluster.fork();  //Here we created four worker processes
} else {
   
    {/** Application Logic Starts **/}
    function fib(n) {
        if (n < 2) {
            return n;
        }

        return fib(n - 1) + fib(n - 2);
    }

    app.get("/", (req, res) => {
        const result = fib(30);
        return res.send({ data: result });
    });

    app.listen(port, () =>
        console.log(`App listening on port ${port} ${process.pid}!`)
    );
    {/** Application Logic Ends **/}

}
```

If you look at the above code, it's the same app which calculates the Fibonacci number but uses the cluster module. We're just wrapping our application code inside an if-else block. 

First, we're checking if it's a cluster manager(master process) or not by using the `cluster.isMaster` property. If it's a cluster manager, we're going spin up workers(child process) using `cluster.fork()` method. 

The number of workers created will be equal to how many times you called `cluster.fork` method. Ideally, for better performance, the number of workers should be created needs to be equal to the number of [logical cores](https://unix.stackexchange.com/questions/88283/so-what-are-logical-cpu-cores-as-opposed-to-physical-cpu-cores) of the processor (Mine has 8 logical cores, you can check that in your task manager or using `os` module by `os.cpus().length` ).

To start the app just run (Don't forget to kill the previous one)

```bash
$ node with-cluster.js
```

Now,  When you go to `localhost:5000/`  you'll get the exact Fibonacci number as the previous one.

```json
{"data":832040}
```

## Benchmarking Using Apache Bench (ab) tool

Now you might be thinking about what performance improvements we're getting by using cluster modules. To check that we'll be using [apache bench tool](https://httpd.apache.org/docs/2.4/programs/ab.html). 

As I'm using Ubuntu(WSL 2), I can install it by running

```bash
$ sudo apt-get install apache2-utils
```

### Benchmarking for the app which doesn't use cluster module

First, we'll check for the app which doesn't use cluster module.

To start the app

```bash
$ node without-cluster.js
```

Suppose we want to see how fast our server can handle 100 requests, with a maximum of 10 requests running concurrently. Now open another terminal and run the following command.

```bash
$ ab -n 100 -c 10 localhost:5000/ #Dont forget the trailing slash
```

Let's break down the above command.

* `-n`: Total number of requests to be made.
* `-c`: Maximum number of requests to run concurrently.

After running the above command I'm getting the following results on my machine. Note, it might be different on your machine. Results will be based on your processor, programs running on your machine etc.

Sorry for my poor editing skills 😁

![without-cluster.js results](/assets/inkedwith-out-cluster_li.jpg)

### Benchmarking for the app which uses cluster module

Now let's test for the app which uses the cluster module. Start the app by running

```bash
$ node with-cluster.js
```

Run the apache bench(ab)  tool.

```bash
$ ab -n 100 -c 10 localhost:5000/ #Dont forget the trailing slash
```

After running the apache bench tool again, I'm getting the following results.

![with cluster results](/assets/inkedwith-cluster_li.jpg)

### Comparison

Now let's compare both results (which are taken for this sample app on my machine)

|                                                                            | **With Out Cluster Module** | **With Cluster Module** |
| -------------------------------------------------------------------------- | --------------------------- | ----------------------- |
| Time Taken for tests to complete                                           | 1.589 seconds               | 0.644 seconds           |
| Requests per second                                                        | 62.95 req/sec               | 155.35 req/sec          |
| Time per request ([mean](https://www.purplemath.com/modules/meanmode.htm)) | 158.8 ms                    | 64.372 ms               |
| Time per request (mean, across all concurrent requests)                    | 15.887                      | 33.53                   |

Here we're talking only a few properties from the results. You can clearly see, how many more requests we can handle by in a second by using the cluster module. The more requests we're handling, the lesser time the users have to wait to process their requests.

Similarly, you can compare other properties as well. 

> Note: Generally,  For clustering we can use process managers like [pm2](https://pm2.keymetrics.io/) which provides some extra features over the cluster module.

Thank You.

## References

[Cluster Module](https://nodejs.org/dist/latest-v12.x/docs/api/cluster.html) - Node JS Docs

[Useful Tools: ApacheBench (ab)](https://dev.to/matthias/useful-tools-apachebench-ab-2lmo) By [**Matthias** ](https://dev.to/matthias)

Usually, most of the processors we use are of having multiple threads and multiple cores. So to take advantage of these multi-threaded/multi-core processors, we'll use the cluster module.

Using the Node JS Cluster Module


If you have used SASS or other CSS preprocessors, you might have already used Variables. CSS variables (also referred as custom properties) are native implementation of them in the browser.

CSS variables needs to be declared with `--` prefix to the name.

```css
:root {
  --primary-color: #eaefed;
  --text-color: #001100;
}
```

When we want to access them, we just need to use the `var` function. The first argument of the `var` function is name of the variable. If variable is invalid, we can pass the fallback value as the second argument.

```css
.link {
  border: 1px solid var(--primary-color);
  color: var(--text-color, #111000);
  /* if --text-color is invalid,fallback value #111000 is used */
}
```

### Scope of the Variable

The scope of the CSS variable is the scope of the selector it is defined. For global scope we can either declare them in `:root` or `body` selector.

For example, lets declare a variable named `--btn-danger-color` in a class `btn` . If you try to access the variable `--btn-danger-color` in another class out of its scope, it will be invalid. Because scope of `--btn-danger-color` is only in `btn` class

```css
.btn {
  --btn-danger-color: #ff4136;
  background-color: var(--btn-danger-color);
}
.link {
  background-color: var(--btn-danger-color, green);
  /* Background color is green because --btn-danger is invalid */
}
```

### Accessing and Modifying CSS Variables with JavaScript

To access or modify CSS variables via JavaScript, we can use two methods

- getPropertyValue
- setProperty

### Getting the CSS Variable Value

To get the value of the CSS variable, we can use `getPropertyValue` method

```js
const btn = document.querySelector('.btn');

let btnDangerBg = getComputedStyle(element).getPropertyValue(
  '--btn-danger-color'
);

console.log(btnDangerBg); // #FF4136 - value of the css variable defined in .btn class in CSS
```

To get the CSS variables declared in `:root`, you can use `document.querySelector(':root');`

### Changing the CSS Variable Value

To set the value of the CSS variable from JavaScript we can use `setProperty` method.

```javascript
element.style.setProperty('--variable-name', value);
```

Lets write a small function to change the `Button` background colour to purple by using `setProperty` method.

```javascript
function changeColorToPurple() {
  //Set the CSS variable value
  btn.style.setProperty('--btn-danger-color', 'purple');
}
```

Don't forget to link it with HTML.

```html
<button class="btn" onclick="changeColorToPurple()">Change Color</button>
```

### Demo

I'm adding an embedded [repl](https://repl.it/@bgopikrishna/CssVariables) for the above code, So that you can play with it.

<iframe height="600px" width="100%" src="https://repl.it/@bgopikrishna/CssVariables?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-poInter-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>

Thank You.

### Reference

[CSS custom properties ](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) - MDN

[Every thing you need to know about css variables](https://www.freecodecamp.org/news/everything-you-need-to-know-about-css-variables-c74d922ea855/)


If you have used SASS or other CSS preprocessors, you might have already used Variables. CSS variables (also referred as custom properties) are native implementation of them in the browser.

Getting started with CSS variables


Local storage allows us to store the data in the user's browser. The data stored will not be deleted even after the browser is closed.

The data will be stored in the form of key/value pairs. Both keys and values are always strings.

### Storing the data

For example, we have a user whose preferences/settings needs to be stored in the `localStorage`. Let's create a `userPreferences` object with the user settings.

```javascript
const userPreferences = {
  darkMode: true,
  accentColor: 'red',
};
```

Now, we'll store it in the browser using `localStorage.setItem` method

```js
localStorage.setItem('userData', JSON.stringfy(userPreferences));
```

Here `userData` is key and `userPreferences` is the value. The reason we are using `JSON.stringfy` method is to convert the `userPreferences` object to a string.

### Retrieving the data

When we need to use the data, we can retrieve it using `localStorage.getItem` method by passing the key as the argument. The data returned will be in the form of a string, so we need to use `JSON.parse` method to convert it into an object.

```js
let userData = localStorage.getItem('userData'); //"{ darkMode: true, accentColor:'red'}"

//convert the string to an object
userData = JSON.parse(userData);

console.log(userData); // { darkMode: true, accentColor: 'red'}
```

### Clearing the data

If you want to clear all the data stored in the local storage, we need to use `localStorage.clear` method.

```js
localStorage.clear();
```

### Removing the particular data

If you want to remove data for a particular key, we need to use `localStorage.removeItem` method by passing key as the argument.

```js
localStorage.removeItem("userData").
```

### Session Storage

`sessionStorage` is same as `localStorage` . But the main difference is, the data stored will be cleared automatically when the user closes the web page. All the methods are also same.

### Limitations

Do not store any sensitive data in the local storage as it can be accessed by any one browsing the page. And there is no form of data protection.

### Example

If you're reading this on _[Dev.to](https://dev.to)_, Open the developer tools by pressing `ctrl(cmd) + shift + I` and go to **Application &rightarrow; Local Storage**. There you'll find how _[Dev.to](dev.to)_ using local storage for storing user details with the key `current_user`.

If you're reading this on my blog, repeat the above steps and you'll see how I'm using local storage for persisting the dark mode using the key `darkMode`.

Thank You.

### Reference

[LocalStorage - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)

[Session Storage - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)


Local storage allows us to store the data in the user's browser. The data stored will not be deleted even after the browser is closed.

How to use Local Storage in JavaScript?

I always had a slight confusion between `null` and `undefined` in JavaScript.

Now, Let's dive into the topic.

When we declare a variable without assigning any value to it, **its value will be `undefined` by default.**

```js
let color;
console.log(color); //undefined
```

> When we assign `null` to a variable, we are explicitly assigning a "nothing" or "empty" value to it.

For example, we have a `userDetails` the variable that stores the details of a user. At first, it doesn't have any data, so we are assigning `null` to it.

```js
let userDetails = null;
```

Later we assign the `userDetails` variable with the response from our function `getUserDetails`. The function may be a call to an API or accessing `localStorage` for details etc. Here it's just a simple function that returns an object.

```js
function getUserDetails() {
  return {
    userName: 'gk',
    id: '1',
  };
}

userDetails = getUserDetails();
console.log(userDetails); // {userName:"gk", id:"1"}
```

If the value is unknown at the time of variable definition, it's always best to use `null`.

Thank you.

### Reference

* [undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined) - MDN
* [null](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null) - MDN
* [Javascript Grammer](https://twitter.com/js_tut)

I always had a small confusion between null and undefined in JavaScript.

Javascript

Using the Node JS Cluster Module

Getting started with CSS variables

How to use Local Storage in JavaScript?

Null vs Undefined in JavaScript in 1 min