Connecting js_of_ocaml backend to JS front-end

I have a chunk of OCaml code converted to JavaScript using js_of_ocaml and a small UI front-end written in plain JavaScript. I’m trying to figure out the cleanest way to move data from the backend to the UI front-end.

Right now, on the back-end I encode my results from their OCaml types into JSON using Yojson, and convert them to strings using Yojson.to_string. Then on the front-end I pass those strings them to jQuery’s $.parseJSON() and then use the JSON it gives me. Is there a cleaner way to do this? I was hoping I could skip the serialization/deserialization step, but can’t figure out a way to do it.

1 Like

You’ve got to serialize it t bytes one way or the other, and since Ocaml and JS have different memory layouts, you can’t just send raw data. What you’re doing now is the way.

When you say you have Ocaml code converted to JS with js_of_ocaml, do you mean you’re running JS on the backend, like via node, or is your front end code Ocaml compiled with js_of_ocaml?

I use Ocaml for frontend and backend, and then I have a module shared between which defines the API input/output types, that way the frontend and backend are always in-sync with each other for their expected types.

just to expand on the serialization/deserialization

with yojson there is a ppx that you can use to automatically convert an ocaml record to json:
(defined here: FrameworkBenchmarks/models.ml at master · TechEmpower/FrameworkBenchmarks · GitHub, used here: FrameworkBenchmarks/routes.ml at master · TechEmpower/FrameworkBenchmarks · GitHub)


there’s also atdgen, the above implemented with it:

and if you have a cross-language code base - there are protobuf implementations: GitHub - mransan/ocaml-protoc: A Protobuf Compiler for OCaml and GitHub - issuu/ocaml-protoc-plugin: ocaml-protoc-plugin


it sounds like you don’t need the complication of the above tools - Yojson (or ezjson) with a ppx provide the simplest way for data transfer to a simple javascript FE

@orbitz ok, thanks, that’s what I suspected. The front-end is written in JavaScript/HTML, and then the backend is compiled to JavaScript and sent to the browser so that everything runs in-browser.

@mudrz thanks, I’ll look into the ppx but it might not be necessary for my application.

Unless I misunderstood the initial question, no, you don’t need to go through JSON serialization. You have all the necessary functions to go from the internal representation of Js_of_ocaml objects (which still are javascript values, although contrived) to the equivalent native javascript values. They are available in Js_of_ocaml.Js.

For instance :

let ocaml_list : string list = ...

let javascript_array = Js_of_ocaml.Js.array (List.to_array (List.map Js_of_ocam.Js.string ocaml_list))

This will most likely be much faster that JSON serialization and I would argue it’s the “right way” of doing it, but it will require more type-related boilerplate code to do the conversion, unless you have some ppx assisting you, as yojson does with the JSON approach.

Ah cool, Js_of_ocaml.Js was what I was looking for. Knowing that, I also found js_objectconv, a ppx rewriter that makes converting OCaml types to JS objects easier.