Tech Update: PNPM

A series explaining the tech behind our decoupled commerce accelerator, Gesso.

Recently, Shawn McCabe posted an internal blog letting our teams know that we’ve switched from yarn to pnpm on all our projects.
But why? Let’s dig in and find out.

What is pnpm?

“PNPM is an alternative package manager for Node.js, which stands for “Performant NPM”.

The main purpose of PNPM is to hold all the packages at a global (centralized) store and use them if needed by other projects too by creating hard links to it.” - Meet PNPM: The Faster, More Performant NPM - Rachana Lakshminarayan, Bits and Pieces, Medium

What is yarn?

“Yarn is a package manager for your code. It allows you to use and share (e.g. JavaScript) code with other developers from around the world. Yarn does this quickly, securely, and reliably so you never have to worry.
Code is shared through something called a package (sometimes referred to as a module). A package contains all the code being shared as well as a package.json file which describes the package.” - yarn

What is npm?

“npm or Node Package Manager is an open-source repository of tools engineers use to develop applications and websites.
npm is two things: a repository for publishing open-source project (a digital storage and retrieval facility), and a command-line interface (CLI) for interacting with the repository (a tool to communicate with the storage facility). ” - What is npm? by UXPin

What is pnpm?

“PNPM is an alternative package manager for Node.js, which stands for “Performant NPM”.

The main purpose of PNPM is to hold all the packages at a global (centralized) store and use them if needed by other projects too by creating hard links to it.” - Meet PNPM: The Faster, More Performant NPM - Rachana Lakshminarayan, Bits and Pieces, Medium

What is yarn?

“Yarn is a package manager for your code. It allows you to use and share (e.g. JavaScript) code with other developers from around the world. Yarn does this quickly, securely, and reliably so you never have to worry.
Code is shared through something called a package (sometimes referred to as a module). A package contains all the code being shared as well as a package.json file which describes the package.” - yarn

What are the benefits of pnpm?

According to Shawn McCabe, we chose PNPM because it works great with Turborepo and is much faster than yarn or npm. pnpm also has some other cool features that he explains below.

Caching

PNPM uses a global cache, so it shares node_modules between all projects on the computer. This caching can make installs very quick if many, or all, of the required packages exist in the store. While this is nice for local development, where it really helps is with speeding up CI installations.

You can cache this store across all CI jobs by giving it a global key, which will mean most, if not all, of your packages will already be available for a quick install, but, if needed, missing packages will be installed.

In testing, this proved as fast as caching the entire node_modules folder and is much more versatile, as the node_modules needs to match to an exact lockfile.

Note: We had some issues with the Cypress binary not always being downloaded correctly for multiple different versions of Cypress used in a single monorepo. You can force an install, but the recommended solution is to keep your Cypress versions in sync, which you probably want to do anyway. A helpful tool to do that is: GitHub - JamieMason/syncpack: Consistent dependency versions in large JavaScript Monorepos.

References

Merge Conflicts

PNPM understands git merge conflicts within the lockfile and will resolve them with a simple pnpm install. While theoretically, you should always manually review, I have never had it make the incorrect choice as it cross-references with the package.json.

References

Working with Git | pnpm

Ready to talk about the future of web development?

Want to know more about the world-class development tools we use at Acro Commerce? Fill in the form below, and one of our subject matter experts will reach out.

Modern web development framework. Gesso. Learn more >

Author

Shawn McCabe

, CTO

Posted in Software & Development

July 12, 2023