Complete Intro to React, v3 (feat. Redux, Router & Flow) Yarn Dependency Manager

[00:00:00]
>> Brian Holt: Now it says you have the start branch, hopefully. Hopefully you have Node 6+, 7ish installed. I installed mine using nvm, it's totally up to you how to do that, but I find nvm very convenient.
>> Brian Holt: Next thing we're gonna talk about is Yarn. So many of you are probably accustomed to seeing npm lot's of places.

[00:00:27] Npm doesn't stand for Node Package Manager, but that's what I think of it as [LAUGH]. It's basically a way to install dependencies for JavaScript type projects. And they ship a client called npm. And it's been really great for a long time, however if you're doing deployments it's really tough because npm is non-deterministic as of npm 3, 4-ish.

[00:00:55] This is gonna change with npm 5, npm 5 will become deterministic and it's also going to do locking as well. But that is still not released, its actually coming out with Node 8 today. So that's why we are not teaching it today, we are going to stick with Yarn.

[00:01:10] The fine people over at Facebook were frustrated with their deployments, so they came up with a npm client called Yarn. And what Yarn does is it creates these lock files, which we were just looking at, that locks down all of your dependencies. What's really cool about that is it's deterministic.

[00:01:26] When I say the term deterministic, it means I can run it 10 billion times, and on the 10 billion and first time it's gonna run the exact same way. And you do not have that guarantee with npm 3. Which is the one that the previous versions of Node shipped with.

[00:01:42] So what's frustrating about that is when you're doing deployments you don't know what state your node module's directory is gonna end up in. Which is a problem as you may imagine, right? Like you can do 10,000 deploys and 50 of them failed for unknown reasons, and you can't reproduce why they failed.

[00:02:01] It's a serious problem, right? So they came up with this yarn dependency manager. It's faster than npm 3 and it's deterministic. And it also has a flat structure, which are all very positive things for deployments. So today we're gonna be using Yarn. So if you don't already have it installed, I'll show you how to install it real quick.

[00:02:24] You do npm install --global yarn, like that.
>> Brian Holt: I already have it, so I'm going to run that, but that's how you would do it. And then at that point, you should be able to say yarn -v. I guess it's going to the installations. I guess -v does not do version.

[00:02:46] In any case, let's stop that for a second. So I have Yarn already installed, and now I am inside the start branch, and I'm going to run yarn. What this is gonna do, this is like the npm install. It's gonna go through and install all my dependencies based on what I have in package.json and the yarn lock file.

[00:03:06] So I'm gonna say yarn, and then it's just gonna do this magic, and it's going to install all of my dependencies for me.
>> Brian Holt: Now to be fair, you could totally run npm install, and not use Yarn, and I'm 99% sure it's gonna work. But it's non-deterministic, so you can't truly be sure.

[00:03:28] No, I'm just kidding, you can be pretty sure. So now, if we look in our node modules, mine was pretty fast. Mine only too 13 seconds because most of that was already cached for me. If you're doing this cold for the first time, and are not on gigabit, it might take a little bit longer.

[00:03:47] So if I go into node modules and look, I have a ton of dependencies installed now.
>> Brian Holt: So this is something that people that like to complain about node like to complain about, is that there are just a crazy amount of dependencies. Not gonna deny that, there's a crazy amount of dependencies.

[00:04:06] However, you have to keep in mind that Yarn installs all these node modules totally flat. So everything that gets included that includes something else that includes something else, it's all installed flat, which is not how npm installs them. Yarn actually goes through and sim links them all into their respective node modules directories, which is pretty cool.

[00:04:33]
>> Brian Holt: Cool.
>> Brian Holt: So now that we've done Yarn installs.
>> Brian Holt: We're gonna go ahead and skip the global installs for now
>> Brian Holt: But just so you know you can also do global yarn installs, you can do yarn global add blank. So if I was gonna do nodemon or something like that, that's how you do that and that would be a global install for Yarn.

[00:05:03]
>> Brian Holt: And if you wanna add new dependencies to a repo, you say yarn add and then react, right? Something like that.
>> Brian Holt: Instead of yarn install it's yarn add, and then by the same token, yarn remove. The nice thing about yarn is that it saves by default, you don't have to do npminstall--save, right?

[00:05:27] Also true of npm 5, they're dropping the --save, it's gonna just save by default, which is gonna be great. And if you wanted to save it to dev, you're gonna say yard --dev eslint or something like that right? And that is the full tour, that is how you use Yarn.

[00:05:46] A question from online?
>> Speaker 2: It's asking if Yarn adds updates that package JSON?
>> Brian Holt: It does, yeah, it'll update the package.json and it'll update the lockfile for you automatically.
>> Brian Holt: Same thing with npm 5, it's gonna ship a new file called package-lock.json. And when you install it will also update that as well.

[00:06:13] So npm 3 has something called shrinkwrap which will be, I think, slowly be phased out in favor of package-lock.
>> Brian Holt: And if you don't know where it is, that's okay. Let's just go forward with Yarn and package lock.
>> Speaker 3: And are these npm updates supposed to just kind of displace Yarn, like is that what they're trying to do?

[00:06:38]
>> Brian Holt: That's a good question.
>> Speaker 2: They said they were just working on it, actually beforehand, and then Yarn kind of came out.
>> Brian Holt: Yeah.
>> Speaker 2: And then it looked like they were kind of backpedaling and filling in gaps, but I don't know. It's hard to say.
>> Brian Holt: It's kind of a weird situation.

[00:06:57]
>> Brian Holt: Not to plug myself too much here, but the last episode of the podcast we launched, it actually had Laurie Voss from npm on. And he talks a lot about that whole situation, so. There's good history there if you want to talk. They're super chill with each other is the sum of the story, right?

[00:07:11] They're both gonna coexist and push each other forward I think it the sum of the story for now.