DEV Community

Cover image for Story of a Developer who Regretted Not Choosing Monorepo and Nx
Daniel Glejzner for This is Learning

Posted on • Updated on

Story of a Developer who Regretted Not Choosing Monorepo and Nx

Story of a Developer who Regretted Not Choosing Monorepo and Nx

Art created by MidJourney AI

All illustrations have been generated by MidJourney AI specifically for this article :)

Chapter 1 — The Exciting Adventure Begins

Art created by MidJourney AI

As our daring developer embarks on a new quest to build an app, he starts with a simple frontend application, focusing on a clean UI and user experience. At this stage, the monorepo concept might seem like an overkill, but the developer is about to discover the benefits of this approach in the chapters to come.

Chapter 2 — The Backend Twist

Art created by MidJourney AI

Our developer progresses and encounters the need to consume a public API, but alas, it requires modifications. Fearlessly, he created a separate repository with a Node.js backend to craft a proxy API for the frontend. This backend repo houses the logic for HTTP requests, response processing, and data communication with the frontend.

Chapter 3 — Duplication Struggles

Art created by MidJourney AI

While working on both apps, our developer stumbles upon a growing issue — code duplication. Both frontend and backend apps share the same data models and validation logic. To avoid the curse of maintaining two sets of identical code, our intrepid developer opts to create a shared library.

Chapter 4 — The Shared Code Rises

Art created by MidJourney AI

To combat duplication, the developer forges a shared code repository containing the common code needed by both frontend and backend apps. This repository transforms into an NPM package, sharing data models, validation logic, and utility functions across both apps like a bridge between two worlds.

Chapter 5 — Juggling Repositories

Art created by MidJourney AI

As the app evolves, managing multiple repositories becomes a complex dance. Keeping the NPM versions synchronized in both apps turns into a tedious task. Our developer craves a simpler, more efficient way to streamline his development process.

Chapter 6 — The sudden need for a Mobile App

Art created by MidJourney AI

The app’s popularity soars, and the users voices echo the demand for a mobile version. Our developer takes up the challenge and sets out to create an Ionic mobile app that harnesses the power of the existing backend API and shared code.

Chapter 7 — Giant weight starting to crush

Art created by MidJourney AI

To bring the mobile app to life, the developer spawns a new repository for the mobile app code. This app must utilize the same backend API and shared code as its frontend counterpart. Consequently, the developer now finds themselves maintaining a quartet of repositories: frontend, backend, shared code, and mobile app.

Chapter 8: The Struggle of Tedious Maintenance

Art created by MidJourney AI

Juggling multiple repositories becomes a time-consuming, error-prone endeavour, particularly when maintaining numerous CI/CD pipelines. Our developer realizes he must refactor his codebase with the monorepo approach and Nx Devtools. This way, he can manage all his code within a single repository, slashing the time and effort needed to maintain multiple repositories.

Chapter 9: A Journey to Modularity

Art created by MidJourney AI

During the refactoring odyssey, the developer uncovers the hidden coupling lurking in their code. He ventures forth, refactoring the app structure to foster modularity and decoupling. Nx Devtools and Monorepo pattern becomes their trusty tools to create libraries containing the shared code used across the app. This modular approach paves the way for easier maintenance and code reuse throughout the entire application. Module Boundaries rules make sure everything stays in the right place.

Chapter 10: The Moral of the Story

Art created by MidJourney AI

The saga concludes with the revelation that Nx Devtools and the monorepo approach can propel app development to new heights of efficiency and manageability. By breaking down and unifying code in a single repository, developers can save time, minimize errors, and streamline their workflows. Nx Devtools empowers developers to elevate their app development process, simplifying the journey from start to finish.

Even if you are not planning to have multiple apps straight away. It doesn’t cost you anything to start your journey with monorepo. Nx provides options for standalone apps as well. I cannot find an argument that would prevent me from starting with it every time.

Can you? Let’s discuss :)


I hope you liked my article!

If you did you might also like what I am doing on Twitter. I am hosting live Twitter Spaces about Angular with GDEs & industry experts! You can participate live, ask your questions or watch replays in a form of short clips :)

If you are interested drop me a follow on Twitter @DanielGlejzner — would mean a lot :). Thank You!

Top comments (4)

Collapse
 
designbyonyx profile image
Ryan Wheale • Edited

This story describes our company to a <T>. We explored nx and Turborepo and couldn't be happier with Turborepo. Both are great, but turborepo just felt lighter, less config-y, and more geared for react projects (albeit probably not quite as powerful as nx).

Collapse
 
oz profile image
Evgeniy OZ

The illustrations are amazing!

Collapse
 
danielglejzner profile image
Daniel Glejzner

All illustrations have been generated by MidJourney AI specifically for this article :)

Collapse
 
corentingosselin profile image
Corentin Gosselin

100% agree
For each of my new project I use Nx
However it could intimidate for a first approach. There is no many great real world example with fancy architecture.