Lesson Description
The "Partial Rebuilds" Lesson is part of the full, Enterprise UI Development: Microfrontends, Testing, & Code Quality course featured in this preview video. Here's what you'd learn in this lesson:
Steve continues to demonstrate how a build system can optimize development by only rebuilding what is necessary. Turborepo is agnostic to build tools and works by checking outputs and triggering builds based on changes, leveraging npm scripts and workspaces.
Transcript from the "Partial Rebuilds" Lesson
[00:00:00]
>> Steve Kinney: Let's demonstrate. Like I could, this is originally supposed to be an assignment, you could all change a file and watch it happen too. But let's demonstrate. Let me look at that cheat sheet of what's like, what's somewhere in the middle. Is this the one where I had to, yeah, here we have the graph. Let's change something in users, right, because that should only then trigger two of them.
[00:00:33]
And so we'll go in here, not a lot going on. I'm thinking, what do you feel, what do I change? When I make the fop? Why am I even asking? Like, who cares? Let's make the borders more roundy. All right, that should be enough. Right, so in this case, we didn't rebuild everything. We checked a bunch of stuff, right? Cache miss on the dashboard. You know, we, cache hit on the analytics, because that's not part of that graph.
[00:01:21]
So this time the build only took 2.4 seconds instead of the 5.2. Again, with tests, I will promise you I can pull up the PRs where I went from like a 17 minute CI/CD process to 2 minutes to the point where it's like, I shocked myself. Like I know how this works. And I was like, oh, I probably should have done that a week ago. Right. And so let's go into the shared package and again, you don't really, you could like honestly change the spelling of something.
[00:01:56]
That should be enough right there, and that should then trigger basically everything. As you can see, yeah, cache miss, cache miss, cache miss. A little bit faster just because of my computer, but like we rebuilt everything. So now you get this effectively for free and like in case you haven't felt, realized my feelings on this versus the separate repos, which I have.
[00:02:27]
I was the architect at Twilio. Just imagine how many repos that is. How sad I got. Right, like, it can get really bad. And so some of this tooling is then really, really great for that. If you're developing on your front-end application, but at the same time you need to make some changes on the shared package, and the shared package needs to, let's say build first for development, but it has a different build tool than the one that you have on the front-end.
[00:02:56]
Is there a way to specify on turbo repo like the order in which to trigger the watcher for that so that it builds? It doesn't care what your build tool is, right? It's going to look at the outputs. And it's going to run effectively the same as npm run build. Whatever npm run build calls, whether that's Vite, Webpack, a make file, some other custom script, it doesn't care.
[00:03:23]
It's just going to use, like again, it is basically just leveraging your npm scripts and your workspaces. Whatever you assigned to npm run build. Anything. It doesn't matter. It will do that first, and then outputs is where it's checking to see what that should affect. So as long as that stuff gets built to a folder somewhere, right. And like, let's say you're like, actually it never gets built to a folder, it actually gets pushed up to an S3 bucket, right?
[00:04:01]
Cheat. Like, push it up to an S3 bucket and have it like write the timestamp. You know what I mean? As long as there is some way, some file that I can check and some way to tell is this different than last time, it is completely agnostic of any of your build tools. It is, that's the nice part of it, just leveraging the built-in stuff like package.json and either npm workspaces, pnpm, but I like the pnpm ones because they're strict and like they'll hoist the dependencies and do that like resolution that we were talking about.
[00:04:35]
Npm is a little more loosey goosey, and it'll let you have like 18 and one, you know what I mean? So pnpm will like just, it'll be meaner to you in a nice way. So I think that that one is a better choice, but you can, as long as you have npm or any of those workspaces set up and you have some scripts set up in a package.json and someplace where I can check to like hash it, that's it.
[00:05:01]
So it becomes really, really powerful and you get a lot of the, yeah, the advantages that we talked about before. And then like obviously I'm writing npx turbo run build, but really what you would do next is going to package.json. And for instance, build, right? Type check is just going to be turbo run type check, turbo run lint. And now turbo repo has become completely invisible to you.
[00:05:58]
Now you can go back to your fun little world of just doing npm run build. And you got full turbo. I'm not going to lie to you, the gradient on the graphic. I shouldn't care. I should be more mature than this. Chef's kiss.
Learn Straight from the Experts Who Shape the Modern Web
- 250+In-depth Courses
- Industry Leading Experts
- 24Learning Paths
- Live Interactive Workshops