How to add a new feature to an existing component?

Question

We have this legacy image viewer component in our project that's working fine but it's source is a real mess. I have to add a new feature to this component so that people can add annotation to images using a light pen which is not a complicated task per se but could be a nightmare dealing with our existing code.

I'm really confused right now I don't know where should I start . do I have to refactor the existing code?if not what else can I do?

So here's my question: What could be the best (less painful) approach dealing with such situations?

Answer 1

Write lots and lots of tests that will allow you to verify that changes you make to the system do not change or break existing functionality.

These tests are like the brace-work that is used to support a physical building when a construction crew is doing reconstruction. That brace-work is used to keep the existing infrastructure intact. You need to preserve the infrastructure of your system with as many unit and integration tests as you have time to write.

These tests will allow you to make small, iterative changes to the system and easily verify that those changes still maintain the expected behavior.

Answer 2

The question is not an exact duplicate, but this exact same answer applies (you just have a list of one change)

http://stackoverflow.com/questions/1386824/hired-as-a-developer-to-maintain-and-update-current-code-base-no-docs/1386844#1386844

Answer 3

You should read this very good article Big Ball of Mud. And for your answer we all get a big ball of mud at some point and we need to add new functionality to it. Re-factoring such a code is not a good idea since it require alot of testing. But adding few new lines will not harm it. So unless you have alot of time and so does the tester just add the new functionality to your existing code. Although the current code look messed up but remember it works and tested. Read the article and makeup your mind as to which approach is good.