Don’t Get Tangled in Your Own Code

Diana describes the benefits and challenges of organizing frontend code in a monorepo.

How to Manage the Code of a Growing Tool Suite?

Each of the Advisor Center apps runs in complete isolation, but they have many similar components and workflows which can be accessed across multiple tools. For example, this chart is used to illustrate the asset class breakdown of a portfolio across 3 separate applications under the Advisor Center umbrella (Expected Returns Analyser, 360 Evaluator Tool and Portfolio Centre):

Monorepo Wins

To avoid duplication and scale better while working on a rapidly expanding code-base, we decided to structure our Angular front-end code using a monorepo. We chose to use NX, which is a build framework that offers great support tools for managing frontend monorepos. This decision was a game changer and brought us quite a few benefits.

Monorepo Challenges

In spite of the many advantages they offer, monorepos are often avoided because of the downsides they bring. The two challenges that have significantly impacted our development workflows have been the added build slowness and the emergence of circular dependencies.

1. Slow Builds

It’s difficult to ensure your builds are efficient when working on a large codebase. Slow builds delay the pull-request merges and code releases, and ultimately slow down the team’s development lifecycle.

nx:affected

NX offers some solutions that help speed up the build process. The one that’s made the highest impact on our build pipelines has been the nx:affected commands. The nx:affected command allows developers to build and test only the applications which are affected by the new code introduced. Leveraging this command has helped us greatly improve the build speeds of our applications.

Beyond nx:affected

Analysing our pull-request builds, we found that changing a small function which was only ever called from one application was triggering the build and the test runs for all of our apps. That seems odd, right? The reason this was happening was because the function we updated lived in a common library which was imported by many other libraries, and thus it was indirectly imported into all of our apps.

2. Circular dependencies, monster libraries and spaghetti code

Another issue we faced with structuring our project as a monorepo was the emergence of circular dependencies. Circular dependencies occur when a library A depends on a library B whose direct or indirect dependencies ultimately depend again on library A.

@nrwl/nx/enforce-module-boundaries

The @nrwl/nx/enforce-module-boundaries ESLint rule allows strict rules to be set in order to prevent projects from depending on anything other than the libraries that it’s supposed to depend on.

Better dependency hierarchy control leads to cleaner code structure

Having this rule in place does not forever prevent new dependencies from being allowed on a library. Developers can always choose to add another tag to the list of supported dependencies. However, this error gives us a chance to think about what the best choice is for maintaining a clean dependency hierarchy — should we add another tag to the list or would the code we need fit better somewhere else?

Bonus: Lessons Learned from Integration Test Coverage Reports

In this final section, I will describe how our integration tests help us find ways to build a better structure in our monorepos.

Could we remove some of our inter-dependencies?

This is how the report looks for the blog application - the code of each file in the repository that gets pulled into the app is visible, including the code of every dependent library.

Conclusion

Overall, using an NX monorepo has proved invaluable for the DDT team at BlackRock, especially in allowing us to promote better consistency and visibility while working in a global team.

Resources

If you’re interested in using the tools mentioned in this article, here are some resources to help you get started!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
BlackRockEngineering

Official BlackRock Engineering Blog. From the designers & developers of industry-leading platform Aladdin®. Important disclosures: http://bit.ly/17XHCyc