DEV Community

Take Your Code to The Other Side

Code of Relevancy on March 01, 2023

In today's adventure I will take you to the Other Side of code development. As ONE, we'll explore the art of code refactoring and see how it can re...

Read full post

M. Akbar Nugroho • Mar 4 '23

Agree with the component should use PascalCase, but not with the file name. For the file name, I prefer KCD suggestion. He use lower-kebab-case for universal use OS.

So, you have component MagicButton and filename is magic-button.tsx. This will ensure you have no filename insensitive problem.

I have experienced coding on Mac, no problem happened. But when I pull the code from github and running on Linux, I forget to rename the import component from "Button" to "button" and the entire file that importing that component thow an error.

Code of Relevancy • Mar 4 '23

Thank you for your valuable feedback. Anyway, I prefer to use the PascalCase for the file name and Component Name. I don't think it can create any problems while coding on Mac, Linux or Windows.

Instances:

import Typography from "@material-ui/core/Typography"; 
import Navigation from "../components/Navigation";

PascalCase for filenames is also recommended by Airbnb' React/JSX Style Guide.

M. Akbar Nugroho • Mar 4 '23

Yeah, this is a rare case. Usually it happens when you importing a file.

Imagine you have a component Navigation.tsx and import it like this:

import Navigation from 'components/navigation';

On windows and Mac it shouldn't throw an error because they don't care about "case-sensitive".

The thing why this metter is when you use CI tools for example GitHub actions which use Linux based OS (you can also use windows or mac) for doing automated-test.

Linux cares about case-sensitive and of course the code above should make your actions fail.

Another case is when you use Vercel, Netlify, etc which provide CI/CD and of course their runner is use Linux based OS.

IMHO, this is metter because I don't want to lost a time because of simple problem and for me style guide is only a style guide. Like a cookbook. Meaning you can adjust it.

And the most important thing is to document your changes. Maybe you already work in CamelCase project, but you want another one. This is important for next devs, so they know "what happens" to the codebase.

Code of Relevancy • Mar 4 '23

Interesting, thank you for sharing detailed info..

Matheus Mello • Mar 1 '23

I really like it, some things that worth mentioning:
Typescript and the usage of common variables.

enum Migrations {
"Migration not started",
"Migration happened"
}

function Adventure() {
  const [message, setMessage] = useState<keyof typeof Migrations>(Migrations."Migration not started");

  const onMessage = () => {
    setMessage(Migrations."Migration happened");
  };

  return (
    <>
      <h1>Message: {message}</h1>
      <button onClick={onMessage}>Migrate me</button>
    </>
  );
}

Maybe also exporting all the components from a common index file.

Instead of:

import Button from "@/components/Button";
import TextField from "@/components/TextField";

Something like this:

import {Button, TextField} from "@/components";

Code of Relevancy • Mar 1 '23

Yes its looks good to me. There are so many ways we can go with it for the code refactoring.

I really like your approach to import the components:

import {Button, TextField} from "@/components";

Thank you for sharing your insights..

Anthony Fung • Mar 1 '23

A really good write-up!

For removing comments, I think this is a really good idea. I see lots of commented code too often. People usually say it's there just in case; it'll also be in source control.

For if statements, I generally stick to the rule of using if with up to three branches. After that, I'll either use switch, or the dictionary/object approach. One other point that might not be obvious is that it's possible to put arrow functions in there to run. This might be useful if implementing some type of command interpreter.

Code of Relevancy • Mar 1 '23

I completely agree with you. Thanks for sharing your insights.. Happy coding!!!

Wade Zimmerman • Mar 4 '23

a lot of these suggestions are nothing more than preferred syntax. wouldn't bother messing with most of these because a senior programmer will just overrule you. sometimes it just isn't making code "more readable"

Code of Relevancy • Mar 4 '23

I completely agree with you. I had showed basics of code refactor. There are millions ways a developer can approach it.. Starting with basics, eventually we will end as a "Pro Developer". It's important to maintain consistency in while coding.. THnak you for reading and your valuable feedback..

Code of Relevancy • Mar 2 '23

Very excited to announce that we have reached 1K followers in our community. We couldn't have done it without your support and engagement. We want to thank each and every one of you for being a part of our adventure..

We look forward to continuing to grow together & providing even more value to our community.

Happy coding!!!