DEV Community

Cover image for Avoid hardcoded values in Frontend
Sibelius Seraphini for Woovi

Posted on

7

Avoid hardcoded values in Frontend

Have you ever seen a frontend codebase with so many hardcoded values instead of consuming them from the design system theme?

Hardcoded values are a recipe for an inconsistency in the frontend.
Magic numbers should also be avoided when creating responsive layouts.

Frontend Theme

A Frontend Theme defines a standard for colors, typography, size, and spacing in the design system and the product code.

A theme could be represented as a JavaScript object with all these default values.

Fixing the hardcoded values

We are going to use @material/ui and React in the examples, but these apply to any framework or package.

import { createTheme } from '@mui/material/styles';
import { ThemeProvider } from '@mui/styles';

const theme = createTheme();

const Providers = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      {children}
    </ThemeProvider>
  )
}
Enter fullscreen mode Exit fullscreen mode

In the example above we create a theme for our design system based on mui theme, and we added the ThemeProvider context provider to be able to consume the theme values from everywhere in our codebase.

Here is an example with hardcoded values:

<Typography
  variant={'h2'}
  sx={{
    fontSize: '22px',
    color: '#00ff00',
  }}
>
  {t('Information)}
</Typography>
Enter fullscreen mode Exit fullscreen mode

Without any hardcoded or magic number:

<Typography
  variant={'h2'}
  sx={{
    fontSize: theme.typography.fontSize,
    color: theme.typography.color,
  }}
>
  {t('Information)}
</Typography>
Enter fullscreen mode Exit fullscreen mode

The benefit of the second approach is that you only need to change the fontSize or text color in one place and it will change everywhere.
You also have more consistency in your UI.
Furthermore, it is easy to add dark mode to your product if you need it.

In Conclusion

Avoiding some antipatterns like hardcoded or magic numbers can increase consistency, reduce maintainability costs, and simplify modifying your design system over time.
You can add a lint rule to throw an error or warning when a developer is trying to commit a hardcoded value to avoid regression.
You can read more about Design Systems at: Every product needs a design system and Practical Guide to Creating a Design System


Woovi
Woovi is a Startup that enables shoppers to pay as they like. Woovi provides instant payment solutions for merchants to accept orders to make this possible.

If you want to work with us, we are hiring!


Image by bedneyimages on Freepik

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay