Lesson Description

The "Turborepo, Nx, & Bazel" 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 introduces Turborepo, a tool that builds a dependency graph of tasks based on package JSON files to manage builds efficiently. It detects changes, rebuilds only necessary packages, caches results, and runs scripts in dependency order.

Preview

Transcript from the "Turborepo, Nx, & Bazel" Lesson

[00:00:00]
>> Steve Kinney: So, introducing Turbo repo, and it's got some friends, I will tell you about them separately. But it basically builds, you know, a DAG of all your tasks, like looking at the dependencies like, hey, because like you have package.json. You have dependencies declared, right? All one needs to do is write an algorithm to look at all the package.json files, figure out what relies on what. Figure out, did you accidentally make a circular dependency, because I did one time before I used Turborepo, and that was an afternoon of my life that I'll never get back.

[00:00:35]
It would have been a day or two if it wasn't for my good friend Claude. But like it was still an afternoon because it was a year ago or something like that, and like, uh, Claude wasn't that great just yet. It is now. But it will go ahead, it will look at the dependency graph of what in a workspace relies on what else. So like, you can imagine the design system that slash UI is dependent on by almost everything, right?

[00:01:01]
Like, so it'll make sure it builds that first, and then it will do the other thing, and if it's like the built assets that we're relying on, it will build those, it will like all the stuff that you could write by hand, that you shouldn't write by hand, because somebody else wrote it by hand, is there for you. Like I said before, it will detect what has changed and whatnot. It will only rebuild the packages that depend on it.

[00:01:26]
So like, not only is it going to check what changed, but obviously if everything depends on those, uh, design system components, and the design system components change, well then rebuild everything, right? But if like one very high level, like just the menu bar changed or like maybe just the terms of service page, which is for some reason a micro front-end. I say that, but that's usually the case because like that lives somewhere else, so the lawyers can update it, then it will figure out what it needs to build and what it doesn't.

[00:01:59]
It will then cache all of it, but, you know, all you have to do is like get all the files. I'm sure it's more sophisticated than this, but the dumb version, find all the files in that like tree. Concatenate them all and get like an MD5 hash. Did it change? No, they're the same files. Guess what happens if you build the same files, barring you put a date.now in there somewhere, but you know what I mean?

[00:02:26]
Like, don't do stuff like that. Like, it won't, like it will make sure it doesn't do all that stuff, and then like you can declare all this stuff in one turbo.json, which lives next to that root level package.json of like, hey, when I say build, right, you can say run for, when I say turbo run build. We'll see this in a second, I promise. When I say turbo run build, go through all the packages, if they have a build script, npm run that.

[00:02:54]
They don't ignore it, right? So you're not going like, well, this package does, and if it doesn't, like you're just saying like, if I say build, if I say storybook. If I say test, if I say Playwright, all the packages that have that script, figure out the dependency order, do it, right, and you can even say like if I say turbo run Playwright. Well, I want to build all the apps first, right? So then you say it depends on building all the apps, so go build all the apps, it'll do all that dependency, then it will do the Playwright tests.

[00:03:27]
Basically all the stuff that I was telling you you have to deal with. That's why we skipped two sections, did this, and we'll jump back. Like, we, you just don't have to, right? So yeah, there are some honorable mentions. We're going to dig into Turbo repo in a second. We're going to, the other ones that might be interesting to you, there is, so the Adventures of Turbo repo on that, like, how much opinions does it have?

[00:04:00]
Not many. It's a turbo.json. It's like a turbo CLI-like thing that runs just either npm run or whatever, uh, that's about it. Nx comes from the Angular world. It is more opinionated. It's kind of like it has a structure that it imposes a little bit more strongly, uh, with but it also has stuff like then like code-generation and can manage like the linting across all of those things and the project structure.

[00:04:27]
It is more like a strongly opinionated version. Turborepo was like, yeah, I'll work with almost anything with the most basic npm setup. I'll mostly figure it out. And Nx is like, I will do more for you. I am more powerful, but you need to start like following my rules around here. And so, maybe, especially if you're in the Angular ecosystem, like 100%, yeah. And like if you've read through it and you're like, I could sign up for this way of life.

[00:04:56]
Then Nx is worth considering. We're going to play with Turbo repo today because like, I'm not assuming that you've signed up for that way of life, so we'll do the light and easy one to show you the value prospect, but it's there and again, there's like a comparison right up. Bazel, Bazel, I don't know how to, I've never said it out loud. Is you hear that like Google is 11 mega repo, right? This is effectively like how to do that yourself, right?

[00:05:34]
And so it can like ideally do stuff at like Google sized levels with multiple like languages, all of that stuff like if you don't know that you need this. You don't need it. Do you know what I mean? Like, you're like, I've outgrown all the rest of them. Like I am actually, um, you know, chief architect at like mega corp, right? And I have decided that I have the power to opt our entire company into this way of life.

[00:06:01]
This is here for you, right? So like it exists, and, if you want to be a hero, you can be like, go pitch it to the chief architect and like, you know, lead that and then you get promoted to principal real fast. But like, generally speaking, it is the most extreme, most powerful, but like. It can run a Google sized, you know, thing for a reason.

Learn Straight from the Experts Who Shape the Modern Web

  • 250+
    In-depth Courses
  • Industry Leading Experts
  • 24
    Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now