Intro To Yarn

For Those Coming From NPM

By Vijay Menon, Lead

JavaScriptLA

What is Yarn?

  • It's a continuous strand of twisted threads of natural or synthetic fibers, such as wool or nylon, used in weaving or knitting.
  • Yes, I knew that, but in the context of JS PLEASE!

1

1. Wordnik: https://www.wordnik.com/words/yarn

Why? Just Why?

People get opinionated and want to make something better given they hate the way something works right now.

 

Yarn is an attempt to fix issues wrong with npm (e.g. security, speed, package conflicts, etc).

 

Often this kind of independent work leads to BETTER innovation as a whole for the industry.  Such is life in the land of JavaScript.  C'est la vie.

So Should I Drop npm?

For now you don't really need to leave npm.

 

However, you'll probably see the "yarn" command come up quite often especially if you use create-react-app command to make a React app.   

 

Yarn is designed to be a drop in replacement for npm, and its goal is to do npm things better, faster without breaking your app.  So no harm trying it out!

Yarn Install

Okay, so I convinced you to try yarn (maybe).  But you need some commands -- how do I use it for starters? And where do I get it from?

Make sure you have Node.js installed, then visit https://classic.yarnpkg.com/en/docs/install to get instructions for installation:

brew install yarn

Here's what to do if on a Mac (use Homebrew) or use sudo apt / yum install yarn if on Linux.  In your Terminal type:

Here's what to do if on Windows 10:

Download installer via Yarn 

Getting Started

Check that you have yarn by typing out the following (after installation completes)

yarn -v

You should get back a version number, something like 1.22.4 (that's my version)

Next, start a project of your own:

mkdir myApp
cd myApp
touch index.html && echo "<html><head><title>My App</title></head><body><p>My App</p></body></html>" > index.html
yarn init

You'll get the same typical questions if you were to do npm init prompted to you.  To skip use flag, -y with your statement, aka yarn init -y (also yarn init --yes) to answer yes to everything prompted.

Yarn add

Here's how to add a package with yarn:

yarn add <package name from npm>

yarn add jquery

This is exactly the same as if you were to use:

npm install jquery

npm install jquery --save

By default, yarn add saves the dependency to your package.json and updates a yarn.lock file it created to the exact version you downloaded.  You can verify this by running cat package.json and cat yarn.lock in your Terminal or Command Line.  If you need --save-dev, you can use: yarn add <package-name> -D (or --dev).

Yarn why?

What if later you want to see why you added jQuery?  Like why dude?

yarn why jquery

Here's your answer master:

yarn why v1.22.4
[1/4] 🤔  Why do we have the module "jquery"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "jquery@3.5.0"
info Has been hoisted to "jquery"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "1.7MB"
info Disk size with unique dependencies: "1.7MB"
info Disk size with transitive dependencies: "1.7MB"
info Number of shared dependencies: 0
✨  Done in 0.09s.

Yarn remove

Ugh, jQuery -- no one uses THAT library anymore! It's all about ES6!

yarn remove jquery

Yes master, whatever you say master... No Judgment Here.... -____-"

yarn remove v1.22.4
[1/2] 🗑  Removing module jquery...
[2/2] 🔨  Regenerating lockfile and installing missing dependencies...
success Uninstalled packages.
✨  Done in 0.12s.

Yarn upgrade

Install gulp for me yarn.   I remember something like Gulp 3? 4? Give me a version.

yarn add gulp@3
yarn upgrade --latest gulp

Yes master, whatever you say master!! AIYEEEE

cat package.json
{
  "name": "myApp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "gulp": "4.0.2"
  }
}

Yarn list

Shows you all the packages installed and their respective dependencies (at version numbers).  Use the --pattern flag to zero in on any package you want to know more about:

yarn list --pattern gulp
yarn list v1.22.4
├─ gulp-cli@2.2.0
├─ gulp@4.0.2
└─ gulplog@1.0.0
✨  Done in 0.26s.

Even More Yarn

There's a lot more useful commands, you can check everything out at: https://classic.yarnpkg.com/en/docs/cli/list.

yarn help

You can also use the command below to get a detailed list of commands in your terminal or command prompt:

 

yarn run #for any scripts you want to run from package.json

yarn run test #to run your tests

Summary

  • Yarn is a cool drop in for npm
  • You can still use npm if you want, but don't you think yarn is faster?  This is because yarn works by installing dependencies in parallel (while npm is sequential)
  • Yarn also checks for security better than npm
  • Yarn's algorithms are designed to check for package.json conflicts; often you'll download conflicting package versions of a dependency with npm which can lead to nasty bugs -- yarn watches out for this and lets you sleep better at night.
  • Finally, yarn guarantees an install that worked on one system will work exactly the same way on any other system -- Yarn Website.
  • Are you ready to use yarn yet?

Thank Ya!

  • About Me: I'm Vijay, lead organizer for JavaScriptLA
  • If you found this tutorial useful, please join the mailing list on our website: https://javascriptla.net -- to be informed of new meetups, blogs, vlogs and more.
  • You can also join us on Discord/Slack, if you want to chat.
  • Watch presentations and video tutorials at YouTube.com/JavaScriptLA, please thumbs up if you liked videos, comment if you have questions and subscribe if you are new!
  • Any feedback for this presentation -- email us at info@javascriptla.net (especially if you see anything wrong.  Thanks for being helpful!)

Intro To Yarn

By JavaScriptLA

Made with Slides.com

Intro To Yarn

Learn the differences between yarn and npm in this very basic and easy to understand tutorial from JavaScriptLA

  • 2,653

More from JavaScriptLA