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!

Angular: front-end from start to MVP

by Kate Sky

I am making this post as the first step in documenting my journey of building an Enterprise application for my side project.

The application is in the process of going towards an MVP.

This application is an “Uber for home services.” 

The reason I had started this project: is to provide a value-based service while practicing and teaching others skills I had acquired over the years.

The objective of this post is to establish a timeline of the application going live from its infancy.

Following is the list of topics that we are going to discuss in this article:

1. Application Stack
2. Architectural decisions
   1. Monorepo with Nx
   2. Domain-Driven Design with Angular
   3. State management with NGRX
   4. Logging with LogRocket
   5. Authentication with Auth0
3. Conclusion
4. Links

1. Application Stack

WEB- Angular
API – .Net Core
DB – SQL server

2. Architectural decisions

For web client, I am using Angular framework.

My goal – to be able to scale the development of this application by having the ability to go from one team to many teams building multiple frontend and backend applications all in the same workspace. 

I chose NX, so developers have a holistic dev experience powered by an advanced CLI (with editor plugins), capabilities for controlled code sharing, and consistent code generation.

Monorepos allow huge enterprise applications to be subdivided into small and maintainable libraries. I followed the best practice from the creators of NX and have added a domain-driven design approach to creating the features. One of the features is the search capability for the providers that are displayed. I added a domain ‘Providers’ it contains the feature store for state management and the infrastructure where service is implemented to call the API.

We need to first define criteria for slicing our application into individual parts and we must establish rules for communication between them.

referenced: https://www.angulararchitects.io/aktuelles/sustainable-angular-architectures-1/

I have added NGRX from the very beginning because I would like to have an ability to replay the user’s trip through the application, and I will be adding LogRocket to view that path. NGRX will also help me write clean reactive components with async pipes. Root store has its own module and is at the root of the application.

Stop guessing why bugs happen. LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster.

https://logrocket.com/

Since we have 2 features now, we can see that NGRX stores for each feature are located near the domain for each feature’s library. There is separate module for each store to be able to import each feature module lazily.

Users have to register, and for authentication, I picked Auth0. Right now, you can see that authentication is on the root store. I have a login and logout actions that are calling the service to execute the correct code. I am using the service I download from the example provided by auth0. It still needs to be cleaned up. 

I added a component for the callback path need for the login of the authentication. There is a CanActivate guard that is used for components that need an authorized user.

3 . Conclusion

In conclusion, we will go through whats next.

I wanted to get the frontend started first and have a clear user experience throughout the application.

I will add the .net Core API to store the data to the database next.

I deployed code to GitHub pages to be able to get user feedback at the very early stages of this application.

4. Links

Code: https://github.com/katesky/saraphan-radio

Dev version: https://katesky.github.io/saraphan-radio/

Domain: http://saraphanradio.com