Consider the following scenario: A front-end application containing

• Create View (POST) with multiple input fields
• Edit View (GET values from back-end, PUT if values changed)
• Both views use the same route.

While a user is in the process of typing values into the inputs, there are several "helper fields" which do (live/instant) calculations based on the inputs of the user. The user is able to see the results of those calculations.

Easy enough a calculations.js located in the front-end, receives the current input values (state) and does the calculations.

Now please consider the following: Results of calculations.js are not saved to the database, since they can be calculated. However, the back-end has to do very similar calculations. Lets say it has to sum up the results of calculations.js in multiple routes. This speaks for putting calculations.js in the back-end. Another possibility: The Edit View shall receive the initial (calculated) values from the back-end.

The dilemma:

• Putting calculations.js only in the backend, makes it, so that the front-end has to call the back-end all the time while the user is filling in inputs (not practical).
• Putting calculations.js in both, may lead to data inconsistency and speaks against DRY Principle

In this context i was asking myself if it is possible and/or bad practice to define the function the back-end and pass it in an object to the front-end? Something like

{ calcFunction: (props) => console.log(props) }

How would someone tackle this problem in general? Thank you