Enter Yarn

February 2017

By Kareem Janoudi, Software Consultant, Voya Design

What is it?

Yarn is a relatively new dependency manager, similar to npm, but claiming to be better. Is it really? Let’s find out…

What was the need?

Yarn was created by Facebook late last year when they realized that there was far too much overhead in testing their Javascript projects offline on their continuous integration systems. The main culprit was npm, the traditional Javascript package manager. Any time you install a set of packages, npm reaches out to the internet. Instead of fixing npm, Facebook worked on an alternative: Yarn.

So what does yarn do differently?

Yarn allows you to install your npm packages while offline, if you have already installed them in the past. That means that if you have installed them - anywhere - in the past, that version is in the yarn cache and does not have to be fetched again.

Improvements

What does that mean for you? SPEED. Since yarn is fetching from the global cache, and also using parallel operations, install times are more than twice as fast as npm. Let’s run some tests:

npm

rm -rf node_modules # remove installed dependencies

npm cache clean # clean cache

time npm i # install packages

npm i 29.49s user 8.02s system 19% cpu 3:13.15 total

yarn

rm -rf node_modules yarn.lock # remove installed dependencies, lock file

npm cache clean # clean cache

time npm i # install packages

time yarn

yarn install v0.15.1

info No lockfile found.

[1/4] Resolving packages…

[2/4] Fetching packages…

[3/4] Linking dependencies…

[4/4] Building fresh packages…success

Saved lockfile.

✨ Done in 37.98s.

yarn 14.06s user 7.01s system 55% cpu 38.011 totalFebruary 2017 Pic1

Through 5 trials, yarn was on average 4.7 times faster than npm!

What else is better about yarn?

Verifying Integrity

Yarn takes advantage of checksums which validate that every installed package is exactly what is expected prior to executing your code. That means that every time you expect to have a package, you can make sure you have the exact same version that everyone else on the team has.

By using a lockfile by default, unlike npm shrinkwrap, it makes guaranteeing your dependencies are the same as those on another machine far simpler. That means that if it works on your machine, it will work on theirs too. By matching exact code rather than version numbers, you are guaranteed that the version and code of the dependency you're using, is exactly the same as that on another machine.

So what about this lockfile then? Well, whenever you run yarn install, the yarn.lock file has precedence over the package.json. If the yarn.lock file exists, the (exact) versions defined in it will be used. If no yarn.lock exists, the (loosely defined) versions defined in package.json will be used, and a yarn.lock is generated. That means, you SHOULD COMMIT yarn.lock file.

Multiple repositories

Yarn allows you to install packages from either npm or bower. That means you no longer have to figure out which one to use, or when to use one or the other. Yarn figures it out for you.

Removing extra and nested dependencies

Yarn, by using a flat dependency structure, removes duplicate dependencies from modules. You can also use yarn clean to remove the junk from your modules. This creates a new file, .yarnclean, which you add to source control. That ensures it gets run on the next yarn install that is run.

Don't be scared

Yarn made it simple to switch. It still uses the same package.json, it still uses very similar or familiar syntax, and it still puts all your dependencies in node_modules. What does that mean for you? Very little new to learn!

The commands are pretty similar and look familiar

  • yarn                          # Install all dependencies from package.json
  • yarn install            # Alias for yarn
  • yarn init               # Initialize an npm repository
  • yarn add [package]      # Install npm package
  • yarn upgrade [package]  # Upgrade npm package
  • yarn remove [package]   # Uninstall npm package

So how do you migrate?

Step 1) Install yarn

Step 2) Type “yarn”

Cool bonuses

Yarn gives you emojis while it does it's thing (cool J). It also includes a yarn “why” command. That comes in very handy when you’re trying to figure out how a package you don’t ever remember installing got there!

yarn upgrade-interactive Allows you to selectively upgrade specific packages in a simple way:February 2017 Pic2

See it in action:

Video Here

Kareem Janoudi is a software consultant with 15 years of experience using a plethora of web technologies. He has extensive experience in Ruby on Rails, and is currently working on several Internet of Things (IoT) projects for a large home appliance manufacturer, bringing the Smart Home model to life. In his current day to day, Kareem regularly works with React.JS, Ruby on Rails, Node.JS, Angular.JS, PHP, and MySQL. 

Kareem is also a Managing Partner for Voya Design - a Web Presence Development firm focused on creating, updating, and maintaining the presence of small businesses on the internet. Voya Design takes a small business from any stage of their web presence and ensures they are on the forefront of local marketing online.