Yarn or NPM : a beginners guide

So package managers are interesting. In short, help “stand on the shoulders of giants” is their goal. In normal, they let you install other peoples work to save you trying to code some b****t that is so bloody obvious and simple why can’t I do this!!!! IS THIS AN EDGE CASE - WHAT THE HELL!!!

Others people work/code/functions/generously shared labour and time, in this context is a package. I remember NPM as Node Package Manager though its debated whether it is an acronym. Yarn stands for.. umm…

Yet Another Resource Negotiator

**Me from the future here. Yarn doesn’t mean that, but YARN does. YARN is for Hadoop, Yarn is for JS.

Right… well… whatever.

What do they do?

Imagine this, I write some code that uses my friend Dan’s code. Dan is a wizard; a regular everyday normal guy code Ninja. He writes this awesome package (piece of code) which lets me do something amazing — let’s say it looks at your computer and translates all words to your language.

I love this package and put it on my website and chuck the code to my website on the web for anyone to use, copy and make their own site. Lightning strikes as I press upload and the whole world and all their dogs copy my website and make their own.

Now I didn’t say before that Dan’s package is also huge in file size.

My website was pretty simple and hence not much code was written. Like 0.1% the size of Dan’s package (no jokes). When everyone saw my website and downloaded it suddenly we broke the internet without a Kardashian. Why did it break I hear you ask? Well, all the traffic on the internet was people downloading 0.1% of my code and 99.9% of Dan’s code. A huge amount of bandwidth was taken up and something didn’t like that.

Imagine now everyone is using Github [other providers are available]. Suddenly, Github’s servers a full of Dan’s code 7.5 billion times. That’s a bit excessive. Repetition is a waste after all. Now part of me is like “Yeah but that is Github’s problem — they offer a free service”. True -and realistically they are smarter than me so would likely have some compression or something behind the scenes — but that isn’t the point. Also think of me, visiting the family, going back to dial up connection, wanting to quickly change the font on my site or something equally trivial , trying to upload all of Dan’s code which is taking four hours and has the router acting like a central heating system.

So issue one: duplication of code, saved in many places

All of us are using Dan’s code, but suddenly we get feedback that it fails to translate a language. “f$*£$@%!%^$^£@^%” said Dan. He fixes it and sends me his updated code. Great! My site works again for that language, but what about everyone else. Should I try to send them and emailing with Dan’s code attached? Yeah… no.

So issue two: what happens when that code needs to change

Now what if Dan had borrowed code from someone else, who borrowed code from someone else and they needed to get this fix out to everyone? Does Dan need to send me a message to tell me to update his code, because he got a message to update his code, because someone else updated theirs which contains a fix. Now there is a daisy chain of information getting passed around of what to update with what. It is a bit of a mess isn’t it!

Issue three : packages built on packages can be confusing.

Now say that I don’t know any of those people and now have to spend my evening searching for their websites to find their code updates and then delete their old code from my project and install there new code… no thanks. Plus, how do I know which version I should be using. Do I ask Dan? Why didn’t he write this down somewhere?

Issue four : How do I know what versions I need that will play well with other versions!

And finally because I am struggling to think of more right now — feel free to comment and I will edit — there is another reason.

