You open up your computer, spin up a command line, and type ng new MyNewAwesomeProject, cd into the new project directory, run ng s and start a journey with a brand new Angular project, with the latest dependencies and stuff. Feels awesome, right? Well, sadly, this is not something we would have to deal much in our day to day life of Angular developers, as much as we would like it. In reality, we would most likely have to deal with a project that has been created and maintained by other developers. And there are times that those legacy projects aren’t developed in adherence to the best practices of the industry. It is very important to try our best to refactor a project like that to a degree that will make it easier to deal with it.

Before You Start

If you see a project ridden with problems and bad practices, it might be tempting to start refactoring right away. But it is important to clear up several issues before getting to work:

• Make sure management and/or the client actually agrees on the need to refactor. Sometimes, especially on outsourced projects, the clients are just content with how the things are, and are unwilling to pay for more time spent on something the benefits of which they cannot visually comprehend. So it is important to clarify any such bold move with management.
• Make sure your changes won’t break the entire codebase. Understand the exact scope of what you want to change and can change, the stuff that you want to change but do not have the time to do, and the stuff that is so messed up that you don’t want to touch it for the time being.
• Create a separate git branch and work on, so you don’t disrupt the usual workflow. Pull from your main development branch regularly to reduce the chances of painful code conflicts. We’ve gotta change lots of code!
• Divide your process into clearly defined steps. This is what this article will mainly be about
• Some steps will be way easier to implement and bring way more benefit in the form of performance, bundle size and code quality. Start with steps that are easier, and among them choose those that bring the most immediate improvements.

So, we have made sure our changes are welcome, and we have enough time to work on it. Let’s get to work!

#angular #javascript #web-development