NPM vs. Yarn
After our first day of learning React, I think we can all appreciate what it allows us to do, coming from our last module that covered DOM manipulation using plain vanilla JavaScript. Since we’re still in the beginning stages of working with React, I think it’s a good time to take a step back and really try to understand the fundamentals before getting in to more complex concepts.
A lot of the material today that we learned, was focused on setting up the React file structure, and just getting started in general. After doing the first few labs on React, and going over some concepts in lecture, we were told to use the NPM install command to first set up and install all dependencies, in order for React to actually work. When running NPM install, it seemed like a lot was going on (especially since it took a while to complete), so I wanted to learn more about this and what it was actually setting up for us. Later on after completing a few labs, our instructor had recommended to install and use Yarn instead of NPM, to improve performance (it’s basically known to be quicker than NPM). So since this is all new to me, I figured I’d take the time now while we’re still in the infancy stage of learning React, and learn what NPM and Yarn actually are, so that I’m familiar with them moving forward.
So the basic definitions for NPM and Yarn are, as follows:
NPM- stands for Node Package Manager. It’s an online repository for publishing open source Node.js projects, and it’s also a command line utility that’s used to communicate with the repository to help install packages.
YARN- basically a fast, reliable, and secure alternative to NPM. A package manager that replaces the existing workflow for the npm client or other package managers while remaining compatible with the npm registry.
After doing some research and finding the general definitions of each of these, I then asked myself, what was the problem with NPM, and why was YARN created to basically replace it? It turns out, Yarn was actually created by Facebook, to solve some particular problems that they were having with NPM. Just like everyone else, when Node.js came out, Facebook relied on code in the NMP registry, for projects that they were working on, such as React. As they began scaling, they were faced with problems related to consistency when installing dependencies. They had issues with the speed of installing dependencies, and the security of how code was executed when using NPM. So, Facebook collaborated with Google, Exponent, and Tilde to fix the problem, and later produced YARN.
If Facebook and other major tech companies actually wasted time on finding a better solution instead of using NPM, there must have been some pretty significant problems with NPM. Here are some of the major setbacks with NPM, which prompted the production of YARN:
Possible Bugs with Dependency versions
- In a Node environment, dependencies are placed in a node-module directory in a project when they’re installed. Depending on the order that these dependencies are actually installed, it’s possible for a different version of the dependency to be installed on another computer. This is of course an issue which can cause bugs.
- In order to fix this, YARN installs a yarn.lock file to pin down the exact version of the dependency that should be installed (similar to a Gemfile.lock in rails).
- NPM has an NPM shrinkwrap command that also generates a lock file which is read before package.json. The main difference is that it’s automatically installed using YARN, and it’s another step you have to take when using NPM.
Parallel Installation
- When NPM installs packages, they’re actually installed one at a time. Meaning it’ll wait until the current package is completely finished installing, before moving onto the next.
- Yarn will actually move on and install multiple packages at ones, which significantly improves the speed of the entire package installation.
Installation Output
- After running Yarn install, versus NPM install, the out put in your terminal looks completely different. NPM is extremely verbose, meaning it prints out everything thats happening. YARN is extremely efficient in terms of what it displays. Instead of showing every single detail like NPM, it’s cuts right to the chase:


CLI Commands
A lot of the YARN commands are similar to commands that NPM. Here are some of the similarities and differences.
- If you need to install anything globally, the YARN command needs to be prefaced with the word global, instead of adding -g on the end of the NPM command- global yarn install <package>
- npm install <package> vs yarn add <package>
- npm upgrade<package> vs yarn upgrade <package>
- npm shrinkwrap<package> vs yarn generate-lock-entry <package>
- yarn why- this command peeks into the dependency graph and figures out why given package is installed in your project- yarn why <package>
At this point, I think it’s safe to say that YARN is the better bet, rather than using NPM. Just for the simple fact that it’s quicker, and you won’t need to worry about running into version issues for your dependencies. At our level of programming right now, it’s perfectly ok for us to use NPM and get away with it, however at a huge tech company, I can definitely see how using YARN is way more beneficial.
Sources:
