Refactoring and Design Patterns
Refactoring is a way to improve your code without changing its external behavior. This is done to transform your code from a mess that only a compiler can read, to a beautiful script that would leave your fellow developers in awe.
One way to refactor your app is to apply design patterns, which are a proven solution to a certain issue on your code. There are many design patterns out there, and chances are the issue you are facing already has a design pattern made just to solve it.
Refactoring
Refactoring is a process of fixing or cleaning up the internal structure of the code without changing its external functionality. By refactoring our app, we can improve the design, structure, and implementation of our code.
You should refactor your app every time you make a change, that way your app’s quality would remain high, and you can sleep soundly at night.
Here’s a checklist of whether or not you are refactoring the right way:
- Your code should become cleaner, and have fewer smells
- There shouldn’t be any change to functionality after you refactor your app
- All the existing tests which have previously passed should still pass after you refactor your app
It’s important to note that refactoring is meant to improve the code structurally, not functionally.
The aim of refactoring is to clean up issues that could hinder maintainability and scalability, or otherwise known as code smells. But what are code smells exactly?
Code Smells
Code smells are an indicator that there exists structural or internal issues that can be fixed during refactoring. The more code smells we have, the lower the quality of code is on our application.
Code smells come in many shapes or forms, it could be that your function or class is too big, that there exist duplicate code, or many more.
While we could detect code smells manually, there are limits to how detailed our eyesight can be. Luckily, there exist tools at our disposal to aid in finding code smells on our application.
Sonarqube
Sonarqube is an online tool that can help scan and detect numerous problems on our project. These can be security problems, bugs, code coverage, and of course code smells among many others.
You can hook sonarqube up to your code repository, and it will start scanning your project right away (assuming the job succeeds).
This sonarqube scan details all the things we need to know about the quality of our code. It displays the code coverage, code smells, bugs, and code duplications.
You can then use sonarqube to locate what, why, and where the issues occur, and fix it quickly to increase your code’s quality.
Design Pattern
Design patterns are a proven solution for commonly occurring issues in software design. If you’re confused about how to make your code scalable and eliminate smells, searching for a design pattern to solve your problem is one of the best ways to improve your code.
There are three types of design patterns:
Creational Patterns
These are patterns that help you in creating objects. Applying these patterns would help you increase the flexibility of your code, especially when creating new objects for your program.
Structural Patterns
The patterns that fall into this category help in improving the structure of your project. The structure created after applying these patterns help in making your code flexible and reusable.
Behavioral Patterns
The patterns here aid in assigning behaviors and algorithms for your objects. This aids you in making your code more scalable, as each object’s behaviors become more cohesive.
Refactoring Example in React
Let’s look at some examples of refactoring in React.js.
Conditional Rendering
Let’s say we are trying to implement conditional rendering on our React component. We could do a normal if-else block like this:
However, there is a better, cleaner alternative, which is called a ternary operator. See the image below:
Just like that, we successfully refactored our code and made it much cleaner than it was before.
Props Destructuring
Let’s say we have a component with multiple props. See the image below:
This is a maintenance nightmare. Imagine if we add another prop to this component, we not only have to add the component in the argument, but also call it when rendering the component.
Now imagine if we add multiple props at the same time. We then have to type in those props one by one, and if we miss one then our component might not display the correct information.
Let’s use JavaScript’s object spread operator to fix this:
Now our code is much cleaner and maintainable. No matter how many props we add, it’s always guaranteed to be rendered by this component.
Conclusion
While refactoring isn’t really a necessity, it’s highly recommended that programmers refactor their app every time they implement a change.
With the existence of tools such as sonarqube to automatically scan for design issues on your project and design patterns to fix and improve your code, there really is almost no reason for developers nowadays to not refactor their app.
References:
