Clean Code Is The Way To Go

Gus Reksoprodjo
3 min readOct 30, 2021
Source: James Harrison

Imagine our house, a clean environment helps us understand where everything is supposed to be and supports us to be healthier in the short and long run. A dirty house is the source of disease and its environment would not be convenient for us to stay inside it.

Like our house, a clean programming environment is an environment that consists of clean code. Writing clean code requires us to think deeper and more thoughtful so that everything would make sense and not wasteful. There are several benefits that clean code provides:

  • Small cost per change
  • Easier to spot errors and bugs
  • Make debugging faster
  • Good maintainability in the long run
  • Understandable by other people if they are going to modify the program

In this article, I will be using TypeScript/JavaScript and React Native for the program. Without further a do, let’s start writing clean code by eliminating our bad habits.

Most Frequent Bad Code Habits

Unclear Variable Name

When writing a new variable, make sure that the chosen word represents the usage of the variable. The given name should explain what the variable does, why the variable exists, or how the variable is used.

Unnecessary Comments

Comments are not required when we have declared the variable name right and to the point. It is also one of the benefits of declaring the variable name correctly in the first place. However, if there are things that should be explained; like the flow of how the third-party API works, then it must be commented to give clarity.

Write Readable Code

Trust me, you don’t want to be reading a code that should be displayed in a whole page packed down into a one line. People who are learning how to code often make this mistake, write it in a one line without any whitespaces or indentations. The program would run correctly but it would take other programmers’ a lot of time trying to understand the code that have been written. Avoiding this could also help us to debug our program when an error occurs.

Code Repetition

If we have used one section of our code in several files, then we should create a component to prevent code repetition. By doing such, we increase the maintainability of our code. We could easily fix the bug that is specific to those line of codes in one file rather than have to revisit every code that contains it and fix it one by one, which is prone to error.

Clean Code Example

In Clicks, we implement clean code principles in every part of our code.

We have created a reusable component so that everyone could use it and made it flexible. This way, we have prevented code repetition and also keep a good maintainability of the code. Here is an example of Spacer.tsx that contains a reusable spacer component that is used as a separator between the screen elements or components.

We have declared and implemented the API function in the frontend to help future developers to modify and understand our code. By doing this, we have prevented many repetitive library calls and we can maintain the code better.

Conclusions

Writing clean code is a habit, it does not come on its own but we must get ourselves used to it. It may seem really time consuming at first, but once you have felt the difference it gives you in a good way, you never want to go back.

--

--

Gus Reksoprodjo

A UI & UX designer that focuses on simplicity and usability