Npm vs Yarn - What to Choose?
Npm vs Yarn - What to Choose?

People often ask me "Why do you use Yarn and not Npm?", "Is Yarn better than Npm?", "What is the difference between them?". This is why in this video you will learn answers for all this questions.

And first of all we must dig a little bit deeper of Javascript package managers. Actually when you install Node you get Npm out of the box. This is why inside console I can write.

node -v
npm -v

And with installed NodeJS we also get Npm. This is totally fine. This is why it is the most popular package manager because it is available there out of the box.

Some time ago we didn't have any alternative to Npm. This is why all people simply used it. At that time Npm had 3 main problems:

  • Packages installation was too slow
  • It didn't cache good enough
  • Conflicts inside lock files were difficult to resolve

A lot of people submitted issues inside Npm and wanted to change something. But core team on Npm decided not to update anything because there was no alternative at that time.

After some time Facebook created an alternative to Npm which is called Yarn. And actually they made a really good job. At that moment it was:

  • Faster than npm
  • Much safer and more reliable
  • Leverages caching better

The main point to remember is that Yarn is not an alternative to Npm registry.

If you don't know what is Npm registry it is a special place where you can find all Npm package. Which actually means Yarn also uses Npm registry. So it's not like you have completely different place from where all packages are downloaded.

So Yarn is just a wrapper for npm registry to install and cache packages differently. Even Node modules structure stays almost the same.

Another important problem was that there was no lock file out of the box with Npm. Which actually means that your dependencies were not locked and on other machine you might install different versions of the packages. In Npm there was an npm-shrinkwrap file which was a pain to use. Inside Yarn you are getting lock file out of the box. This is why in all my projects you can see yarn.lock file.

So if you see yarn.lock file in a project it means that you must install packages using Yarn and not Npm. If you see package.lock then you must install packages using Npm.

After this lots of people jumped from Npm to Yarn because it was much faster and more reliable. This is why after some time Npm team decided to improve things on their side. And they copied a lot of ideas from Yarn and improved Npm a lot.

This is why nowadays Npm and Yarn Classic (Yarn v1) are almost the same. And it doesn't really matter what you use.

In both of them you are getting

  • Lock files out of the box
  • Nice caching
  • Packages installation is fast

You just must remember that inside project you should check how to install packages, either with Yarn or with Npm.

Yarn v2

But it is not all. Actually we have Yarn Classic (Yarn V1) and Yarn Berry (Yarn V2). And actually most people use Yarn V1 as an alternative to Npm package manager. The question now is "What is Yarn V2?", "It is better than Yarn V1", "What is the difference between them?".

Yarn V2 is not just a new version of Yarn this is completely new approach to use package manager. Actually for us the main problem is the node_modules folder. In every single project you can see how many packages are installed inside. And there is no way to make it faster. Because it works by copying every single package from one place to another. You can't really make a copy process faster.

This is why inside Yarn V2 which is also called Berry we have a feature which is called Plug'n'Play. This is a special feature where we don't use node_modules anymore. So the main idea of Yarn V2 is to get rid of node_modules because there is no way to make it better and faster. This is why they are "fixing" node_modules by using completely different approach.

For us the most important question is "What projects can already use Yarn V2?". And there are quite a lot of them.

  • Babel
  • Create-React-App
  • Eslint
  • Gatsby
  • Gulp
  • Husky
  • Jest
  • Next.js
  • Parcel
  • Preact
  • Prettier
  • Storybook

This is just the top of the list. So as you can see even bit players like create-react-app decided to invest in Yarn V2.

But there are still some projects which are not supporting Yarn V2 yet.

  • Angular
  • Flow
  • React Native

This are the biggest this is why it is difficult to migrate them.

What is faster

The most interesting question is of course what is faster. Here is a comparison.

                   No cache | Cached | Reinstall
NPM 6.13.4              67s      61s         28s
Yarn 1.21.1             57s      29s        1.2s
Berry 2.0.0-rc.27      145s      14s        6.5s
Node 13.5.0

No cache here means first installation of the package. So Npm and Yarn are not that different and Yarn V2 is much slower.

In cached installation Yarn is must faster than Npm (this is why I prefer Yarn) and Berry is twice faster than even Yarn.

Conclusion

This is why I think that in future more and more project will switch to Yarn V2 and it will be even faster. And of course after some time it might happen that Npm will implement something similar and it will have the similar speed.

I hope that this post brought you clarity regarding different package managers inside Javascript. And if you are interested in learning 5 most popular coding tasks for Javascript interview make sure to check this post also.