JavaScript Package Managers: NPM Vs YARN Vs PNPM

Package managers are software tools that help programmers and developers to install, update and uninstall packages of code, libraries, or other software.

There are many package managers for a variety of programming languages such as JavaScript's NPM and Ruby's GEM.

Package managers typically use metadata to determine which versions of a package are available and the dependencies of each version package managers vary in the type of automated software they install and update.

Examples include apt-get, DNF (Fedora/Red Hat), Pacman (Arch Linux), and npm (Node. js).

A package can be added or removed from this common pool by any user‌. Packages are usually retrieved from remote servers, but can also be installed locally.

• What is a Package Manager?
• NPM Vs YARN Vs PNPM Comparison
  1. Performance and Disk Efficiency
  2. Security
  3. Monorepo support
  4. Installation Workflows
  5. Structure of the Projects

What is a Package Manager?

A package manager is a piece of software that handles the installation, upgrading, and removal of computer software packages.

A package manager stores packages in a central location on the hard disk or network drive. It allows multiple users to share a single copy of the package.

Package managers, like npm install and yarn add, are often CLI-based. Usually, JavaScript applications have many dependencies, and those dependencies are managed by a package manager.

Node uses NPM by default. However, NPM does not have some advanced features that are ideal for more advanced applications, or it is slow when installing packages or solving package dependencies.

Yarn and PNPM, which are community-made package managers, came into existence to solve the above problem. In the past few years, the yarn has become slower, but today it's probably the most popular option.

In the world of package management, PNPM was the latest player to appear, and it made it faster for installing and upgrading packages.

NPM Vs YARN Vs PNPM Comparison

NPM is a package manager for JavaScript that was originally developed by the Node.js project. It enables developers to share code more easily across different projects and to use other people’s code in their own projects.

Yarn is a package manager for JavaScript and it was developed by Facebook. It is fast, reliable, and secure.

PNPM is a new package manager for JavaScript that was built on top of npm to simplify the installation process of packages in node applications. PNPM is an alternative to NPM. It follows the same principles as NPM but it has some additional features that make it more powerful than its predecessor.

1. Performance and Disk Efficiency

NPM: It is bit slower when compared to Yarn and PNPM.

YARN: Yarn uses the same flatten node_modules directory but is comparable to NPM in regards to speed and installs packages parallely.

PNPM: PNPM is 3 times faster and more efficient than NPM.  With both cold and hot cache, PNPM is faster than Yarn.

Pnpm simply links files from the global store, while yarn copies files from its cache. Package versions are never saved more than once on a disk.

The algorithm of pnpm does not use a flatten dependency tree, which makes it easier to implement, maintain, and requires less computation.

This was the method used in NPM 3 and earlier, but nesting was problematic, and thus packages had to be copied several times for each package that depended on them.

node_modules
└─ foo
   ├─ index.js
   ├─ package.json
   └─ node_modules
      └─ bar
         ├─ index.js
         └─ package.json

With hardlinks and symlinks, PNPM solved the issue above in contrast to NPM. PNPM grouped all dependencies by symlink, but retained all the dependencies.

a symlink (or junction on Windows)

node_modules
├─ foo -> .registry.npmjs.org/foo/1.0.0/node_modules/foo
└─ .registry.npmjs.org
   ├─ foo/1.0.0/node_modules
   |  ├─ bar -> ../../bar/2.0.0/node_modules/bar
   |  └─ foo
   |     ├─ index.js
   |     └─ package.json
   └─ bar/2.0.0/node_modules
      └─ bar
         ├─ index.js
         └─ package.json

PNPM can also save tons of spaces compared to other two package managers.

2. Security

NPM: There have been some security vulnerabilities that have directly affected many projects due to the way npm handles bad packages.

YARN: Checksums stored in yarn.lock have been used by Yarn Classic and Yarn Berry ever since. Yarn also prevents you from installing malicious packages; if a mismatch is detected, the installation will be aborted.

PNPM: Similar to Yarn, PNPM also uses checksums and in addition to the use of checksums, pnpm also verifies the integrity of its code before executing it.

3. Monorepo support

A Monorepository consists of multiple isolated code repositories all housed in one repository in order to avoid managing multiple repositories.

NPM: The NPM package manager offers monorepo support with a variety of CLI commands to manage the multiple packages. However, unlike other package managers, it does not support advanced filtering or multiple workspaces.

