DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Avoid magic strings and boost your development
Aditya Pahilwani
Aditya Pahilwani

Posted on

Avoid magic strings and boost your development

The problem with magic strings
1) Problem with API route because of magic strings

Our typical rest API route looks like

router.get(
  '/fetchProducts',
  controller
);
Enter fullscreen mode Exit fullscreen mode

Now the problem is you are using the same route in your frontend for calling it

fetch('/fetchProducts', {
        method: "get",
});
Enter fullscreen mode Exit fullscreen mode

Now you decide to rename the route from '/fetchProducts' to '/getProducts', you will end up doing changes everywhere you used this api and ended up wasting time

2) Problem with navigation routes because of magic strings

Our typical navigation looks like this in react

<Switch>
      <Route exact path="/home" component={Home} />
</Switch>
//Navigating with link like
<Link to="/home"> </Link>
Enter fullscreen mode Exit fullscreen mode

Now again you decide to rename the route from '/home' to '/landingPage', you will end up doing changes everywhere you used this route in to redirect.

The big picture
Instead of focusing on your project, you will end up wasting time on doing these changes because you didn't made single source of truth instead you used Magic strings.

The solution
Make your magic strings as constant
For API Routes

1) make one file to define constants

export const getProductsRoute="/fetchProducts";
Enter fullscreen mode Exit fullscreen mode

2) Import the constant from your file and your code will look like

import {getProductsRoute} from './apiConstant'
router.get(
  getProductsRoute,
  controller
);
Enter fullscreen mode Exit fullscreen mode

3) Copy the same file in your frontend and your code will look like

import {getProductsRoute} from './apiConstant'
fetch(getProductsRoute, {
        method: "get",
});
Enter fullscreen mode Exit fullscreen mode

For Navigation Routes

1) Make another file to define constants for your Routes

export const RouteToHomeComponent="/Home"
Enter fullscreen mode Exit fullscreen mode

2) Import constants and use them

import {RouteToHomeComponent} from './routeConstant'

<Switch>
      <Route exact path={RouteToHomeComponent} component={Home} />
</Switch>
//Navigating with link like
<Link to={RouteToHomeComponent} > </Link>

Enter fullscreen mode Exit fullscreen mode

How it speeds up the development ?
Now you don't need to waste your time to revisit 10 pages to edit the code, also there is more context in your code, when you will read after months you don't need to think what this route was doing as the naming would help us with the context, whenever there are changes required you can do them in one go.

Conclusion
When you are working on project separate your concerning part and make them constants, because that way it will be easy for you to make any changes and speed up your development by not wasting your time on editing besides this your code would be more easy to read and work with

Top comments (10)

Collapse
 
alfredosalzillo profile image
Alfredo Salzillo

Now you don't need to waste your time to revisit 10 pages to edit the code, also there is more context in your code, when you will read after months you don't need to think what this route was doing as the naming would help us with the context, whenever there are changes required you can do them in one go.

This is not always true. In your example

export const getProductsRoute="/fetchProducts";

the string fetchProducts is as explicate as getProductsRoute.

Also, the best solution is to export a fetchProducts function and import her into all the project, so when the API change, you need only to reimplement the fetchProducts

export const fetchProducts = () => fetch('/fetchProducts');
Enter fullscreen mode Exit fullscreen mode

Magic strings are not magic at all, in this case, if the API routes are named well.

In your example, the route /fetchProducts is a bad name, no need of the fetch in the name.

Your API constants it's like an enum, and enums are the evilest thing to use in a javascript project.

Collapse
 
insomaniacgamer profile image
Aditya Pahilwani Author

This looks as good as my solution with constants , doesn't bring a big difference
I use this to create route path when passing values with it in React

Collapse
 
alfredosalzillo profile image
Alfredo Salzillo

Also, with a modern IDE find and replace the string '/home' it's easier than create a file and import it every time.

Collapse
 
insomaniacgamer profile image
Aditya Pahilwani Author

Consider the scenario , where you get back to your project after like month and when you try to edit the API route you don't remember where exactly they were getting used, that's why with constants there is single source of truth to that route
I came up with this because it happened with me to keep track of all these route

Thread Thread
 
alfredosalzillo profile image
Alfredo Salzillo

maiusc+ctrl+f, maiusc+ctrl+r

If you use the same route in different projects and the constants are a shared library, you need to release the library and recompile all the projects.

What if you don't remember all the projects where you use this library? You'll make a 'constant of libraries of constants' to remember that?

Also, it's true you have a single source of truth but you are binding all your applications to a single file.

The best solution is to use good naming, and always remember that strings, especially URLs can be used by someone else.

Thread Thread
 
insomaniacgamer profile image
Aditya Pahilwani Author

Your point is right no doubt , but with me with constants am able to get more context while reading the code though the example I used wasn't good enough and you are write that if there are many projects linked to this it could be troublesome to reload with updated file but as am student and work alone , I didn't faced that issue thanks for your points will look into that

Collapse
 
dansilcox profile image
Dan Silcox

Works with things like input parameter names as well, especially in big "management" APIs where you have loads of endpoints using similar/same fields.

Collapse
 
alfredosalzillo profile image
Alfredo Salzillo

please add the javascript tag to the code blocks

Collapse
 
insomaniacgamer profile image
Aditya Pahilwani Author

Added, sorry am new to writing blogs

Collapse
 
juliushuck profile image
Julius Huck

I just wrote a package to avoid magic strings in routes management. Supports nested routes, placeholders and query strings. npmjs.com/package/@juliushuck/gene...

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›