Posts from the ‘Tools’ Category

In this post, I will introduce you to the Yarn package manager. I will show how to integrate Yarn in your workflow and how to take advantage of its faster performance and consistency. NPM transformed the way we download, install and manage our application’s dependencies. But as you know it is not a perfect tool, even if there was such a thing. It’s slow and inconsistent and it has some security concerns as well. Well Yarn aims to fix that. Over the next few minutes I am going to introduce you to Yarn: A new package manager for JavaScript. Now lets get this out of the way Yarn does not attempt to completely replace NPM. Yarn is a new command line interface designed by the people at Facebook, Google, Exponent and Tilde and it fetches packages from the NPM registry. But it will replace NPM’s command line interface allowing you to do anything that the NPM Client provides.

Getting Started with Yarn is straightforward and of course the first thing that you need to do is install Yarn on your system. Visit Yarn’s website @ https://yarnpkg.com/ and then Click on Install Yarn button. This is going to take you to the installation instructions @ https://yarnpkg.com/en/docs/install for Yarn on your Operating System. Now Yarn needs NodeJS installed. More specifically, it needs NPM. So a lot of these installation instructions are solutions that will also install Node for you. For example, if you are on macOS by using Homebrew you can install Yarn which will also ensure that NodeJS is installed if it’s not already. If you are on Windows, if you install via Chocolatey then it will also ensure that NodeJS is installed. But if you download the installer be sure that NodeJS is installed first. Now this is just one way and chances are very good that you already have NodeJS installed on your computer. So you can install Yarn through NPM. Basically,

$ npm install -g yarn

and that’s going to give you the Yarn CLI. Once you have this installed then all you need to do is use the Yarn command and we will go over the commands that will be replacing NPM in your workflow because that’s essentially what Yarn is going to do. Now when creating a new project the first thing we do is initialize it with npm init and then we go through the process of answering questions and then we end up with a package.json file. And we essentially do the same thing with Yarn. Enter yarn init within the root of your project directory and then we answer the same questions. Now the interface looks a little bit different. Now we still end up with the same package.json file. So let’s say that we want to add React to our project. With NPM you would enter npm install –save react react-dom. With Yarn, we enter the command yarn add react react-dom. Saving is the default here. So we don’t have to say/enter that we want to save it. It is going to be default and it is going to download those dependencies for us. And it’s also going to be faster too because that’s one of the nice things about Yarn.

It’s performance actually comes from 2 separate things. The first is that everything that we install is going to be cached on our system. So whenever we want to install it with another project the first thing it is going to do is check to see if there is a new version. If it’s not new then it is going to use what we have in our cache and that is of course going to be much faster then it is by downloading it over the wire. But the second thing is that Yarn processes in parallel, NPM does not. NPM does things serially which makes sense if one task dependent upon another. But that’s not the case a lot of or even most of the time. So Yarn processes things in parallel which of course is going to be faster. Now I just added react above. Let’s remove that and we would do so by entering yarn remove react react-dom within the root of your project directory. It’s going to remove those packages. But now let’s add them. Let’s say we want to add a specific version, for e.g., version 15.3.1 of react and react-dom. So we will enter yarn add react@15.3.1 react-dom@15.3.1 and that will install that particular version for our project.

Once this is done installing, we are going to look at not just the package.json file but another file called yarn.lock. Because the yarn.lock file is very important with Yarn. First of all the package.json file is standard. We have the dependencies listed as well as their versions. Now one of the problems with NPM is that whenever your committed this to your repository and somebody else cloned it and did npm install and of course it is going to install the dependencies but you aren’t always guaranteed to get that exact version. In some cases, it might download a patch for that version which then you have 2 people working on essentially the same project but using different dependencies and that is a huge problem. So the folks that created Yarn decided to create this lock file. If you look at yarn.lock, the very first thing it says THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. This is created by Yarn whenever you install dependencies and it specifies the package as well as the version. So this is the file that you definitely want to commit to your repository because then whoever installs the packages using Yarn is going to get the same exact packages that are mentioned within the lock file. So if you look into yarn.lock file you will see both react & react-dom of version 15.3.1 installed.

Let’s say we are ready to update to version 15.4.0. For that we enter yarn upgrade react@15.4.0 react-dom@15.4.0 and this is going to update just those dependencies. Looking back into yarn.lock you will see those updated version numbers. So anytime you add, remove or upgrade a package, Yarn is going to update the lock file so that all the versions for all the dependencies are going to be consistent for everybody working on the same project and that is extremely important. That is also the main reason why Yarn was created to begin with. Now its worth noting that the packages that Yarn installs are from the NPM registry. There is not this new registry that have yarn packages. It’s using NPM. So in that sense there are a lot of related commands that are the exact same as NPM.

For example, we have already seen yarn init. There is also link, there is outdated, publish, run, cache clean, login, logout and test. All of these are the same commands as you would run with npm. However, Yarn has few things which NPM does not. For example, if we wanted to inspect all the licenses of our dependencies we would enter yarn licenses ls and it would list all our dependencies, their versions, their license and the URL for their repository. We can also generate our license dependency disclaimer by entering yarn licenses generate-disclaimer and that would generate that disclaimer. Finally, we can find out why we have a particular dependency. For example, let’s say we have a dependency called promise and so using  yarn why promise we can see why we have this promise dependency. Running yarn why promise gives us one of the following info i.e. This module exists because “react#fbjs” depends on it. 

We live in a world where there are new tools released almost on a daily basis and many of those tools are questionable. I mean there is no question that they are useful but you have to question whether or not it’s something that you want to spend time on. Well, Yarn is not one of those tools. Yes, it replicates NPM’s functionality  but it also brings some very useful things to the table. I mean the performance alone is the reason to use Yarn. So install it today and use it in your workflow.