Say I have the following constants defined in my back-end API:

User::USER_ROLE_NORMAL; // Equal to 0
User::USER_ROLE_ADMIN; // Equal to 1

In my back-end I can now make the following parisons:

if($user->role == User::USER_ROLE_NORMAL)

What is the best practice for when I have to apply logic in my front-end? (where these constants are unknown)

It doesn't feel right to hard code the numbers in the front-end, like so:

if(ajaxData.role == 0)

For context: I need to apply logic in the front-end based to change layouts

Say I have the following constants defined in my back-end API:

User::USER_ROLE_NORMAL; // Equal to 0
User::USER_ROLE_ADMIN; // Equal to 1

In my back-end I can now make the following parisons:

if($user->role == User::USER_ROLE_NORMAL)

What is the best practice for when I have to apply logic in my front-end? (where these constants are unknown)

It doesn't feel right to hard code the numbers in the front-end, like so:

if(ajaxData.role == 0)

For context: I need to apply logic in the front-end based to change layouts

• javascript
• php
• ajax

• JS supports constants. You could even define them inside a function to get class like behavior. – bassxzero Commented Aug 20, 2018 at 14:14
• 2 @bassxzero Yes, I know that. But what I'm trying to get around is the fact that I'd have to define the constants in two different locations. Which is redundant. – Musa Commented Aug 20, 2018 at 14:15
• I use the same enumerations and other constants in my frontend and backend (defined 2 times). I just keep a discipline: I have to always update the frontend ones, every time I change my backend ones. I also keep the exact same enumeration names for convinence and clarity. Until now, this strategy has worked good for me, but maybe there are other ways to deal with this too... – Alkis Mavridis Commented Aug 20, 2018 at 14:17
• Front-end != back-end. The only ways to define it 1 time I can think of are: make a monolith and let everything depend on each other. Which is bad. Or: create a (micro)service that contains all your constants and then retrieve them over HTTP whenever you need them. Which is probably often, so performance would probably be an issue. – Loek Commented Aug 20, 2018 at 14:18
• 2 Constants are only useful within one language. If you need to cross language boundaries, you should serialise them to useful values, e.g. "normal" and "admin". You can translate that back into constants on the frontend if you want to. Alternatively, store the values in a language neutral way and pile them into constants in both languages somehow, if that makes sense for your workflow. – deceze ♦ Commented Aug 20, 2018 at 14:18

3 Answers 3

As frontend and backend logics do not have to be necessarily (and should not be) coupled, the best approach here I think is to define those same constants in the frontend code. Bear in mind that the frontend code should always be in consonance with the API specifications.

The way you do it is up to you (many good alternatives can be found).

An (easy) approach could be with some global variables or using some kind of service if you're using some framework.

Something like:

const role {
  USER_ROLE_NORMAL: 0,
  USER_ROLE_ADMIN: 1,
};

Then you can use them as follow:

if(ajaxData.role == role.USER_ROLE_NORMAL) {}

Another option (not very used) is that you could create a service in the backend API which provides those values for the frontend to use it. So before the frontend code could use any value regarding to roles (for instance), a request must be made to the backend in order to get those constant values and save it in the frontend in order to use it in future operations.

You could also generate the content of the JS file with all constants using backend. In this way you manage those data in one place, which may be the benefit.

A first solution would be to create another file, for the frontend javascript to use, defining the constants. But this has a big disadvantage: you will have to make sure both files (frontend constants and backend constants) are the same. If you change one, you'll have to remember to change the other.

But firstly, note that this disadvantage also exists if you just hard-code the constants in the first place (this is terrible, and absolutely not an option).

The solution is to have an automated process (the so-called build step of development), that auto-generates the frontend constants file based on the backend constants file.

In javascript development, it's very mon to have a build step: Webpack, Grunt, Gulp, etc... If you already have one of those, add to the build step a script that auto-generates the frontend constants file.

If you don't have a build step in your development process, this is a great time to start.