DEV Community

Cover image for Don't overcomplicate things
Alexey Lysenko
Alexey Lysenko

Posted on

Don't overcomplicate things

Wen working with the code, the programmer all the time faced with abstraction. This is common use technique that is used to simplify some things in one place and delegate realization to another place. It is very useful and cool. If I use

  const cardItem = arr.find(item => item.name === 'card')
Enter fullscreen mode Exit fullscreen mode

I teach myself what this method does. What should I use as parameters and values that I expect to receive? And then use it all over the place, doesn’t dig into details of realizations hidden behind this method. This is greate.
Alt Text
All the frameworks, language features are based on good abstractions. Abstraction gives us the power and clean way to do complex things.

But can over-abstraction is be bad?
Alt Text

It can be where we can make things are not obvious and can confuse or just struggle other developers or even for us in the future. Let looks at the example:

In this case we use some custom function to add query for tag

 <a href={customRoute(ACCOUNT_DETAILS_PATH, 
        { pathQuery: { sid: active.sid }, })} />
Enter fullscreen mode Exit fullscreen mode

So we use some customRout() method that adds some more logic for this that takes 2 params, URL and object.
What difficulties it can add to your code? Let say a new developer comes to our project. He sees that code and he will need to dig into that function to know the implementation or what the API is. Inside that function we can see something like this:

export function customRout(
  routePath: string,
  params?: {
    path?: Record<string, any>;
    query?: Record<any, any>;
  },
) {

const normalizedPath = replacePathParams(routePath, params?.path);

  if (params?.query) {
    return addQueryParams(normalizedPath, params.query);
  }

  return normalizedPath;
}
Enter fullscreen mode Exit fullscreen mode

We have some extra logic to handle all params and also have some more abstractions with addQueryParams and normalizedPath. And that abstraction can have more inside..

This is another example that does the same thing but using template literal instead

 <a href={`${ACCOUNT_DETAILS_PATH}?sid=${active.sid}`}/> 
Enter fullscreen mode Exit fullscreen mode

it is clear and not abstracted. It’s readable well for every developer. Not no need to learn API or so.
Alt Text

The main point is to avoid over-complexities and unnecessary abstraction in the code. It will save time and brain energy for everyone in the project. And let you focused on really good abstractions in a place where they need.

Discussion (1)

Collapse
myleftshoe profile image
myleftshoe

reads like it was written by an AI☺️