DEV Community

loading...

The Art Of Writing Clean Code: My 5 Go-To Tricks.

ishakmohmed profile image Mohmed Ishak Updated on ・3 min read

Alt Text

Anyone can code, but can you code cleanly? In this article, I'll show you my go-to clean coding techniques for better code understanding and folder structure. This applies to any tech stack you work with.

[1] Use A Color Palette

This is one of the best decisions you can make. Using a color palette, not only you'll write cleaner code, you'll also be able to change the entire theme of your app by only changing 6 characters of code (referring to hex code). Let's take a look at a color palette I've used in my React Native project.

// creating and exporting the color palette
export default {
  black: "#000",
  darkBlue: "#090446",
  darkGreen: "#002E27",
  green: "#00B14F",
  light: "#ede6e6",
  medium: "#6e6969",
  pink: "#fc5c65",
  purple: "#4530B3",
  white: "#FFFFFF",
};
Enter fullscreen mode Exit fullscreen mode
// using the palette (default import as colors)
const styles = StyleSheet.create({
  foodName: {
    color: colors.white,
    fontSize: 22,
    fontWeight: "bold",
    margin: 5,
  },
  foodPrice: {
    color: colors.green,
    fontSize: 16,
    margin: 5,
  },
});
Enter fullscreen mode Exit fullscreen mode

Here, I can change my green color to a different shade and it won't affect any of my other files, but only the main palette. You can take this to the next level by declaring colors such as primary and secondary. Say, your primary color is red, you can change it to a totally different color by just changing a few characters in your palette.

[2] Sort Parameters and Keys Alphabetically

It's just clean, you know it. Here are some examples:

function doSomething(anArgument, anotherArgument, bIsAfterA, cIsAfterB, moreArgument, zIsTheLastAlphabet) {
   // do something...
}
Enter fullscreen mode Exit fullscreen mode
container: {
  backgroundColor: colors.darkGreen,
  borderRadius: 10,
  justifyContent: "space-around",
  margin: 10,
  padding: 10,
  width: 180,
  height: 180,
},
Enter fullscreen mode Exit fullscreen mode

[3] Don't Be Afraid Of Expressive Naming Even If It's Long

Everyone talks about writing short and concise codes, and that's important but for naming variables and functions, it can be the exception sometimes. Let's take a look at an example:

const handlePress = () => {
  // do something...
}

const handlePress2 = () => {
  // do something...
}

const handlePress3 = () => {
  // do something...
}
Enter fullscreen mode Exit fullscreen mode

The naming in code snippet above can be preferred if your application is small, but for large-scale projects especially in a company, the codebase is super huge and a whole lot of engineers work on that and the last thing you want to do during a stressful day is to read a poorly written codebase and trying to figure out what it does. Here's a better naming for the above functions:

const handlePressAddButton = () => {
  // do something...
}

const handlePressCrossButton = () => {
  // do something...
}

const handlePressCircularView = () => {
  // do something...
}
Enter fullscreen mode Exit fullscreen mode

[4] Create A Super Extensible Directory Structure Even If Your Project Is Small

This is probably the most important point in this article. In my opinion, creating an extensible project structure is easy. All you need to do it to Google it for the tech stack you use. It'll help you in every way possible during development including making you happy with your work. Here's a screenshot of one of my project structures (which I learned from a course).
Alt Text

[5] Create Small, Reusable, Extensible Components

Here's an example of reusable component in React:

function Text({ children, style, ...otherProps }) {
  return (
    <h1 style={[styles.myCustomStyle, style]} {...otherProps}>
      {children}
    </h1>
  );
}
Enter fullscreen mode Exit fullscreen mode

Here, the h1 tag is already complete on it's own with default styles. All you need to do is to use it in your app. However, due to the REST parameter as the last parameter, now the Text component may or may not have additional properties as per your wish. Not only that, the component's style is made to be in a way that is complete by itself, but also can be extended/overridden (style parameter). Using reusable components will always speed up your development time.

Discussion (4)

Collapse
hsalem profile image
Hassan

Nice article. But for second point I think better to order them based on the order of the action, for example: findUserByNameAndAge(name, age)

And the third one is not so clean, I agree with expressive names, but if the name is too long that means it does too much. Even if it is a variable, a class, or a function.

Collapse
ishakmohmed profile image
Mohmed Ishak Author

Yeah for third one, needa find the sweet spot between expressive names and long names..

Collapse
arhen profile image
Rahmat Slamet

Great Stuff!
I agree most of tat option unless 2nd. Sort Parameters and Keys Alphabetically is not necessary and take some time to do it, Better do another things.

Collapse
ishakmohmed profile image
Mohmed Ishak Author

Cool, but that's a convention a lot of React Native developers follow.

Forem Open with the Forem app