YARN: It also offers monorepo support as the feature workspaces. Using Lerna, a third-party application, before workspace feature was available, was the only way to use the package manager in a multi-package project.

PNPM: NPM's doppelgangers problem can only be solved with PNPM. Monorepos are sometimes plagued with doppelgangers, so PNPM has an advantage in this regard.

4. Installation Workflows

As I said before, a package manager has to be installed local and CI/CD first.

NPM: It is one of the world’s largest package registry, which should be installed with Node.js. It uses the package.json and package.lock.json files.

To download the package, open the terminal and type the below command:

npm install "package_name"

By default, npm creates a folder named package.json and whenever you download a package using npm that will be placed here.

YARN: To come over from the problems of NPM, YARN was developed. It provided many new features that were later incorporated with npm such as lockfile with versions, caching and so on.

Yarn uses the package.json and yarn.lock files.

You can install Yarn in different ways - using npm as an npm package with:

npm install -g yarn

PNPM: You can easily install PNPM with npm package.

npm install -g pnpm

5. Structure of the projects

Once the installation process is over, it will generate the respective files which can be easily viewed and all the important meta information are stored in the file named package.json.

NPM: With npm install a package-lock.json and a node_modules folder is generated. You can manually place a .npmrc configuration file at the root level.

.
├── node_modules/
├── .npmrc
├── package-lock.json
└── package.json

YARN: This will also create yarn.lock file and a node_modules folder. You can also configure your yarn with a .yarnrc file; Yarn Classic also acknowledges .npmrc files.

.
├── .yarn/
│   ├── cache/
│   └── releases/
│       └── yarn-1.22.17.cjs
├── node_modules/
├── .yarnrc
├── package.json
└── yarn.lock

Besides .yarn/cache/, other locations for storing yarn classic versions can be used (.yarn/releases/).

PNPM: Unlike NPM, PNPM doesn't create a flattened dependency tree. In node_modules, everything had its own node_modules folder within package.json, and every dependency was precisely specified in package.json. Before npm version 3, the node_modules structure was predictable.

The problem with this approach was twofold:

1. windows was frequently having trouble with long directory paths caused by packages with too deep dependency trees
2. packages were copied several times to satisfy multiple dependencies

PNPM solved this issue without flattening the dependency tree. Each package's dependencies were grouped together in a node_modules folder and symlinks were used to group dependencies together, so the directory tree is flat.

.
├── node_modules/
│   └── .pnpm/
├── .npmrc
├── package.json
└── pnpm-lock.yml

A package.json file is created once you install the dependencies using pnpm i, also a node_modules folder is generated but the structure of it will differ completely from npm and yarn because of its content-addressable storage approach.

Example:

node_modules
└── .pnpm
    ├── bar@1.0.0
    │   └── node_modules
    │       └── bar -> <store>/bar
    │           ├── index.js
    │           └── package.json
    └── foo@1.0.0
        └── node_modules
            └── foo -> <store>/foo
                ├── index.js
                └── package.json

Upshot

Package managers are in a great state at the moment. Almost all major package managers have achieved feature parity. There are differences under the hood.

While PNPM has some similarities to NPM, their methods for managing dependencies are quite different; PNPM's approach provides better performance and better disk-space efficiency.

Soon, Yarn Classic may cease to be supported since it is considered legacy software.

As the newest package manager contender, Yarn Berry PnP still has not fully exploited its potential to revolutionise the package management landscape.

Dependencies are common in JavaScript applications. Package managers are typically used to manage those dependencies. By default, node uses NPM.

Although NPM lacks some advanced features, it does a good job of solving package dependencies and installing packages.

Real-Time Node.js Monitoring with Atatus

Using Atatus Node.js APM, you can get a detailed overview of what your customers are experiencing as they use your application.

Determining the cause of slow response times, route changes, and other issues with performance in the front-end is critical.

Enhance your user experience quality with Atatus. Whenever users encounter problems interacting with the page, seeing unexpected changes, or having slow loading times.

We gather performance data that helps you understand what the cause is at the user level.

Learn why poor front-end performance and slow page loading affected your customers.

Perform an individual user evaluation to determine whether there are slow pages, JavaScript exceptions, or failed AJAX calls. Get a quick understanding of how your end users' experience changes due to network or location.

The session traces allow you to see the progress of the session, identify slow JavaScript assets, long loading times and identify errors.

Bounce rates increase with slow pages so fix them by employing Atatus to get started signup for a free trial today!