Streamlining Application Development: Nx Monorepo’s Transformative Impact for Angular Developers.
In the fast-paced world of enterprise software development, I discovered Nx Monorepo as an Angular developer when I worked on a team converting AngularJs project to Angular, the latest version 14. That was my first time working with nx on a production code, and I was so excited because I learned it in my free time and was eager to see all the benefits it would provide. This tool became a game-changer in streamlining the project, ensuring code quality, consistency, and developer satisfaction. It’s a transformative step that streamlines development, unites teams, and enhances efficiency. Do you want to be the hero on your team? Keep reading, and you will have all the tools to get your team to be on top of their development game.
In this article, we’ll explore how Nx Monorepo facilitates Angular development and provides practical steps for you to get started. But that’s not all. We’ll also delve into the challenges I faced when introducing Nx to my team, offering insights into how to move your team toward its adoption. Additionally, we’ll discuss the advantages of having this skill set, not just for your projects but also for your career growth. Join me on this journey to revolutionize your approach to building software solutions and empower your team for the future.
Let me begin by introducing myself. I’m Kate, and I’ve been involved in enterprise software development for the past 25 years. My time consulting at HeroDevs has been a highlight of my career, and I take pride in being a part of the team here. I specialize in web development using the Angular framework, although I am a full-stack developer.
New Team
When I joined my current project, it was already well into the advanced stages of development, with the beta version on the horizon. The team handed me a set of urgent user stories, and the deadline was rapidly approaching. In our current setup, each team operates within its own dedicated repository, with some teams already successfully utilizing Nx.
We’re currently immersed in a micro-frontend architecture project, creating a web component using the @angular-elements library. In the initial stages, we encountered a significant challenge: our unit-test coverage was alarmingly low. We found ourselves heavily dependent on the QA group, which isn’t an ideal situation. Our primary objective was to boost our unit test coverage to an ambitious 80%. However, given that a substantial portion of our code remained untested at a mere 30%, we had no choice but to allocate an entire sprint solely to the task of writing unit tests. Despite our dedicated efforts during that sprint, we still fell short of reaching the 80% target.
Let us get started with Nx
After our second production release, a significant challenge emerged: the integration of a substantial new feature. I was tasked with enhancing our approach to state management and component architecture. Simultaneously, we needed to plan a strategy for facilitating bi-directional communication in our micro-frontend setup.
One of my favorite features of Nx is the caching of tasks. Executing commands like build and test can be resource-intensive when working with a large codebase. However, Nx employs a computational cache, ensuring it doesn’t unnecessarily rebuild the same code. With a limited number of sprints available before our upcoming release, I began advocating for the adoption of Nx within our team.
Making the team believe it’s the right thing
The initial step involved asking them if they were prepared to learn about the benefits of integrating Nx into our repository.
I created a task with the benefits of using nx. My primary goal is to ensure that other team members feel comfortable integrating this new and complex technology, thus minimizing potential adverse effects.
**1. Standardized Libraries and Applications:**
Using a mono repo approach, you can ensure that all repository applications use the same versions of libraries like Angular and, RxJS, NgRx. This helps maintain consistency and reduces the chances of compatibility issues arising when different projects use different library versions. With the new feature’s introduction, we plan to incorporate additional libraries. This strategic move allows us to run independent unit tests on the freshly added code, thus reaching the goal of 80% coverage, seamlessly integrating NgRx for state management, and introducing reusable code components essential for integration purposes. Moreover, we’ll extend our project by including a new app designed for micro frontend integration within our workspace, thus laying the foundation for enhanced code reuse and collaboration.
**2. Computational Cache for Building Artifacts:**
Nx provides caching mechanisms that can significantly speed up the build process. Cached artifacts can be reused during local builds and within the PR/main processes, reducing build times and improving developer productivity.
**3. Dependency Graph and Management:**
Nx provides tools to visualize the dependency graph between different projects, making it easier to understand how different components are interconnected. This visibility helps in making informed decisions about code changes and minimizes unintended side effects.
**4. Better Developer Experience:**
Nx workspace tools offer features like code generation, code linting, testing, and more, all integrated within the mono repo setup. This comprehensive tooling enhances the overall developer experience and makes it easier to manage and develop different parts of the project.
Let the work begin
I was thrilled to kickstart our Nx journey. One of my initial tasks was to set up the workspace, which, fortunately, didn’t pose too many challenges. The only missing piece in our project was ESLint, which did require some time and effort to address. However, I welcomed the challenge, and by the end of the day, we had made significant progress.
As we continue our journey of adopting Nx, local caching remains my favorite feature.
I hope this article has been helpful, especially for those of you dealing with complex architectures, particularly when developing web components and creating multiple bundles for integration. Nx proves to be a valuable solution.
So far, we’ve developed two applications and five libraries, achieving a remarkable 85% to 100% unit test coverage for all new code. We’re still exploring the full range of possibilities that Nx offers, and I’ll be delighted to provide updates as we make progress.
Conclusion
I’d like to emphasize that Nx isn’t limited to Angular; it’s also prominent in the React world. While it’s particularly popular in multi-team environments, my experience showcases another compelling use case.
Having this versatile tool in your toolbox can significantly boost your career prospects. Consider diving deeper into Nx, and advocate for its use in your workplace or project, and you’ll discover that it could be the key to unlocking your next career advancement. Thank you for joining me on this Nx journey, and here’s to the exciting opportunities it brings!