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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

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

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay