Why I Switched To PNPM?
Tags: pnpm, javascript, node, webdev
Published: 2021-11-01 07:40:00

Package Manager For Node JS

It is system for that automate the process of adding/upgrading/removing and managing dependencies for a Node JS project

There are many package managers for Node JS

- NPM (Node Package Manager)

  Most popular package manager for Javascript and also default package manager for Node JS.

- Yarn

  It was released by Facebook Inc. in 2016. It was create to overcome problems and performance that were in NPM at that time.

- PNPM

  It is alternative package manager for Node Js for replacement of NPM, but faster and efficient.

---

## Why is better than Yarn and NPM?

Imagine you install a package, Let call it Package_X. Imagine **[Lodash](https://lodash.com/)** is one of dependency of Package_X. Now you install diffrent package call it Package_Y which also has **[Lodash](https://lodash.com/)** as it dependency. Thus in a single project there two copies of Lodash.

If there are 100 packages using Lodash, you are going to have 100 copies Lodash

**_PNPM allows yoo to save tons of space_**

It is faster than both npm and yarn. Because Yarn copies files from cache wheareas pnpm links files into global score.

## How PNPM works?

Note that PNPM doesn't flatten the dependency tree

Look how earlier `node_modules` tree looked like

```
node_modules/
|  Package_X/
|  | > node_modules/
|  |   | > Package_Z/
|  |       | index.js
|  |       | package.json
|  |   index.js
|  |   package.json
|
|  Package_Y/
|  | > node_modules/
|  |   | > Package_Z/
|  |       | index.js
|  |       | package.json
|  |   index.js
|  |   package.json
```

### This way to managing has some issuse

- Deeply nested dependency tree, causing long directory names in system.

- Packages are copied and pasted several times when they are required in different dependencies.

But now after update in NPM @version 3, they added flattening so structure look like

```
node_modules/
|  Package_X/
|  |   index.js
|  |   package.json
|
|  Package_Y/
|  |   index.js
|  |   package.json
|
|  Package_Z/
|  |   index.js
|  |   package.json
```

**But pnpm follow diffrent apporch rather than flattening tree it keeps it same**


In `/node_modules` folder created by pnpm, each package has it's own dependency but dependency tree is never deep as in earlier version of npm. It keeps all dependencies flat with use of [Symbolic Links](https://en.wikipedia.org/wiki/Symbolic_link#:~:text=In%20computing%2C%20a%20symbolic%20link,and%20that%20affects%20pathname%20resolution.) or [Junction](https://www.computerhope.com/jargon/j/junction.htm#:~:text=A%20junction%2C%20also%20called%20an,to%20the%20Windows%20command%20line) (in windows)

```
node_modules/
|  Package_X/
|  | > node_modules/
|  |   | > Package_Z/ -> ../../../Package_Z/1.0.0
|  |   index.js
|  |   package.json
|
|  Package_Y/
|  | > node_modules/
|  |   | > Package_Z/ -> ../../../Package_Z/1.0.0
|  |       | index.js
|  |       | package.json
|  |   index.js
|  |   package.json
|
|  Package_Z/
|  |   index.js
|  |   package.json
```

## Installation

- Open terminal
- Execute following command

```bash
  npm install -g pnpm
```

or

```bash
  npx pnpm add -g pnpm
```

## Small Project Using pnpm

We are going to build Restfull API that get name of two person and calculate the love percentage between them

Exexute below commands

Create a directory

```bash
  mkdir love-api
```

Initialise it as pnpm project

```bash
  pnpm init -y
```

We are going to use Express for it.
Note pnpm commands is quite similiar to both npm and yarn. We are going to replace `npm install [PACKAGE_NAME]` with `pnpm add [PACKAGE_NAME]`

So adding following packages to your projects

Execute below commands

```bash
  pnpm add express cors
```

```bash
  pnpm add -D @types/express @types/cors nodemon typescript concurrently
```

Add these below script to `package.json`

```JSON
{
  "build": "tsc",
  "start": "node dist/index.js",
  "dev": "concurrently \"tsc -w\" \"nodemon dist/index.js\""
}
```

We are going to discuss only about the PNPM side of things only
have look of source code [here](https://github.com/theharshrastogi/love-calculator-api).

**Dont Forget To Follow Me** -> [Harsh Rastogi](https://github.com/theharshrastogi)

Now to build convert typescript code into javascript

In **npm** we do `npm run build` but in **pnpm** we have to execute

```bash
  pnpm build
```

and to start dev server

```bash
  pnpm dev
```

and to start server in production mode

```bash
  pnpm start
```

## Benchmarks

![Benchmark compares the performance of NPM, Yarn, PNPM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4ngf5x7mqznpvx12i1g.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/le5xkicvlvxmx6racea3.jpg)

## Conclusion

If you are searching that gives you better speed and performance then pnpm is better, I personally suggest you to use pnpm instead of npm and Yarn. If you are not using it then you a chance to try it.

Yarn sends date to Facebook, which don't make yarn suitable in some scenarios. NPM has also security issue that's why there is Yarn now.

In above benchmarks we can see PNPM is better in all aspects.

Happy Coding :)