Nx Intelligence

What we have shown is already quite remarkable. We built two applications with two different frameworks using a shared library of web components. We can use same commands to serve, build, test the applications.

But Nx can do a lot more than that.

If we run yarn dep-graph , we will see the following:

Nx understands how our applications and libraries depend on each other. This is extremely important! To really improve the collaboration between teams and make sure that they can use each other’s work, the following two things must be true:

If the Angular team makes a change to the Angular app itself. Only the Angular app has to be rebuilt and retested. The same is true for the React team. Any tool that requires us to rebuild and retest everything on every PR will not scale beyond a small repository.

If any of the teams changes the ui library, both the Angular and the React applications should be rebuilt and retested before the PR gets merged into master. This is the only way to guarantee that the PR is safe to merge.

To see how Nx helps with this, let’s commit the changes we have made so far.

git add .

git commit -am "great commit"

Next, let’s create a new branch git checkout -b angularchange . In this branch, let’s introduce any change to app.component.html and run yarn affected:dep-graph --base=master .

As you can see, Nx knows that this change only affects the angularapp and nothing else. Nx can use this information to rebuild and retest only the angularapp:

yarn affected:test --base=master # only tests angularapp

yarn affected:build --base=master # only builds angularapp

Now, let’s introduce a change to greeting.element.ts and run yarn affected:dep-graph --base=master .

Both angularapp and reactapp are affected by this change because they both depend on the greeting component.

yarn affected:test --base=master # tests ui, angularapp, reactapp

yarn affected:build --base=master # only builds angularapp, reactapp

This is what we got:

If we only touch our code, we only have to retest and rebuild our code.

If we touch something that affects other folks, we’ll have to rebuild and retest their applications as well.

Because this is a simple example, the impact is easily deducible. But a real workspace can have a dozen applications and hundred of libraries. Ad-hoc solutions do not work at such scale — we need tools like Nx, that can help us manage those workspaces.