A bit of background
To quote the official docs:
Melange is a backend for the OCaml compiler that emits JavaScript. Melange strives to provide the best integration with both the OCaml and JavaScript ecosystems.
Basically, Melange lets you generate JS code from OCaml code. Reason (aka ReasonML) is an alternative syntax for OCaml that looks more like JS. Reason React are Reason bindings to React so that you can create React apps with Reason.
You may have heard of BuckleScript and you may be wondering if there is a relationship between Melange and BuckleScript. To quote the docs again:
... at some point the goals of both BuckleScript and Reason projects become harder to reconcile. In August 2020, the BuckleScript team decides to rename to ReScript, stops adding support for the latest versions of the Reason parser, and replaces it with a new parser that changes the syntax. The reasons for the rebranding are explained in the official ReScript blog post.
...
This is where Melange comes in. A few weeks after the rebranding of BuckleScript to ReScript, António Monteiro starts working on a fork of BuckleScript with a simple (not easy) goal: replace the Ninja build system, which BuckleScript had been using from its creation, with Dune, which is the most used build system for OCaml projects.
Melange has reached a 1.0 release, and it is used in production at Ahrefs. server-reason-react, which was discussed by ThePrimeagen, is a great article that shows what Melange, Reason/OCaml and ReasonReact can do.
Reading
If you know nothing about OCaml and its ecosystem the new(ish) docs are a great place to start. I would then spend some time going over the Melange docs which explain how to set everything up and JS interop. If you know JS then the syntax in the Reason docs should not be too alien. And if you know React then it should not take long to go over the ReasonReact docs.
Quick start templates
- A template using both OCaml and Reason syntax, ReasonReact and webpack: https://github.com/melange-re/melange-opam-template.
- A template using both OCaml and Reason syntax, ReasonReact and Vite: https://github.com/pdelacroix/melange-vite-template
- A template using only Reason syntax, ReasonReact, Tailwind and Vite: https://github.com/psb/melange-opam-template.
Example apps
Here is a Hacker News app that uses ReasonReact and Tailwind. It is a port of the original app that used BuckleScript. A good exercise for the reader would be to update the app to use the official HN API.
Because Melange outputs JS you can sprinkle Reason and ReasonReact into existing JS apps. Here is an example Astro application that uses ReasonReact components and Reason lambda functions on Netlify. I'll admit that it did take a while to figure out how to get everything setup properly so that everything worked together, but now you don't have to 😄. Check out the open and closed issues in the repo to see what kind of problems I was having.
Getting help
Hopefully the docs and example apps can get you up and running with Melange, Reason and ReasonReact, but if you need further help then the Reason Discord channel is a great place to get help. I owe thanks to António Monteiro, Javier Chávarri, David Sancho and Dimitris Mostrous for helping me. Pop in and say hi 👋. There is also the Reason forum.
You can get help with OCaml and OCaml tooling in the Reason Discord but there are more OCaml people in the OCaml Discord channel and OCaml forum.
Next
So far I have really enjoyed working with this stack. The compiler is incredibly fast, the type system and tooling are great, and Reason can fit in to the typical JS workflow. I still have some experiments I want to do with ReasonReact (e.g., using third party React components), but I hope to be able to play with Dream soon and build some full stack applications. Type safety from the DB to the frontend would be great!
Top comments (0)