You’ve learned a lot.
You should earn a lot.

Find a Job

Yarn Package Manager: An Improvement over npm

Yarn is the newest package manager on the block with speed and improvements over npm.

From bower to npm, package management for the web has come a long way.

I remember when I first started learning web development — you went online, looked for a package, download a zipped version, extract, and link on the web page. Heck, if we wanted a faster website, we would go to a CDN like jsDelivr and pick a globally cached version.

From there, tools like bower emerged. Since most packages are open-source, and since GitHub is the most popular place to host version controlled open-sourced files, bower served as a management tool to download the files, easily upgrade, etc.

Bower had its shortcomings, but in the javascript world, a problem doesn't last too long. There are things like polyfills, hacks, etc. A better management solution to bower called npm rose from the shadows. Being that npm is the default package manager for Node.js, it quickly rose to fame as it was and is a better package management tool than bower (IMHO).

Problems with npm

npm is good, but it also has its shortcomings. Here is a list of some of them:

  • Nested dependencies: npm version 2 nests dependencies which lead to duplicates, and as a user of windows, file paths may get long which causes problems with windows when trying to delete them. To fix this problem, use npm version 3.
  • Queued install: when npm gets dependencies from its repository, it installs each dependency one after the other which might end up using a lot of time.
  • Single registry: If a package is not on NpmJS, forget about it.
  • No offline installation.

Introducing Yarn

Yarn Package Manager Home Page

Tech giants like facebook and google decided to team up and make a better package management tool, they called it Yarn.

This tool will take packages from NpmJS or Bower registries, it also runs dependency installs parallel to each other.

If you've installed a package before, yarn creates a cached copy which facilitates offline package installs.

Out of the box, yarn offers flat dependency structure as compared to npm's nested structure.

A single request failing won't cause an install to fail. Requests are retried upon failure.

Overall, yarn offers a better workflow than npm.

Installing Yarn

At the time of this writing, I am confident of two ways to install yarn on your machine. The first method would be to use npm (lol, it's like "using internet explorer to install Chrome or Firefox").

npm install -g yarn

This installs yarn globally and makes it available from the terminal. The other method would be to go to the official download page and get the installer for your operating system and run it.

NOTE: both methods require you to have Node.js preinstalled on your machine.

How Yarn Works

Yarn doesn't intend to replace npm, more like improving on it. It uses the same package.json file, and saves dependencies to the node_modules/ folder. To test yarn, I used the same package.json file from a project I'm working on. It looks like this.

  "private": true,
  "dependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "morgan": "~1.6.1",
    "nunjucks": "^2.5.2",
    "serve-favicon": "~2.3.0",
    "vue": "^2.0.1",
    "vue-router": "^2.0.0",
    "vue-server-renderer": "^2.0.1"
  "devDependencies": {
    "babel-preset-es2015": "^6.16.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-if": "^2.0.1",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^7.1.2",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.7",
    "rev-del": "^1.0.5",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"

Then I created a test working directory called Yarn and put the package.json in there. To install the packages, from the root of the working directory, run yarn or yarn install.

If you need a new package.json file and a chance to initialize a dependency tree based on yarn, you could use

yarn init

This will give you an interactive prompt similar to this.

Adding, Upgrading, and Removing Dependencies

Adding a new dependency is easy, simply call

yarn add [package-name]

If you want a specific package version or tag, you can do this.

yarn add [package]@[version-or-tag]

For dev dependencies, peer dependencies and optional dependencies you pass the --dev --peer --optional respectively.

yarn add gulp --dev

Will save gulp under devDependencies. To upgrade or remove a package, you just replace the add command with either upgrade or remove followed by the package name.

# upgrade a gulp from 3.9.1 to version 4
yarn upgrade gulp@4.0

# remove a gulp
yarn remove gulp

The Yarn lock file

After every install, upgrade or removal, yarn updates a yarn.lock file which keeps track of the exact package version installed in node_modules directory.

NOTE: you should add this file to version control if you want package version consistency. Otherwise, feel free to git ignore it if you are comfortable with patch version upgrades.

Remove dependency bloat

We are all familiar with junk that comes with packages, from a picture of guy fieri to useless junk. Yarn can help us with that. Running yarn clean, yarn will try to remove as much junk as it can.

After doing this, a .yarnclean file is created. If this file is present before you run yarn install, it will clean each package before installing it. This file you definitely want to add to version control.

Updating yarn

As time goes on, new versions of yarn will be released and to update to the latest version, you can run

yarn self-update

If you want a particular version of yarn installed, you can pass the version tag as an option

yarn self-update 0.15.1

Future of Yarn

Having tested Yarn for a couple hours, I haven't noticed any problems yet. For the future of the project, since the project is backed by companies like Google and Facebook — it will be actively developed which can lead to yarn either becoming the defacto package manager or it being forked and used as the official npm package manager.

But nonetheless, the project looks very promising and I honestly can't wait to use it again.

PS: Windows users don't get yarn emojis when installing dependencies :(.


Samuel Oloruntoba

Self-proclaimed full-stack web developer and a quasi-academic. I work mostly on the backend (PHP and Node) with a recent enthusiasm for frontend development (React, SVG, HTML5 Canvas).