2/19/2018Time to read: 2 min
It's intimidating to jump into a large JavaScript codebase. In my opinion, the dynamic nature of JavaScript makes it harder to understand the codebase due to the lack of static analysis. IDEs are not quite helpful in providing autocompletion and documentation either. In this post I will share some of the tips I learned while working with our legacy single page app.
If you are a junior dev just starting to work on a legacy project, chances are, the feature you need to accomplish is relatively easy. Most likely, other engineers have already set the foundation for you to build upon. In this case, it's best to ask for an overview of the system. This is the fastest way to learn about the system. Don't feel bad about bothering other senior devs. This is part of the onboarding material that you suppose to get.
Hopefully, people have written down some guides on how things work inside this project. In our company, we use Confluence wiki for those guides. I recommend reading the guides if they are up to date. When I worked on the routing system of our app, I also wrote a very detailed guide on how to use the routing system so that future developer can have a better understanding of how routing works.
Once you have a basic understanding of how the system works and where your changes should go, you can dig deeper into the area related to your feature. One thing I do the most is to right click on the line number in IntelliJ and annotate. This does a git blame and finds out the last commit that modified this line. I can look into the commit to find out why the previous developer changed this line, or even talk to this person is he/she is still in the company.
Browsers like Chrome also provides some awesome tools for debugging JavaScript. If you know the general location of the code you are interested in, you can open the JavaScript file in Chrome dev console, and set a breakpoint on it. When reaching the breakpoint, you can inspect the local variables and step through the code. (I might have another post on how to use Chrome dev console in debugging JavaScript)
Unit tests are a very useful way to describe the specification of a piece of code. It shows how the code should interact with its dependencies without worrying about how the dependencies are implemented. Hopefully, the legacy project you are dealing with have some unit tests. If you have an assumption about some code, you can also add a unit test to verify that. By doing that, a future developer might find it helpful when they have the same assumption.
Those are some high-level ideas on understanding a legacy front-end project. As you learn more about the project, you will find it easier to navigate inside the project. If you know something very well, don't forget to share with newer developers. Write a wiki, add a unit test. Maybe one day you can save a new developer from pulling his/her hair out.
I also highly recommend reading Working Effectively with Legacy Code by Michael C. Feathers. This book contains all kind of useful tips for working with legacy code. Some of the ideas in this post are influenced by this book.