Developer Meetup - How to Refactor Legacy Code?
Tags: webdev, typescript, refactorit, reactnative
Published: 2023-01-15 11:44:52

Before anything, a meme for fun:
![Refactoring Cat GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qpjyq9xtkanftun79ys.gif)

---

Over this weekend, I attended a developer meetup (class) on how to refactor legacy code. This article will be split in 2 sections:
- Part One: What are Developer Meetups?
- Part Two: Refactor Legacy Code - Gilded Rose Kata Exercise

---

## Part One: What are Developer Meetups?
### Why attend?
To learn something new, meet new people, learn new perspectives. Learning from the same colleagues will plateau at some point, good to see fresh ideas.

### What is the [meetup app](https://www.meetup.com/)?
- events where developers (or other interests) can meetup, doing stuff like
	- networking
	- coding
	- listening to talks
- quite dull during COVID, now its frequent
- monthly [AWS Developer meetup](https://www.meetup.com/aws-sg/)
- monthly [Junior Developers Singapore meetup](https://www.meetup.com/junior-developers-singapore) (Coding Lessons / Talks)
![JuniorDevSG Talk (Security)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36nxskmarfsfxz12ube4.png)
- monthly [Tech Talks by Thoughtworks](https://www.meetup.com/tech-talks-thoughtworks-singapore/)
![ThoughtWorks Talk](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr5y5bsb9j812otcgq0c.png)

### Why I attended?
- we all experienced legacy code that we don't know what the hell does
- because our code is 2 years old (talked to a Ads Solutions Architect from Google, she said they even have code 10 years old that absolutely no one knew what it did)
- I actually want to make the codebase better
![Good Coding Practice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7x40t9uaylhvl1o7d0vp.png)
- finally found energy to attend (tbh too tired from work for months)

---

## Part Two: Refactor Legacy Code - [Gilded Rose Kata Exercise](https://github.com/emilybache/GildedRose-Refactoring-Kata)

### Introduction to Refactoring
- MAIN PURPOSE: No one goes around saying, I'm feeling bored today, let's refactor some code (unless you're hyperactive like me). Most times, we refactor when too much technical debt has accumulated, and you are unable to add new features
	- (so my collaborator in this class works at a property website [99.co](https://www.99.co/), and I commented on the comprehensiveness of current features. He said their product managers still have many ideas they want to implement -- so there's ALWAYS new features to add!)
- Key Ingredients: (1) Product Requirement Documents (PRD), (2) Legacy Code
- Beyond User Acceptance Testing (UAT)? There might be some features not in the PRD.
	- Take data dump of database for backend.
	- On frontend, how?
![Golden Master Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytr5lbcuo10a2i35k1km.png)
	- I suppose we can put in a variety of inputs and record the outputs.
	- Validate that inputs and outputs are as expected, and save it as a golden standard to reproduce after the code is refactored.
- Most Opportune Time to Refactor? Prior to Regression Tests. Since we have well-defined QA and UAT Regression Test where they will re-run ALL tests, if there is any code that really bothers you, best time to refactor is before they begin that. Worst time to do is after they finish that 😆
- Strangler Fig Pattern
![Strangler Fig Explained](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e14gcixa520brr94fqmn.png)
![Strangler Fig, Tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkbpnul6xuvyodkzydx0.png)
	- refactor gradually
	- rather than re-write entire codebase, and take ~2 years to reach feature parity, and competitors can overtake you, better to do it feature by feature
	- optionally, use feature toggle to change control flow dynamically. Able to rollback when a problem occurs.
		- How to do for our context of APP?
		- For an APP, I suppose we can wrap a feature we are not confident about in a JSX.Element. We then use a BE API-returned boolean value for the JSX.Element to decide whether to show the feature. If we put the boolean prop in the FE, users have to redownload the app to see the updated version. That is bad. Forced updates are worst
```
<FeatureControl toggleOn={loanCardFeatureToggle} />
  <LoanCard {...props} />
</FeatureControl>
```
![APP Forced Update](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xcrqzd7xlm8y3h39gf8w.png)

### Exercise: Gilded Rose Kata
- Step 1: High Test Coverage
	- code itself is 69 lines long, just 1 function to refactor, but it's written in pure if-else
![Gilded Rose Kata Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4l91eqaimd981507kr2e.png)
	- requirements kinda short but convoluted, intentionally done
![Gilded Rose Kata Requirements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttib4uxj2ncfalvdj6x0.png)
- Step 2: Refactor the Code
- Step 3: Add New Feature
- Everyone has different approach, so see NEXT >>

### Next: Present Answers to Class (28 Jan)
- my github repository currently: https://github.com/c6z3h/TS-Gilded-Rose-Kata
- maybe try to refactor the Class Component to Functional Programming
- maybe get some Code Review
	- **code smells, rule of thumb, if it doesn't make sense first time, can leave a ~discussion comment. Helps the coder with blind spots**
- go to AWS Developer Meetup right after!!

---

## The end!
- hit me up if want to learn more about / work through Gilded Rose Kata together,
- or you want more information about these meetups, or
- if you want to go together!