# Js\_of\_ocaml bindings for ReactJS

**URL:** <https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045>\
**Category:** Ecosystem\
**Tags:** reason, ocsigen\
**Created:** [November 1, 2017, 9:59am UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045 "2017-11-01T09:59:29Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Keiko](https://avatars.discourse-cdn.com/v4/letter/k/ecae2f/32.png) [@Keiko](https://discuss.ocaml.org/u/Keiko)\
**Post date:** [November 1, 2017, 9:59am UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/1 "2017-11-01T09:59:29Z")

</div>

Hello,

Are there js\_of\_ocaml bindings for ReactJS (with ideally examples)?

Best regards,  
Keiko

---

<div class="post-metadata">

**Author:** ![Freyr666](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/freyr666/32/591_2.png) [@Freyr666](https://discuss.ocaml.org/u/Freyr666)\
**Post date:** [November 1, 2017, 11:11am UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/2 "2017-11-01T11:11:44Z")

</div>

Dunno about reactJS, but there is [react](http://erratique.ch/software/react) if you are looking for some reactive programming.

---

<div class="post-metadata">

**Author:** ![bcc32](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/bcc32/32/203_2.png) [@bcc32](https://discuss.ocaml.org/u/bcc32)\
**Post date:** [November 1, 2017, 8:55pm UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/3 "2017-11-01T20:55:04Z")

</div>

There’s [reason-react](https://github.com/reasonml/reason-react), which you would probably be able to use since it should have the exact same interface in OCaml, although I’m not sure if you’ll need to use BuckleScript instead of js\_of\_ocaml in order to make it work.

---

<div class="post-metadata">

**Author:** ![yawaramin](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/yawaramin/32/3384_2.png) [@yawaramin](https://discuss.ocaml.org/u/yawaramin)\
**Post date:** [November 1, 2017, 10:25pm UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/4 "2017-11-01T22:25:27Z")

</div>

See [https://github.com/fxfactorial/ocaml-reactjs](https://github.com/fxfactorial/ocaml-reactjs)

But I’d actually advise you to try ReasonReact, it’s still OCaml (targeting BuckleScript) and is actually maintained by a team at Facebook. Makes more sense to use it.

---

<div class="post-metadata">

**Author:** ![Keiko](https://avatars.discourse-cdn.com/v4/letter/k/ecae2f/32.png) [@Keiko](https://discuss.ocaml.org/u/Keiko)\
**Post date:** [November 2, 2017, 9:45am UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/5 "2017-11-02T09:45:50Z")

</div>

If I understand correctly, to use OCaml libraries with BuckleScript, those libraries need to be compiled from the source using BuckleScript. (Please correct me if I’m wrong.) This is not ideal for my circumstances, in particular, given that available BuckleScript OCaml libraries found in [https://github.com/reasonml-community/index](https://github.com/reasonml-community/index) are not too impressive.

js\_of\_ocaml appears to be able to compile highly complex libraries that include many runtime tricks. (Please correct me, if I’m wrong.)

Another point that favours js\_of\_ocaml is that deadcode elimination performed by ocamlclean looks more effective than that of BuckleScript. (But I haven’t done any proper investigation.)

Together with the fact that Eliom supports client-server communication (e.g., remote procedure calls and code-sharing between client and server code), Eliom + js\_of\_ocaml seems a better choice for me.

---

<div class="post-metadata">

**Author:** ![wokalski](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/wokalski/32/38_2.png) [@wokalski](https://discuss.ocaml.org/u/wokalski)\
**Post date:** [November 2, 2017, 12:32pm UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/6 "2017-11-02T12:32:28Z")

</div>

I asked this question recently in the Reason `Discord` some time ago. `Reason React` creators went with Bucklescript and it makes a lot of sense for what they are doing because of excellent and simple interop. For jsoo I think the best way would be to reimplement the interop part of Reason React while keeping the API the same.

---

<div class="post-metadata">

**Author:** ![bobzhang](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/bobzhang/32/553_2.png) [@bobzhang](https://discuss.ocaml.org/u/bobzhang)\
**Post date:** [November 2, 2017, 2:19pm UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/7 "2017-11-02T14:19:04Z")

</div>

> js\_of\_ocaml appears to be able to compile highly complex libraries that include many runtime tricks. (Please correct me, if I’m wrong.)

If you mean `Obj.magic`, maybe, but they are pretty close, BuckleScript supports most functions in Obj module.

> Another point that favours js\_of\_ocaml is that deadcode elimination performed by ocamlclean looks more effective than that of BuckleScript. (But I haven’t done any proper investigation.)

This is not true. In general BuckleScript generates smaller JS code than js\_of\_ocaml.

In general, if you are an OCaml programmer and only want to make your code runnable in browser, then I suggest you use jsoo, if your primary  
interest is on JS platform, BuckleScript is a better fit

---

<div class="post-metadata">

**Author:** ![Keiko](https://avatars.discourse-cdn.com/v4/letter/k/ecae2f/32.png) [@Keiko](https://discuss.ocaml.org/u/Keiko)\
**Post date:** [November 2, 2017, 2:31pm UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/8 "2017-11-02T14:31:32Z")

</div>

Thanks a lot for all the suggestions!

I’d like to come back to my original question:

Are there js\_of\_ocaml bindings for ReactJS?

Or I have to write them myself…

Best regards,  
Keiko

---

<div class="post-metadata">

**Author:** ![Keiko](https://avatars.discourse-cdn.com/v4/letter/k/ecae2f/32.png) [@Keiko](https://discuss.ocaml.org/u/Keiko)\
**Post date:** [November 2, 2017, 2:35pm UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/9 "2017-11-02T14:35:09Z")

</div>

Have you compared BuckleScript against ocamlclean + js\_of\_ocaml (as I don’t think js\_of\_ocaml runs ocamlclean per se.) Are the results of the comparison publicly available?

---

<div class="post-metadata">

**Author:** ![Keiko](https://avatars.discourse-cdn.com/v4/letter/k/ecae2f/32.png) [@Keiko](https://discuss.ocaml.org/u/Keiko)\
**Post date:** [November 2, 2017, 2:41pm UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/10 "2017-11-02T14:41:04Z")

</div>

P.S. By highly complicated libraries, I meant something like janestreet/async\_kernel and janestreet/incremental\_kernel.

---

<div class="post-metadata">

**Author:** ![dbuenzli](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/dbuenzli/32/18_2.png) [@dbuenzli](https://discuss.ocaml.org/u/dbuenzli)\
**Post date:** [November 2, 2017, 2:50pm UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/11 "2017-11-02T14:50:12Z")

</div>

> [@Keiko](#):
>
> If I understand correctly, to use OCaml libraries with BuckleScript, those libraries need to be compiled from the source using BuckleScript.

Indeed, as far as I can tell from what people are trying to PR on my repos `BuckleScript` is totally missing on the OCaml interop story.

I already got two pull requests ([here](https://github.com/dbuenzli/uuidm/pull/5) and [here](https://github.com/dbuenzli/react/pull/28)) to make my libraries usable from it but I don’t merge these things as the way to do this is very brittle, doesn’t scale, and leads to maintenance nightmare —metadata duplication, version numbers in the repos etc.

But I don’t think it should be too hard for bucklescript to generate an overlay for these things from the OCaml repos using the `opam` metadata.

---

<div class="post-metadata">

**Author:** ![bobzhang](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/bobzhang/32/553_2.png) [@bobzhang](https://discuss.ocaml.org/u/bobzhang)\
**Post date:** [November 2, 2017, 2:57pm UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/12 "2017-11-02T14:57:14Z")

</div>

yes. We made a Mario game , it’s only 7KB gzipped js, you can find it on my GitHub repo. BuckleScript is designed to deliver optimal experience to JS platform

---

<div class="post-metadata">

**Author:** ![bobzhang](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/bobzhang/32/553_2.png) [@bobzhang](https://discuss.ocaml.org/u/bobzhang)\
**Post date:** [November 2, 2017, 3:09pm UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/13 "2017-11-02T15:09:08Z")

</div>

There are technical restrictions: we want to map ocaml module to js module following npm module resolution and good inter operation with js ecosystem. In that case we need take over your build system, it’s understandable that you may not like it.  
But we work really hard to polish our build system, it works on all platform (battle tested on windows without relying on Cygwin ), highly performant (400 files in 1.5s) , the build system which gets the namespace right(jbuilder does not give you incremental build when adding files)  
Enforce a single build system is key to deliver an end to end experience, good to BuckleScript community in the long term.

---

<div class="post-metadata">

**Author:** ![dbuenzli](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/dbuenzli/32/18_2.png) [@dbuenzli](https://discuss.ocaml.org/u/dbuenzli)\
**Post date:** [November 2, 2017, 3:14pm UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/14 "2017-11-02T15:14:11Z")

</div>

> [@bobzhang](#):
>
> it’s understandable that you may not like it.

It’s not that I don’t like it. The metadata these people were trying to put in my repos would quickly get outdated. Unless you figure out a way to automate that, this strategy just can’t scale. If you want to allow your users to tap in the OCaml eco-system you will have to figure out a better strategy.

---

<div class="post-metadata">

**Author:** ![hcarty](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/hcarty/32/1824_2.png) [@hcarty](https://discuss.ocaml.org/u/hcarty)\
**Post date:** [November 2, 2017, 9:28pm UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/15 "2017-11-02T21:28:17Z")

</div>

@yawaramin replied above with a link - [Js\_of\_ocaml bindings for ReactJS](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/4)

---

<div class="post-metadata">

**Author:** ![Keiko](https://avatars.discourse-cdn.com/v4/letter/k/ecae2f/32.png) [@Keiko](https://discuss.ocaml.org/u/Keiko)\
**Post date:** [November 3, 2017, 10:01am UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/16 "2017-11-03T10:01:19Z")

</div>

I had an impression that the project in @yawaramin’s reply has not been completed – it does not appear to provide the complete bindings for ReactJS. (But I might have misunderstood.)

---

<div class="post-metadata">

**Author:** ![Keiko](https://avatars.discourse-cdn.com/v4/letter/k/ecae2f/32.png) [@Keiko](https://discuss.ocaml.org/u/Keiko)\
**Post date:** [November 3, 2017, 10:11am UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/17 "2017-11-03T10:11:01Z")

</div>

Only for the sake of the preciseness of the information, the compared Mario project with js\_of\_ocaml does not seem to be using [ocamlclean](https://github.com/bvaugon/ocamlclean) (OCaml Bytecode Cleaner).

That BuckleScript works with nmp is indeed very compelling (as we develop libraries for JavaScript programmers).

---

<div class="post-metadata">

**Author:** ![yawaramin](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ocaml.org/yawaramin/32/3384_2.png) [@yawaramin](https://discuss.ocaml.org/u/yawaramin)\
**Post date:** [November 4, 2017, 3:38am UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/18 "2017-11-04T03:38:31Z")

</div>

The project I referred you to is pretty much the most up-to-date binding you will find for ReactJS on JSOO. If you want something more recent you’ll probably have to write it yourself. The reason, as you can guess, is that the community is favouring ReasonReact.

---

<div class="post-metadata">

**Author:** ![Keiko](https://avatars.discourse-cdn.com/v4/letter/k/ecae2f/32.png) [@Keiko](https://discuss.ocaml.org/u/Keiko)\
**Post date:** [November 4, 2017, 8:31pm UTC](https://discuss.ocaml.org/t/js-of-ocaml-bindings-for-reactjs/1045/19 "2017-11-04T20:31:17Z")

</div>

@yawaramin Thanks a lot for correcting my wrong understanding. I was too hasty. I’ll give it a try.

ReasonReact is indeed compelling, but js\_of\_ocaml is a great project, too, it works excellently with Jane Street libraries.
