How to Optimize Full-stack Development with Monorepos & Nx Monorepo
Tags: fullstack, javascript, webdev, programming
Published: 2022-12-02 01:18:33

In my full-stack development journey, I've used many technologies. The problem is that some take a lot of run-time and some applications have many sub-components which can overly complicate the codebase for a developer.

There are two things that I've found addresses this problem on a high level:

- Monorepo Migration
- Using Monorepo Build Tools like Nx

# Monorepo Migration

## Introduction

### What are they?

Monorepo (or monolithic repository) is a concept that essentially lives up to its name, all code in a project is put into one (mono) repository. For a MERN full-stack application, this involves placing the client, server, database, and any other code in the same repository.

### What big tech uses them?

Monorepos have been widely adopted in big tech companies like Google, Meta, Microsoft, AirBnB, Uber, and Twitter.

This is because of the advantages we will discuss in the next section.

An interesting fact is that [Google's monorepo](https://dl.acm.org/doi/10.1145/2854146) is speculated to be the largest in the world, handling tens of thousands of contributions every day in a repository that is over 80 terabytes in size!


## Advantages

- Collaboration
Teams that develop over monorepos all have access to the entire codebase, making it easy to collaborate in different projects.
 
- Reusing Code
A good example of this can be the use of libraries. If a project hypothetically has a lot of areas in different sub-project codebases using a specific project, instead of copying over the code to each sub-project (i.e. client, server), one can just reuse the same code which is a better Software Design and more consistent.


- Dependency Management
Similarly to my above point, if there are some global dependencies in a project, one can just use the same one across the project instead of installing it multiple times for the same functionality.

- Large-scale Refactoring
This refers to the impact of change that a developer/team has when working in a monorepo. Contrary to projects spread out across various repositories, if there is a bug in a piece of code that exists in multiple repositories, it can be fixed one time which is much more efficient for developers. 

## Limitations

- Storage Size
As clearly illustrated by Google's monorepo, these can get REALLY big, actually classifying it under the branch of "ultra-large-scale system". Google has many researchers working on maintaining this, but the large storage size is definitely something to consider in the long run.

- Project Individuality
The identity of a sub-project can get lost in a large monorepo, which can undermine the difference between a small-impact sub-component of a system vs. a large one.

# Monorepo Build Tools (Nx)

We now move onto [Nx](https://nx.dev/) as a built tool.

## Benefits
This tool provides the following benefits:
- Prevention of useless rebuilding
If some part of your app wasn't change, doesn't rebuild it again (which personally save me A LOT of time)
- Distributed task execution
Leverages CPU parallelization to optimize task execution when running apps in a monorepo.
- Remote caching
Helps caching on the scale of teams, helping make team development more efficient.

## Usage Examples

In my time working with a tech startup, I had to work with this library called [Storybook](https://storybook.js.org/).

A short description of its functionalities is that it assists front-end development by creating a self-hosted application that helps visualize front-end components before they are injected into an application.

A use-case of this is that one may want to develop a live-chat but doesn't want to load it into a full-stack application and modify it as a subpart of a page. It would be better for them if they can develop the live-chat front-end component independently and when its done, inject it into the page.

This is where Storybook comes into play. For the sake of its connection to my article, we will focus on the fact that it renders an entire viewing sub-application that visualizes each front-end component a user makes.

The process of running this is very lengthy as it requires alot of computation to execute an entire application to test things out.

Nx Monorepo helps us optimize this process because of its CPU parallelization and dynamic caching systems. It both speeds up the process of initially rendering the entire Storybook viewing application and it caches the entire thing so we don't rebuild every single component when we change only one for the sake of development.

## Organization Scaling

Nx also provides the benefits of helping scale an organization. It provides functionalities to control the sharing of code, automate code creation and modification tasks (e.g. README file editing), and architecture diagram generation.

I specifically found the architecture diagram generation fascinating and very useful as developers can generate architecture diagrams on demand in case they need to present their current project at a meeting, letting them focus on developing more features instead of playing around with a diagram.


Hopefully this article served as a good introduction to Monorepos and how toolings (like Nx) could help improve your development experience!