Javascript Package Managers: What's the Difference Between Them?
Let's first understand the purpose: Package managers publish, install, and promote their dissemination. From this, there are several types, and here we will see some examples of them. We have managers for installing apps on mobile phones and in operating system programs (Microsoft Store), games (Steam, UPlay) and at the application level (programming languages, for example). In addition to these, there is pip , to manage packages in Python, CocoaPods , in Swift and Maven in Java. The basic actions are to install, delete and update packages, but there are other characteristics, which have advantages and disadvantages of use for each manager.
Let's go through a practical example to facilitate your understanding before we get into the features. Let's say you want to install a new app on your phone. One of the ways to do this is to download a file (of the .apk type if you're on Android, or .ipa in the case of iOS) and run the file inside your phone to install it. This way is the most unusual way to do it. We usually use so-called "app stores" - software that installs, updates and deletes apps on your phone. Therefore, we can say that Google Play and the App Store are examples of package managers.
On the frontend, the language compiled in browsers is Javascript, and it even has some manager alternatives, which at first may seem confusing. If there is one, why would there be others? The most popular currently are npm , yarn and more recently pnpm . Let's talk a little about the characteristics of each of them so you understand? npm
Acronym as Node Package Manager , it is the most popular manager of all. Released in 2010, it was developed to fix package modules issues. A short time later in the same year, Node appeared and adopted npm almost immediately. This made his popularity soar exponentially.
package dependencies
The packages may depend on the other(s), so when you install one, several others are downloaded as well. Shall we understand the reason for this? Suppose a project has React as a dependency. When installing it, other packages like babel and webpack will also be downloaded . This is just a statement, as dependencies are often in the hundreds, like a domino effect. Let's assume that React has 10 dependencies. Each of these has 10 more. At the end of this example, we have 100 dependencies installed, as a result of a single package. This leads to issues such as disk space taken up by these projects, as well as package duplication in some cases. Therefore, npm manages these dependencies through package-lock.json and package.json . The next alternatives criticize the way npm solves this problem and offer other solutions.
the security problem
npm, being the most popular, is also more susceptible to bugs and security attacks. A security issue, called module hijacking , occurs when a malicious script is inserted into one of the packages installed as a dependency on another. This script can steal credentials, bitcoins and other acts. In the previous version, npm did not have package registration processes. Therefore, suspicious codes could be made available by the manager without major problems. Starting with version 6, we have npm audit , which helps developers identify and fix vulnerable packages. The following managers use npm as a benchmark , that is, they use it as a reference for their differentials. In addition, they can also be installed from npm.
Yarn
In 2016, Facebook launched Yarn as a more secure, consistent, and performant alternative to npm. With it, a caching system was introduced, checksums to increase security. It also introduced the concept of a lock file (in the case of Yarn it is called yarn.lock , which was later adopted by npm through package-lock.json ). Because it is a client built on top of npm, it has all the packages that are available there. That is, it is possible to install packages with both npm and yarn commands .
Safety is Yarn's strong point
As mentioned before, npm has its security issues: packages are installed without any specific checks, and the process does not contain upload verification or package availability within the manager. In Yarn, packages are compared against their versions in the yarn.lock file or package.json , preventing wrong packages from being installed in the project. This also ensures that the same package and version are installed on different projects, machines, and times. Another Yarn differentiator is the workspaces . A manager feature that facilitates the administration of monorepos . As npm doesn't "natively" have a tool like this, many repository maintainers use Lerna , a package that hasn't had much movement on Github (which can make it obsolete and insecure). Therefore, Yarn becomes an alternative, in addition to other monorepos managers , such as Rush . Most of Yarn's differentials were soon implemented by npm, however, it is still considered a safer and faster manager in certain scenarios.
pnpm
pnpm is a newer alternative that has been growing in user numbers. The reason for this is because of their way of dealing with duplicate dependencies (sometimes called "npm doppelgangers"), from both npm and Yarn. If you have 100 projects with the same dependencies, you will have 100 copies on disk. What pnpm does that is totally innovative is to centralize the installation of packages and use symlinks ( symlink ) to indicate where the packages are located. It also has Yarn differentiators - greater security, caching and speed. Therefore, this set of factors results in the agility of pnpm and less disk space occupation. The image below shows the comparison of the installation time of the managers in several different scenarios. It is worth mentioning that this image is updated daily in the pnpm repository .
Conclusion
We went through three manager options that are great options for different contexts. In summary, Npm is the best known of all and still widely used, Yarn, despite being faster at times, is better known for its security and pnpm has a different solution that favors security, memory usage and installation speed. If you are interested in web development, want to deepen and gain knowledge for both websites and mobile, check out our Degree Web Full Stack , complete training that will make you a Web Developer!
Dont miss out on the news!
Join the MAKE NOW academy to receive exclusive content every week!