From Martin Fowler Refactoring, definition of refactoring is

“Refactoring (noun): a change made to the internal structure of software to make it easier to understand and cheaper to modify without changing its observable behavior.”

In literal, it can be said that we are improving the structure and design of the code without changing the existing code's behavior. In software engineering, refactoring is a common practice during the development process. Its purpose is to enhance code quality, and the benefits become apparent in the long term when software improvements are needed.

When To REFACTOR ?

according to refactoring.guru website, there are 4 perfect times to do refactoring, there are :

1. When we add new feature

Imagine a situation where we inherit code from a previous developer, and the code is 'messy,' making it difficult for us to understand within the first 5 minutes. This can be frustrating for developers and can negatively impact productivity. Before adding new features, it's advisable to refactor the poorly written code first, so that the code's flow and functionality become easier to comprehend.

2. When we fix bug

When fixing bugs, one approach is to refactor the code. Refactoring can bring hidden bugs to light because of the cleaner code. Additionally, refactoring can speed up the debugging process and minimize development time.

3. When we code review

In such situations, collaboration with others is crucial. Code we write might not be easily understood by others, so it's important to conduct code reviews. Feedback from peers can be invaluable when refactoring.

4. Rule Of Three

The idea behind the 'rule of three' is that if you find yourself doing something similar three times, it's time to stop and refactor. One approach is to create reusable code components or functions.

The benefits of refactoring include:

1. Code becomes easier to modify.
2. Code becomes easier to understand.
3. It serves as a way to share knowledge among team members.

Implementation in PPL Project 2022

In PPL 2022, we used SonarQube to identify weaknesses in the application code. SonarQube provides information about coverage, bugs, code smells, duplication, and security issues.

Pay attention to lines 62 and 67. Due to the JavaScript hoisting concept, all variables are moved to the top scope. Therefore, line 67 is considered the first occurrence of the variable 'responseData,' making the 'responseData' variable on line 62 a duplicate. This can confuse team members, so I have modified it to:

const responseDataError = await response.json()

this is also because the variable represents error data sent by the API.

Another refactoring involves changing the hardcoded backend URL links. Following the rule of three, this hardcoded value has been encountered more than three times, so I decided to create a new function to retrieve the correct 'BE_URL.' This activity makes the code shorter and easier to understand. Moreover, if there is a URL change, only the 'getBackendUrl()' function needs to be modified.

Refactoring Method

According to the book 'Refactoring' by Martin Fowler, there are several refactoring methods discussed and categorized based on their objectives. The book divides these methods into separate categories. Some of the objectives and approaches, according to Fowler's book, are:

1. Grouping Functions

Grouping functions focus on combining multiple methods into a single class object. This way, the import and export of these functions only involve calling the class. An example implementation of this method is Combine Functions into Class.

2. Organizing Data

Organizing data refers to storing important variables, such as URLs for static files in the case of PPL Paytungan, as constants that can be called when needed. This type of refactoring is called Replace Magic Literal.

3. Encapsulation

The process of encapsulation involves unifying functions and variables within a single class. With encapsulation, data and methods are stored in one class, and variables can be made inaccessible to other objects. An example of this is the Inline Class method.

4. Inline

'Inline' aims to condense if-else statements into a single line, often utilizing ternary operators in JavaScript. An example of this refactoring method is Inline Function.

5. Simplifying Conditional Logic

Long and nested if-else statements can be challenging for developers to understand. Simplification is necessary in such cases. An example refactoring method is Replace Nested Conditionals with Guard Clauses.