[ANN] Rendering React in OCaml

Community
1

Here is server-reason-react, the OCaml implementation of React I have been working on: Server-side rendering React in OCaml | sancho.dev

The blog post is targeted for a Frontend/JS dev, but I believe it can be interesting from the OCaml site as well.

server-reason-react is an implementation of react-dom/server and some of React’s internals in OCaml. The purpose is to render HTML markup from the server for a Reason React application natively.

FvszqVwaIAAeg5D
FvszqVwaIAAeg5D1913×1131 86 KB

It supports hydration (renderToString) and full render (renderToStaticMarkup) and most unit tests from ReactDOMServer are migrated as well. Basically, to ensure hydration “hacks” work the same way as react’s DOM (in JavaScript).

It’s obviously fast, talking about req/s: x10 against Node and x6 against Bun on the same codebase. Performance is not the priority, though. I did 0 perf work but is cool. If you want to help making it very fast, let me know!

The priority is to implement streaming and later RSC. Can’t wait to try OCaml multicore with Server components.

All of this is thanks to Melange, and I’m grateful to work with @_anmonteiro and @javierwchavarri.

24 Likes
2

Is there an intention to open source this eventually?

3

Project is open source GitHub - ml-in-barcelona/server-reason-react: Server rendering Reason React components natively

6 Likes
4

In this repo I am having a hard time finding the server backend itself. Am I missing something? Or is that separate?

5

I’m not sure. You can look at a server implementation in the repo linked by the blogpost, perhaps: GitHub - ml-in-barcelona/fullstack-reason-react-demo: Demo to showcase server-react-dom with Melange

2 Likes
6

The library is implemented here: GitHub - ml-in-barcelona/server-reason-react: Server rendering Reason React components natively while a demo project (deployed and whatnot) lives here GitHub - ml-in-barcelona/fullstack-reason-react-demo: Demo to showcase server-react-dom with Melange

The shape of the lib, or even the scope of it is very unknown right now. Some stuff could live under melange repo, some stuff could live under bs-css repo or reason-react. Or even contain some dream specific stuff on it.

Feel free to ask me any question about the impl :smiley:

7

I added the repository link, you aren’t the first one asking this :sweat_smile:

2 Likes
8

No prob. I notice that the fullstack demo is using OCaml 4.14, once this goes multicore hopefully in the near future it will be even faster.