Yarn

What is so special about Yarn? Basically Yarn is just another package manager for the web – like NPM or Bower. But it has some features that make it worth to have a look at it. If you go to https://yarnpkg.com/, the website of Yarn, you get a list of key features of this package manager:

  • fast
  • secure
  • reliable

That pretty much sums up what the creators of Yarn learned from the mistakes of the other package managers. Under the hood, Yarn is not a revolution of package management but the next step of evolution.

Installation

The recommended way to install Yarn on your system is using the native installation methods. So for Mac you’re using Homebrew, MSI installer for Windows and your package manager for Linux. It’s also possible to install Yarn via NPM but this throws a deprecation warning so you shouldn’t rely on this method.

Basic usage

There are a couple of commands you need to know, when you’re working with Yarn.

Initialization

The first step is setting up your project. With yarn init you start an interactive process that guides you through the basic setup and creates a package.json file for you. Similar to NPM, Yarn uses package.json as a description for your project. The file generated by Yarn is pretty minimal but it contains the most important fields such as the main field with the entry point to your application, the version of your application or the license.

Installation of packages

The main purpose of a package manager is to install packages for your application and keep track of them. So the most important command is yarn add <package>. By default Yarn is using the npmjs.com repository as package source. That means you can install every valid NPM package. If you want to add jQuery to your project for example you just have to run yarn add jquery. Yarn doesn’t only work for frontend packages but also for regular Node.js modules. To add Express.js to your Node.js application, just type yarn add express. Yarn automatically adds an installed package as a dependency to your package.json file. With NPM you have to do this explicitly with the —-save option. Yarn also creates a file called yarn.lock, which pins the versions of all installed packages by listing the package name, version number and a reference to the tgz-file. It doesn’t only list all the direct dependencies but also all of the sub dependencies.

Yarn works similar to NPM. It downloads the package files and unpacks them to the node_modules folder. The packages are stored in a flat structure, so duplicates can be omitted easily.

If you’re used to NPM, you probably ask how to install packages globally so you can use them on the command line of your system. In the meantime this method of installation has become more and more deprecated. Most of the time you should install your packages locally so you can have different versions on your system and keep them specific to your application. However, with yarn global add <package> you are able to install packages globally, if necessary.

Installation part 2

A common best practice is to exclude the node_modules folder from version control. But how do you get the packages when you want to set up your application on a new machine? You go to the command line, navigate to the root folder of your application and invoke yarn install or simply yarn. This command reads your package.json file and installs all the listed dependencies and devDependencies. If you only want to install dependencies, you add --prod.

Yarn saves all the installed packages in a global cache folder, so it doesn’t have to download them from the repository every time. With yarn cache ls you can list all cached packages. yarn cache clean clears the local cache. The cache allows you to use Yarn in offline mode.

To improve installation performance, Yarn downloads dependencies in parallel.

Updating Packages

Once you have installed all your packages and work on your application you will come to a point where you want to update all or at least some of the installed packages. This might be due to security, feature updates or just to keep up with the current implementation of your dependencies. With Yarn this is a fairly easy process. In order to update all installed dependencies, you just have to run yarn upgrade. This will process all dependencies and update them to the newest possible version specified in your package.json file. The updates will be reflected in the yarn.lock file as well.

If you run yarn upgrade on a specific package, such as yarn upgrade jquery it updates the given package to the latest version. You have to be careful with this command because it not only updates your yarn.lock file but also the package.json file. That means if you have previously installed jquery in version 1.11, which pins the installation range to 1.11.x and you run the upgrade it installs jquery 3.something, updates the package.json and recreates yarn.lock.

Removing installed packages

It’s a common situation in web development to try out things to find out the best possible solution. For your application that means you install various packages, include them in your application and use them. If they don’t prove good enough you look for a better alternative. In order to keep your dependencies clean, you should remove unused packages. To do so, just run yarn remove <package>. For example if you don’t need your previously installed jQuery anymore, you invoke yarn remove jquery. This command removes the sources of the package from your node_modules folder, removes the entry in your package.json file and recreates the yarn.lock file.

Summary

Yarn is a modern tool to manage the dependencies of your web application. It is inspired by NPM but it solves some of its shortcomings and takes care of reliability, stability and performance.

The features of Yarn, I presented you in this article are just a small excerpt of what Yarn can do for you. So if you want to know more of this incredible tool, just have a look at the online documentation and try Yarn on your own in your application.

Leave a Reply

Your email address will not be published. Required fields are marked *