Why We Are Using Nx at Cheveo

Speeding Up Development with Nx Monorepo

In modern web development, efficiency and collaboration are key to staying competitive and delivering high-quality applications. Especially considering that a lot of repositories grow exponentially with time. One of the most powerful tools to achieve these goals is Nx, which provides an innovative approach to managing many different JavaScript/TypeScript Frameworks, like Angular, React, Vue, NestJS and even Golang or Rust projects are supported in the meantime. In this short introduction we will explore the main benefits of using an Nx powered monorepository over multiple repositories. Also we will dive a little deeper into its extensive build capabilities and collaboration features that make it a game-changer for developers.

Why Using a Monorepo In The First Place?

To elaborate on this I created a small comparison matrix to present advantages and disadvantages side by side.

decision matrix for using a monorepo Decision Matrix on advantages and disadvantages of monorepositories

When working with multiple repositories, managing dependencies, sharing code, and ensuring consistent configurations can quickly become a daunting task. Nx eliminates these issues by centralizing your projects within a single repository. This allows for a streamlined development workflow where you can manage shared libraries, configurations, and dependencies more efficiently. Developers can make changes across projects with confidence, knowing that updates will propagate seamlessly.

Nx monorepos promote by design the creation of shared libraries and components that can be easily shared across multiple projects. It not only reduces redundancy but also ensures consistency in design and functionality. Teams can build a library once and use it across various applications, enhancing development speed and code quality. This helps to organize your code according to the DRY Principle (Don't Repeat Yourself) and simple, which also relates to the KISS principle (Keep It Simple Stupid).

No more unnecessary publishing libraries to NPM or a private repository in order to share code across JavaScript projects. And if you still need to publish your library for whatever reason, Nx got your back. It provides easy to use generators that will do the code scaffolding for you.

Angular Publishable Library Example

nx g @nx/angular:library my-domain/ui --tags=lib,scope:my-domain,type:ui --importPath @cheveo/my-domain/ui  --publishable

This command generates the following Angular library scaffolding under the libs folder. It generates all the necessary files for a publishable library and adds a build target.

domain structure after creating publishable lib Directory structure after creating a new nx library to a workspace

Running the build target for the my-domain-ui project using Nx:

nx build my-domain-ui

Generates the following build files under the dist output path:

nx build output publishable lib dist folder output after executing nx build my-domain-ui

As we can see, Nx will generate all the necessary files to publish your library to any private or public NPM registry. Moreover, Nx will register the library under the paths array in the base tsconfig file for easy imports across the monorepo.

added path to lib domain in tsconfig base tsconfig.base.json

Enhanced Build and Test Capabilities

Nx takes build capabilities to the next level. With its sophisticated building and caching mechanisms. The caching mechanism of Nx is very intelligent. Every Nx task like build or test creates a computed hash in order to track changes in the underlying library/app. The caching mechanism can significantly reduce build times. With the intelligent caching mechanisms, Nx ensures that only the necessary parts are rebuilt, which results in faster development cycles. You can even use the caching mechanism remotely, if configured, so can profit from the speed advantages also in your CI/CD environment. Additionally, comprehensive testing tools and integration with popular testing frameworks, namely Jest and Cypress, enable developers to catch bugs and ensure code quality at every step.

Centralized Configuration Management

In Single App repositories, managing configurations for multiple projects can become wild. Nx simplifies this process, depending on the repository flavour, by allowing centralized configuration management. This means that changes to configurations including dependencies can be made in one place and propagated across the entire repository. This not only reduces the chances of errors but also improves maintainability. Developers can work on different parts of the project concurrently, merge changes effortlessly, and track the progress of various features. The monorepo's clear structure and shared configurations ensure consistency and reduce the chances of integration conflicts. You can implement consistent linting, formatting, and testing rules across all projects. This results in cleaner code, fewer errors, and a more uniform development process.

Summary

The benefits of using an Nx monorepo for projects over multiple repositories are undeniable. From streamlined development workflows to enhanced collaboration and build capabilities, Nx empowers development teams to deliver high-quality applications efficiently. By centralizing configurations, code sharing and dependencies, the Nx approach fosters a more organized and cohesive development environment. If you're looking to supercharge your development process, embracing Nx's monorepo architecture could be the game-changer your team needs. In further posts about Nx we will dive into Domain Driven Design in Angular, influenced by Manfred Steyer a core Contributer of the Angular Framework.

sources: https://nx.dev/concepts

Link to LinkedIn Post

Blog