Yarn Focus

[00:00:00]
>> One of the benefits you get working with yarn workspaces is the ability to zoom in and focus on a particular sub part of your project. So if we look at our node modules folder, we have probably, well over 1,000 different things in here. You can see PostCSS, all this PostCSS stuff that's specific to the chat app itself, right?

[00:00:26]
We've got Redux in here for some reason, some transitive dependency somehow, tons and tons and tons of stuff here. So, and I think the PostCSS stuff is a good thing for us to keep our eye on. What we can do is run the following command. I'm gonna go to the root of the project and run yarn workspaces, Focus chat-stdlib.

[00:01:00]
And what we're actually seeing, you see how we're going to the use, it's everything's scrolled up. We're seeing a lot of stuff getting removed from our node modules folder. And if we keep going up, there's no PostCSS stuff in here. So what's happened is we have stripped down our dependencies.

[00:01:18]
So we only have in this folder now, things that are needed in order to run chat stdlib. So, if you did a git sparse checkout to minimize the code you had to checkout from git, and then you ran yarn workspaces focus. You get pretty close to the small project feel where you can kind of run into, if we go into packages/chat stdlib, We could run yarn build.

[00:01:47]
Everything will work fine, right? Everything that's needed for this part of the project is fine, yarn lint. There's es lint running. Now if we were to go out to chat and run yarn lint, couldn't find a script named es lint. So it's not really wired up. This chat project is not wired up, but the smaller one is.

[00:02:13]
So when you're working on a large scale with team and you decide to approach. You decide to take this modular architecture approach where we're not necessarily shipping a bunch of libraries here, but we can say here are modular pieces of code like maybe this is the admin section of our app and this is our data layer and this is our UI tool, our UI component kit.

[00:02:38]
Fix it up however it makes sense to you. But this lets you kind of, if you're gonna operate in one part of the project, zoom in on that, get your updated dependencies just for that one piece of the project. You can build, you can test, do whatever you gotta do, open your pull request, and you don't have to pay the cost of the fact that there are a lot of things going on in this rebuilt with many, many different dependencies.

[00:03:07]
One more thing. If we want to zoom back out and see the whole project again, just run yarn. Now we're gonna watch this get enormous. So see how we're going backwards in the alphabet up to the Js, up to the Is, the Gs, or into the Es and the Ds.

[00:03:27]
This is just this file is getting longer, and longer, and longer, and longer. We heard from halfway through the alphabet and now we're at the Cs. That isn't a scroll position with all this other stuff below it. So big difference.