Why NX == Modern Web Development

I am in the process of setting up a Monorepo which will contain many large apps and libs, and I've absolutely fallen in love with NX.

I've done a lot of research into NX the past few weeks and here's what I've found.

The benefits I see in migrating to Nx:

1. Upgrading Angular -- The "nx migrate" commands from reading, seems to make upgrading your version of Angular much easier by letting you complete the migration in a multi-step way instead of all at once: https://nx.dev/latest/angular/core-concepts/updating-nx

   1. Another benefit here is that you can upgrade all your libraries/apps at the same time, rather than having some lib fall behind a version of two of Angular, or managing getting all the repos upgraded separately, then linking them and finding more issues you need to resolve due to the upgrade.

2. Only run commands on affected project with "nx affected" -- Lets you auto test all libraries that have been affected by updating one library, on the pipeline this will be very handy as all affected libraries will auto build, and you can have your CD auto publish too.

3. Reduce redundant computations with the computational cache -- is great at when you are constantly running nx affected test, build, etc commands you don't want to re-run the same tests when the code hasn't changed.

4. The tags are great for enforcing code boundaries -- You can make sure certain libs don't depend on other libs, especially great when you have lots of less UI focused people in the code base as they will get a Lint error instead of a big PR comment (after they've worked so hard on a feature).

5. The mindset behind NX -- In my mind NX equals modern Web development, as in they are always pushing for the latest and greatest technologies, tooling, and creating extra tooling to help remove redundant repetitive tasks, and this is the default! Just looking at the defaults you can see this: ESLint vs TSLint, Cypress vs Protractor, Jest vs Jasmine/Karma, Prettier set up for formatting.

   1. Along the same lines, it helps you push your argument to use new modern technologies -- As once people in your organisation can see the efficiency that NX provides they'll start to have confidence in it's defaults (rather than Angular's) and the plugins it provides (example: see how easy it is to add a storybook with NX, let's introduce Storybook to our project! is a much easier sell with NX already in the org).
   2. Same could be said for NGRX and the tooling it adds to help with adding and setting it up.

6. Helps you create your own automation -- by providing generators for creating generators (ng schematics) and executors (ng builders). NX makes it much easier to get started adding your own automation tooling (creating generators and executors).

7. The Dep Graph is a wonderful way of viewing how your project dependencies are set up -- The moment you create one manually it's out of date, so an auto generated one is very useful.

8. Encourages smaller more modular libraries & code reuse -- which should result in smaller bundle sizes as you won't libraries depending on other large libraries that has lots of code that is not needed. This also speeds up all your commands as you are testing, and building smaller libs.

9. NX Cloud allows you to share your cached command output across the team -- reducing redundant computations, which will speed up commands. It also comes with a nice GitHub bot for displaying build information. I'm not using this feature but I have tested it and it's a pretty cool idea which works well.

10. Setting global rules -- Example: setting the same ESLint rules across the project. Anytime I have to give a PR comment I consider adding a Lint rule to catch it so it's automated. I have a list of rules that I want in all my projects, it's been a pain adding them to every project. With a Monorepo I can add it once and all the projects have it. Another example is adding a Prettier pre commit hook, if you want to add it to all projects, that may be a lot of PRs.

11. Setting consistent standards -- Similar to my previous point, it's easier for example to have all your prefixes be named in a similar manner when you can do the update all at once and see all projects easily in one place.

12. Explorability & learnability -- Monorepos are fantastic for learning about how projects work and seeing patterns and strategies in action. Previously I would have all my apps and libs cloned down to a UI folder, I'd pull down their develop branch on all repos, then open that UI folder in VSCode, and do global searches to find examples. Monorepo removes this need as I have all the examples I need in one place. This is really useful for junior devs also.

13. The VSCode NX Console plugin -- is extremely useful in exploring all your CLI options for generating apps & libs, and running the different commands like build, test, serve affected libs/apps.

    1. The auto dry run output makes it easy to understand what CLI commands are being created before initiating the command.

14. Migrating from an Angular project to an NX Workspace -- is well documented and there is tooling available. I haven't kicked off the process of migrating but from looking at the docs it looks fairly straight forward to turn an Angular app into an NX workspace, and migrating libs into it.
    https://nx.dev/latest/angular/migration/overview

    1. This command will migrate your project to an NX project: ng add @nrwl/workspace
    2. They have great steps on migrating projects into the Monorepo too: https://nx.dev/latest/angular/migration/overview#migrating-libraries

15. You can use NX even if you don't use Angular -- It supports NestJS, React, and other frameworks too.

Foot Note

This is my current outlook on it and I hope it doesn't change. I for one find that NX solves many problems and frustrations I've had working on a very large number of large apps and libs.