Avoid magic strings and boost your development

Aditya Pahilwani — Thu, 10 Dec 2020 11:11:30 +0000

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
);

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

fetch('/fetchProducts', {
        method: "get",
});

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>

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";

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

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

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

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

For Navigation Routes

1) Make another file to define constants for your Routes

export const RouteToHomeComponent="/Home"

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>

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

DEV Community: Aditya Pahilwani

Avoid magic strings and boost your development