If I didn’t know Dan but found his amazing package online on a random webpage how would I know if it is alright? How do I know it isn’t a virus? [https://hackernoon.com/im-harvesting-credit-card-numbers-and-passwords-from-your-site-here-s-how-9a8cb347c5b5] How do I know that it does what it says it does?

Issue five: How can I trust others code if I don’t understand it all?

Wouldn’t it be great for there to be a site which people post their packages and others can download, comment, raise issues and give some confidence to people like me that just want to download something to do some work rather than starting from scratch

Okay so let’s summarise. We want:

  • a poster-board of useful & helpful packages, where people can discuss them — just look at npmjs.com
  • a way to update package and packages-within-packages easier
  • to stop duplication of peoples code all over the place

npm, yarn and others are here to help. Package Managers.

Okay cool so you can install both easily:

But which should you pick?

For speed, yarn is probably best. I don’t understand why. One day I will look into it.

Also it has a cool feature where it caches packages. This means if you have installed a version 1.1.0 package and a version 1.2.0 package at some point, they are saved to your computer. This means if you are offline, you can still change these. Pretty cool… unless you have WiFi, or need WiFi to code or use visual studio code (as that needs wifi to open!!) or have no confidence you would know how to use packages and know to make the decision to swap between them without WiFi. Let’s call this a profeature.

For info when installing things, it depends — what do you prefer seeing.

Note: these two images are not showing the same package installing but are showing different packages installing. They are just here to show the layout.

NPM will shout everything it sees out, tell you what it is up to, tell you a life story, WARN you of things and more. Most of the time, I ignore it. I probably shouldn’t.

Yarn shows emojis and stars and stuff.

Security is difficult

Do you mean security of being able to build code on others code without worrying about someone putting the package under copyright or has used copyrighted code in theirs and then you can’t use it so all your time is wasted? Yeah they both are alright, I think, but I am not a security expert. NPM uses a hash to verify unique code from others. Yarn does something similar. These are checked when you get the code locally.

Do you mean security of someone making a package with devious code? Umm well that is more difficult. With NPM you have to make an account to upload a package [https://medium.freecodecamp.org/how-to-make-a-beautiful-tiny-npm-package-and-publish-it-2881d4307f78]. That is about it. They way security comes is implied by the community. If something has 7000 downloads and another 4, which do you think is most likely to have been checked by someone in this open source community. npm will check things but it isn’t reasonable to assume all things have been.

This isn’t strictly true and, with NPM aiming at the commercial B2B market, this is a real focus of them and they do regular reviews. So security is present, but NPM is not a silver bullet or perfect resource.

For Yarn… well Yarn uses NPM so it is the same.

SAY WHAT?!?!

Yeahhh… so this is another thing...

NPM is a package manager for Node. They also have a website/library where they store the code and allow people to download it.

NPM is a p̶a̶c̶k̶a̶g̶e “other-peoples-code” manager for n̶o̶d̶e̶ “a-JavaScript-place-to-run-code”.

Yarn is dependency manager. It manages what code you are dependant on. It uses and slightly modifies what it gets from the library.

How about an analogy? I could go to IKEA and get them to install and fit a brand new kitchen. I could also pay Magical Kitchens (imaginative naming here, look out!) to install and fit the IKEA kitchen I really like. IKEAs work is still in my house at the end of the day. Who is better at fitting it though? IKEA or Magical? Did I pay the same? Is it the same quality? Etc etc.

Let’s call it a tie.

For learning, having issues and getting help? From my experience, npm.

From my experience, npm (much like VHS vs. Betamax) has the edge over yarn regarding getting help. Why? Because it was first. How often do you have problems with NPM? Um… good point. Umm... ye. Cool.

So what should I use?

From my view, Yarn is best by stats; npm is most common. I haven’t really had an issue with either. But do note though that if you are doing a tutorial which talks with NPM and you are using Yarn the commands aren’t all exactly the same!

I will continue to flip between the two as the difference between a load of packages installing in 4 seconds or 11 seconds doesn’t really bother me. “Cop out!”, I hear you shout. Yeah. I probably use npm more.

NOTE: I also found this fantastic webpage on the topic have a look at the data comparisons at the bottom: https://stackshare.io/stackups/npm-vs-yarn

Final word?

There is also something called pnpm. (https://www.youtube.com/watch?v=8N_tupPBtWQ)

It is like yarn is speed, but it doesn’t save versions like yarn. Also, in your code’s node_modules file it creates a nested structure. That means if you are only dependant on one package, but that package is dependant on 50 packages, in your node_modules you will only see one package at one level and 50 within it. It makes it a bit tidier.

Here’s some stats: https://github.com/pnpm/benchmarks-of-javascript-package-managers

Focused on saving our time: everyhour.xyz for your life balance; tree-meals-a-day.earth for our food emissions and compairbnb.info/hello for booking airbnbs.