Monday, September 25, 2017

6 Things That Make Yarn the Best JavaScript Package Manager

Yarn is an open-source npm client that was developed at Facebook and improves on many aspects of the standard npm client. In this tutorial, I'll focus on the top six features that make Yarn awesome:

  1. Speed
  2. Robust Installs
  3. License Checks
  4. Compatibility with npm and Bower
  5. Multiple Registries
  6. Emojis

1. Speed

One of Yarn's claims to fame is its speed compared to the standard npm client. But how fast is it? In a recent benchmark, Yarn was two to three times faster than npm. The benchmark timed the installation of React, Angular 2, and Ember. This is a pretty good test for a package manager as each of these frameworks pulls a bunch of dependencies and represents a major share of the dependencies of a real-world web application.  

Let's add another data point and check for ourselves by installing a create-react-app using both yarn and npm. Here is the installation using yarn:

Here is the installation using npm:

Yep. This definitely corroborates other reports about a significant speed advantage to yarn. Yarn installed in 2.59 seconds, while npm took 9.422 seconds. Yarn was 3.63X faster!

2. Robust Installs

Yarn also boasts more robust installs than npm. What makes an install flaky? If subsequent installs fail or produce a different outcome then an install is flaky. There are two main causes:

  1. Transient network issues might cause fetching packages from the registry to fail.
  2. New releases of packages might result in incompatible and breaking changes.

Yarn addresses both concerns. 

Offline Cache

Yarn uses a global offline cache to store packages you've installed once, so new installations use the cached version and avoid flakiness due to intermittent network failures. You can find where your yarn cache is by typing:

Here are the first five packages in my offline cache:

Yarn can go even further and have a full offline mirror that will work across upgrades of the yarn itself.

The yarn.lock File

The yarn.lock file is updated whenever you add or upgrade a version. It essentially pins down the exact version of each package that may be specified in package.json using partial versioning (e.g. just major and minor) and its dependencies. 

Here is the beginning of a typical yarn.lock file. You can see the version as specified in package.json like "abbrev@1" and the pinned version "1.1.0".

But Why?

Yarn also gives you the yarn why command to explain why a particular package is installed in your project:

3. License Checks

Some projects need to abide by certain licensing requirements or just produce a report for internal or external purposes. Yarn makes it really easy with the yarn licenses ls command. It produces a compact report that includes the fully qualified package name, its URL, and the license. Here is an example:

Yarn can even generate a disclaimer for you with yarn licenses generate-disclaimer. The result is some text with a disclaimer message and text for each package in your application. Here is a sample from the disclaimer generated for my test project:

4. Compatibility With npm and Bower

Yarn is fully compatible with npm as it is just a different client that works with npm registries. Very early it supported Bower, but then shortly after a decision was made to drop Bower support. 

The main reason was that the Bower support didn't work very well and emptied the bower_components directory or didn't fetch any bower packages on a fresh project. But another reason is that the Yarn team didn't want to encourage fragmentation in the package management arena and instead preferred for everyone to switch to npm.

If you are invested in Bower and don't want to migrate right now, you can still use Yarn, but add the following snippet to your package.json file:

5. Multiple Registries

Yarn can work with multiple registry types. By default, if you just add a package, it will use its npm registry (which is not the standard npm registry). But it can also add packages from files, remote tarballs, or remote git repositories.

To see the current configured npm registry:

To set a different registry type: yarn config set registry <registry url>

To add packages from different locations, use the following add commands:

6. Emojis FTW!

Some people like emojis, and some people don't. Yarn originally displayed emojis automatically, but only on Mac OS X. It caught fire from both camps: the emoji haters were upset that their console on Mac OS X was cluttered with emojis, and the emoji lovers were upset that they didn't have emojis on Windows and Linux. 

Now, emojis are not displayed on macOS by default, and you can enable emojis with the --emoji flag:

Conclusion

Yarn is the best JavaScript package manager. It is compatible with npm, but much, much faster. It addresses serious problems for large-scale projects with flaky installation, it supports multiple types of registries, and it has emojis to boot. 

JavaScript, though not without its learning curves, has plenty of libraries and frameworks to keep you busy, as you can see. If you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato marketplace.

The JavaScript community is overall very positive, and there is a lot of momentum behind Yarn. It has already addressed some issues such as redundant Bower support and emojis by default. Migrating to Yarn from npm is very easy. I highly recommend that you give a try.


by Gigi Sayfan via Envato Tuts+ Code

No comments:

Post a Comment