--- title: "5 things you can do with Yarn" description: "Yarn is a new package manager for JavaScript by Facebook. Learn how to use Yarn to increase your productivity." authors: - name: "Prosper Otemuyiwa" url: "https://auth0.com/blog/authors/prosper-otemuyiwa/" date: "Oct 13, 2016" category: "Developers,Deep Dive,Yarn" tags: ["npm", "yarn", "javascript", "package manager"] url: "https://auth0.com/blog/five-things-you-can-do-with-yarn/" --- # 5 things you can do with Yarn --- **TL;DR:** There are several package managers in the JavaScript land: **npm**, **bower**, **component**, and **volo**, to name a few. As of this writing, the most popular JavaScript package manager is **npm**. The npm client provides access to hundreds of thousands of code libraries in the npm registry. Just recently, Facebook launched a new package manager for JavaScript called **Yarn**, which claims to be faster, more reliable, and more secure than the existing npm client. In this article, you will learn five things you can do with Yarn. --- **Yarn** is a new package manager for JavaScript created by Facebook. It offers a fast, highly reliable, and secure dependency management for developers using JavaScript in their apps. Here are five things you can do with Yarn. ## 1. Work Offline Yarn offers you the ability to work in offline mode. If you have installed a package before, you can install it again without an internet connection. A typical example is shown below: When connected to the internet, I installed two packages with Yarn like so: ![Yarn init](https://images.ctfassets.net/23aumh6u8s0i/6Imo0acT6Gs64IH8jTwVQ1/26892a9ea5f6cc8e84f4569707aef49a/yarn-int) _Create a package.json with yarn init_ ![Install express and jsonwebtoken packages with Yarn](https://images.ctfassets.net/23aumh6u8s0i/42lSxWCr2ew4M6IFI0KDC1/775327790a7467412d01ce15cbfe88a4/yarn-add-packages) _Install express and jsonwebtoken packages with yarn_ ![Installation complete with Yarn](https://images.ctfassets.net/23aumh6u8s0i/1r4HWUk3WtSJjMGPOUTuhr/037e548a5603f26687cfaf39360a4a3c/yarn-completed-install) _Installation complete_ After the installation was complete, I went ahead and deleted the *node_modules* inside my *orijin* directory and also disconnected from the Internet. I ran Yarn like so: ![Installing packages offline with Yarn](https://images.ctfassets.net/23aumh6u8s0i/6DL20SGupYx4sU9KzOxgAt/f7d786b68e975df1b1003a8f1c4ec757/yarn-install-offline) _Yarn installed the packages offline_ Voilá! All the packages were installed again in less than two seconds. Apparently, Yarn caches every package it downloads so it never needs to do so again. It also maximizes resource utilization by parallelizing operations so that install times are faster than ever. ## 2. Install from Multiple Registries Yarn offers you the ability to install JavaScript packages from multiple registries, such as [npm](https://www.npmjs.com/), [bower](https://bower.io/), your git repository, and even your local file system. By default, it scans the npm registry for your package as follows: ```bash yarn add ``` Install a package from a remote gzipped tarball file as follows: ```bash yarn add ``` Install a package from your local file system as follows: ```bash yarn add file:/path/to/local/folder ``` This is particularly helpful for developers who constantly publish JavaScript packages. You can use this to test your packages before publishing them to a registry. Install a package from a remote git repository like so: ```bash yarn add ``` ![Yarn installs from a Github Repo](https://images.ctfassets.net/23aumh6u8s0i/7eAxYyJ4IuguqtasactfWs/604a258c9aa536e4364a438482c398c0/yarn-add-gitrepo) _Yarn installs from a Github repo_ ![Yarn detects that a Github Rep exists as a package in the bower registry](https://images.ctfassets.net/23aumh6u8s0i/43r9Pc5tltOEWWYrY4kS9a/e92b4686e9c6c1872f748dda47a14548/yarn-add-bowercomp) _Yarn also automatically detects that the git repo exists as a package in the bower registry and treats it as such_ ## 3. Fetch Packages Speedily If you have used **npm** for a while, you must have had experiences where you had to run `npm install`, then go watch a movie, and come back to check whether all the packages you required are finished installing. Well, maybe not that long, but it takes a lot of time to traverse the dependency tree and pull dependencies in. With Yarn, installation time has really been cut down from having to wait several minutes to package installs happening in seconds. Yarn efficiently queues up requests and avoids request waterfalls to maximize network utilization. It starts by making requests to the registry and recursively looking up each dependency. Next, it looks in a global cache directory to see whether the package has been downloaded before. If it hasn't, Yarn fetches the tarball package and places it in the global cache to enable it to work offline and eliminate the need to re-download. During install, Yarn parallelizes operations, which makes the install process faster. I did a fresh install of three packages, **jsonwebtoken**, **express** and **lodash**, using **npm** and **yarn**. After *Yarn* was finished installing them, *npm* was still installing. ![Comparison of Yarn and Npm](https://images.ctfassets.net/23aumh6u8s0i/4UGNjRN84eSDhTVtDaMZN7/0bca8f7ff2e0986e352adf130432d54f/yarn-npm-compare) ## 4. Lock Package Versions Automatically Npm has a feature called **shrinkwrap**, which is intended to lock down your package dependencies for production use. The challenge with **shrinkwrap** is that every developer has to manually run `npm shrinkwrap` to generate the `npm-shrinkwrap.json` file. Developers are also humans; we can forget! With Yarn, it's a different ball game. During installation, a `yarn.lock` file is generated automatically. It is similar to the `composer.lock` file that PHP developers are familiar with. The `yarn.lock` file locks down the exact versions of the packages that have been installed and all their dependencies. With this file, you can be certain that every member of your engineering team have the exact package versions installed and deployments can easily be reproduced without unexpected bugs. ## 5. Install Dependencies the Same Way across Machines The **npm client** installs dependencies in a way that can make the structure of the contents of *Developer A* `node_modules` directory different from *Developer B*. It uses a non-deterministic approach to install these package dependencies. This approach is sometimes responsible for bugs that can't be easily reproduced because of the popular *works on my system* problem. With Yarn, the presence of a lock file and an install algorithm ensures that the dependencies installed produce the exact same file and folder structure across development machines and when deploying applications to production. **Note:** One more thing, I know I promised five but I can't help tell you how good **Yarn** makes me feel. Enterprise environments require the ability to be able to list a dependencies' license type. Yarn offers the ability to list the license type for a given dependency by running `yarn licenses ls` in your root directory as follows: ![Yarn Licenses](https://images.ctfassets.net/23aumh6u8s0i/2CT4v5mObOSAptOxiNId6O/ce758c59da1df693560888cc679773f8/licenses) ## Aside: Using Auth0 with Yarn **Auth0** issues [JSON Web Tokens](https://jwt.io/) on every login for your users. This means that you can have a solid [identity infrastructure](https://auth0.com/docs/identityproviders), including [single sign-on](https://auth0.com/docs/sso/single-sign-on), user management, support for social identity providers (Facebook, GitHub, Twitter, etc.), enterprise identity providers (Active Directory, LDAP, SAML, etc.) and your own database of users with just a few lines of code. We can easily set up authentication in our JavaScript apps by using [Auth0's Centralized Login Page](https://auth0.com/docs/hosted-pages/login). You can easily install the `auth0-js` library from your terminal with Yarn like so: ```bash yarn add auth0-js ``` It installs the library within seconds and locks down the exact version with the aid of the `yarn.lock` file. If you don't already have an Auth0 account, sign up for one now. Navigate to the Auth0 [management dashboard](https://manage.auth0.com/), select **Applications** from the navigational menu, then select the app you want to connect with the JavaScript framework of your choice. Now head over to the [Quickstart docs](https://auth0.com/docs/quickstarts), select the type of app you want to build and follow the steps highlighted there. ## Conclusion Yarn in its infancy has already brought significant improvements in the way JavaScript packages are fetched from global registries into local environments, especially with regard to speed and security. Will it grow to become the most popular choice among JavaScript developers? Have you switched yet? What are your thoughts about Yarn? Let me know in the comments section! 😊