Any way to connect values (like enums) from frontend (js) to backend (php/ruby)?

Question

Given a web application based PHP or ruby in its backend, and programmed on JavaScript in the frontend, sometimes we need to define values in both sides to process data that communicates between the frontend and backend through APIs.

In JavaScript would be something like this:

var options = {
        OPT_A : 1,
        OPT_B : 2,
        OPT_C : 3
    };

switch(data.type)
{
    case options.OPT_A:
        /* */
        break;
    case options.OPT_B:
        /* */
        break;
    case options.OPT_C:
        /* */
        break;
}

And in php something like this:

const OPT_A = 1;
const OPT_B = 2;
const OPT_C = 3;

The problem is that you have to define them twice; once in each language. This could lead to errors/inconsistencies.

The only way I've thought is defining the JavaScript part from the server, but I don't like the idea of JS code being written by PHP/Ruby code.

Is there any way to this without code duplication?

Answer 1

Here is a solution for how to create a PHP enum and send it to the front-end as an object.

Here in PHP I create an enum class called Food:

abstract class Food
{
    const BANANA = 0;
    const ORANGE = 1;
    const WATERMELON = 2;

    const BANANA_STRING = 'banana';
    const ORANGE_STRING = 'orange';
    const WATERMELON_STRING = 'watermelon';

    const MAP = [
        self::BANANA         => self::BANANA_STRING,
        self::ORANGE         => self::ORANGE_STRING,
        self::WATERMELON     => self::WATERMELON_STRING
    ];

    const REVERSEMAP = [
        self::BANANA_STRING          => self::BANANA,
        self::ORANGE_STRING          => self::ORANGE,
        self::WATERMELON_STRING      => self::WATERMELON
    ];

    static function toString($enum){
        return self::MAP[$enum];
    }
    static function toEnum($string){
        return self::REVERSEMAP[$string];
    }
}

I am using the Laravel framework in these next steps but it should be mostly the same depending on your project. The important part here is I use ::MAP which I created in my enum:

use PathToMyLibrary\MyLibrary\Enums\Food;

class FoodController extends Controller {

    public function foodView() {
        $title = "hello";
        $food_enum = Food::MAP;

        // attach these variables to the food view
        return view('food', compact('title', 'food_enum'));
    }

}

Now inside of my food.blade.php file (the PHP-html view template file used in Laravel), I can convert this $food_enum PHP object into a JavaScript object.

@section('title')
    {{title}}
@endsection

@section('page_content')
    <div class="page-heading">
        <h1>{{title}}</h1>
    </div>
    <div id="food-app">...your content...</div>
@endsection

@section('includes')
    <script>
        // convert this $food_enum from a PHP object into a JavaScript object
        var food_enum = <?php echo json_encode($food_enum); ?>;
    </script>
@endsection

At this point you will have an object in JavaScript that matches the same enum object you had in PHP.

No more needing to maintain a redundant enum in PHP and JavaScript!