Over the last few years, the demand for complex scalable architecture with independently deployable modules and loosely-coupled units has increased. Recently, one of our clients, who has an online chemical platform, requested a solution to develop a complex extendable architecture that allows cross applications communication over the process boundaries, including the capability to manage consistent releases and versioning of the project.
The customer has more than 15,000 registered suppliers and ~94k visitors per month, so the main business objective was to run all changes partially to be able to conduct A/B testing and support all up-and-running functionality.
As there were separate UI applications written in Angular already, our technical task was to migrate existing applications and add brand-new functionality written in React.js. Along with that, other requirements were to:
To cover all requested business and technical requirements, Grid Dynamics engineers decided to go with a micro frontend monorepo architecture solution. There are several points that led us to this decision:.
After comparing the monorepo build systems, we decided to choose Nx as a powerful application integration solution. We did a deep analysis of the Lerna and Nx tools to define which would be the most applicable for our scenario.
|affected projects rebuilding||+||-|
|packages publishing||may create only publishable libraries, not apps||+|
|powerful code generators||+||-|
|multi-technologies support (BE + FE)||+||-|
|linking multiple packages||-||+|
|packages/app dependencies visualization||+||+|
The decision to set up monorepo with Nx was based on the following Nx pros:
One of the most important criteria in the process of moving to monorepo is to define a step-by-step scenario of creating a new application and migrating existing ones. Below is a high-level diagram of the monorepo implementation flow that may be a start point for each specific project.
As a result of the monorepo setup, we achieved a fully maintainable, solid architectural approach with a set of modern auxiliary web development tools and an automation pipeline that helped us to work faster on tedious tasks, and visualize and analyze changes in a more thorough way. In the scope of this project, all business and technical requirements were resolved and met expected results. In conclusion, Nx proved to be a reliable solution for huge Angular/React apps.