Supercharge your Angular development experience with Nx

Angular is a broadly used term that you must have been familiar with but Nx is a new term and something that is becoming popular in the software development industry. Before we proceed to learn about how Nx is used with Angular. Let’s learn a little about Nx.

What is Nx?

Nx is a smart, fast, and flexible build system with top-notch monorepo support and powerful integrations. It has a robust core and a rich plugin ecosystem.

Now you must be wondering what Monorepo is?

A monorepo is a source control repository that contains code for multiple projects. It offers various advantages, such as:

Shared code- It allows the distribution of code throughout an entire business or organization. Since we can reuse the common patterns, components, and types, this can lead to more DRY code. This makes it possible to share logic across the front end and the back end.

Atomic changes – without the monorepo strategy, we would need to coordinate changes across many repositories and possibly by various teams whenever we need to make a change that will have an impact on numerous projects. For instance, a client app and a server app may both need to reflect an API change. Monorepo significantly reduces the amount of collaboration required because all of those changes may be implemented in a single commit to a single repository.

Developer mobility- While employing a monorepo strategy, we can conduct related tasks in a unified manner even when using different technologies. Now that their changes are secure across the entire company, the developers can contribute to the projects of other teams.

A single set of dependencies – We ensure that our entire codebase depends on a single version of the provided dependency by using a single repository with a single set of dependencies. In this manner, there are no library version problems. It is also less probable that the less frequently used portion of the repository will have a dependence that is no longer valid because it will be updated as other portions of the repository are updated.

Why do developers, startups, and big companies love Nx?

• Build and test only what is affected
  Nx is smart. It examines your workspace and determines what each piece of code might impact. Nx only rebuilds what is required, so it doesn’t rebuild and retest everything after every commit.

• Explore visually
  An interactive dependency diagram for Nx is included to help you explore and understand your workspace.

• Visual studio code plugin
  Nx Console adds Nx-aware autocompletion and code lenses. It helps you generate components in folders, refactor your projects, create commands, and much more.

• Next-Gen cloud support
  Share links with your team members so they can look through comprehensive build logs and get insights on how to improve your project and build.

• Nx is fast
  Whether you build one project or a thousand, Nx employs its distributed task execution and compute caching to maintain the same CI time.

• Open platform
  The core of Nx is generic, simple, and unobtrusive. Nx Plugins are completely optional, but they can really level up your productivity. You can use Nx with any technology either by using Nx Core or one of the many Nx plugins.

Nx CLI

The Nx CLI differs from most command lines that accomplish a predefined task. Nx can be set up to work with a variety of tools and even languages.
It allows you to divide your codebase into different projects. The various components of the codebase can be operated and managed using commands from the Nx CLI.

These commands are classified into three categories:

• Acting on code (Build, Test, Serve)
• Modifying code
• Understanding the codebase

Acting on code:

A target on a single project is executed via the nx run command. You can also run nx [target] [project], which is a shortcut for nx run [project]:[target], for convenience.

NX build, however, is not bound to any particular implementation; rather, it is simply an abstraction over what it means to “build” projects.

Modifying code: Code is generated and modified by the nx generate command.

The same as nx run, nx generate is merely an abstraction of code generation. Using generators, nx generate can produce anything you choose. In order to meet your organization’s needs, generators can be installed as a plugin or created natively within a Nx workspace.

Understanding the codebase:

Based on import instructions in your code, Nx builds and maintains a project graph across projects. It then uses this data to only run executors on the affected projects in a codebase. Developers can also access a visual representation of the project graph to better understand the codebase’s architecture.

You can explore this project graph in a web browser by using the nx graph command.

The nx list command displays a list of all available plugins as well as the NX plugins that are currently installed. The generators and executors that are available for a plugin can be listed by the nx list command.

Mental Model

With a robust core, controlled by metadata, and extendable through plugins, Nx is a VSCode of build tools. Nx uses a few ideas to efficiently and successfully drive your monorepo. The mental model for how Nx interacts with project graphs, task graphs, affected commands, computation hashing, and caching is covered in these pointers.

• Your source code can be examined by Nx to produce a Project Graph.
• To generate a Task Graph, Nx can utilize the project graph and details about the project’s goals.
• To construct the lowest task graph for your PR, Nx can undertake code-change analysis.
• Nx offers calculation caching so that the same computation is never performed twice. This computation cache can be distributed and is pluggable.

Nx and Angular

For the Angular community and other developers attempting to manage ever-larger and more complicated development environments, Nx was developed to offer a better developer experience.

Making Things Fast

You don’t need to use any plugins if your main goal is to increase the efficiency of your monorepo by utilizing Nx’s affected commands, computation cache, and distributed task execution. Whether your monorepo contains React, Vue, Svelte, or even Go, Rust, or Java programs, everything will function in the same way. Nx is technology-agnostic.

Nx and Angular CLI

Ng and nx are interchangeable in an Angular CLI project if Nx is added (they invoke the same command). Therefore, you can substitute “ng build” or “ng affected” wherever “nx build” or “nx affected” are found.

Nx integrates well with the Angular CLI:

• It decorates Angular CLI. Running ng will launch the wrapped Angular CLI that passes through Nx when you add Nx to your workspace. However, everything will move along much more quickly.
• All Angular Devkit builders and schematics are supported.
• It supports setting up projects and their targets using angular.json.
• Angular CLI projects can use Nx Console.

People frequently don’t even realize they use Nx because this works so effectively.

Modern Tools

There are modern tools that help developers work more effectively and efficiently. These front runners provide support to Nx, such as:

• Jest (replaces Karma)- A zero-config JavaScript testing framework called Jest puts simplicity first. Jest is an excellent option for JS developers searching for a powerful, modern testing toolkit because of its clear documentation and feature-rich API.

• Cypress (replaces Protractor)- Cypress offers quick, reliable E2E testing for all browser-based software. Cypress features real-time reloads, readable errors and stack traces, time travel debugging, and more.

• ESLint (replaces TSLint)- Your code’s issues are found by ESLint using static analysis, and many of them are automatically resolved in a syntax-aware way. ESLint can be fully customized; you can use it to preprocess code, create custom parsers, or write your own rules.

• Storybook- Storybook is an open-source tool for designing UI components in isolation. It is an ideal platform for design systems that can be used across a complete brand, including apps created with a range of frameworks and libraries.

Final thoughts

Nx is useful for a wide range of other things as well. For instance, one of them is updating current AngularJS applications. Nx gives you a command to set up a hybrid app in seconds.

You may always contact us if you have any questions. We would be glad to help you!

Additional Resources:

https://github.com/nrwl/nx

https://nx.dev

https://monorepo.tools

https://nx.dev/packages/angular