melange VS rescript

Hey HN, at Ahrefs we have been working on an online book that hopefully helps React developers get up and running with Melange, an OCaml to JavaScript compiler. You can read more about Melange here: https://melange.re/.

There are still a few chapters that we'd like to add before considering it "complete", but it might be already helpful for some folks out there, that's why we decided to publish it early.

The book uses Reason syntax to implement React components using ReasonReact components. You can read more about both in:

https://reasonml.github.io/

In my previous post on trying to use the NextJS App Router and Reason I described some of the problems and limitations of their compatibility with one another. With the release of Melange 2 I decided to see if the new features of Melange 2 could help to increase the compatibility of Reason and the NextJS App Router. I have also documented some of the things learnt after trying Melange (v1) with Astro and Remix.

So it's Reason, not ReasonML which the umbrella project's name, and Rescript is a imcompatible syntax split from the Bucklescript team (that previously transpiled Reason to JS). Bucklescript's new name is... Rescript.

But not everyone agrees with the split and work is being done on Melange to replace Bucklescript : https://github.com/melange-re/melange

Ultimately JsOfOcaml can directly transpile Ocaml to JS.

In reality, most folks that developed BuckleScript frontends with ReasonML switched to ReScript syntax and are happy with it. Some felt more friction because of their reliance on PPXes or FP-heavy libraries (like Relude) and those people tend to use the Melange fork of BuckleScript or they switched to js_of_ocaml.

There is a fork of ReScript that supports ReasonML syntax and with the goal of maintaining Ocaml compatibility: https://github.com/melange-re/melange.

There's also a fork of BuckleScript/ReScript called Melange that guts its build system so that instead of using ninja, it works with more standard tools for the ecosystem, specifically dune and esy. In doing so they managed to also finally get the compiler off of OCaml 4.06: now it can use a newer OCaml compiler and take advantage of four years worth of language and compiler improvements.

For OCaml and ReasonML your options are js_of_ocaml (mentioned here in ReasonML docs) or a fairly new fork of BuckleScript called melange. They differ in implementation and output, with JSOO taking intermediate bytecode generated by ocamlc and turning it into unreadable JS, vs Melange being a patched compiler that builds more human-readable JS.

Fortunately, the OCaml compiler is very modular, and there have been efforts to make things more... reasonable.

- Reason, a different syntactic frontend for regular OCaml: https://reasonml.github.io/

- ReScript, a language with OCaml semantics that compiles into: JS https://rescript-lang.org/ (I suppose it's a reincarnation of js-of-ocaml).

Elm, ReScript, F#, Ocaml, Scala… it’s just normal to name your types, then use them places. In fact, you’ll often create the types _before_ the code, even if you’re not really practicing DDD (Domain Driven Design). Yes, you’ll do many after the fact when doing functions, or you start testing things and decide to change your design, and make new types. Either way, it’s just “the norm”. You then do the other norms like “name your function” and “name your variables”. I’m a bit confused why it’s only 2 out of 3 (variables and functions, not types) in this TypeScript Angular project. I’ll have to look at other internal Angular projects and see if it’s common there as well.

A web application makes use of these same ingredients, i.e. HTML, CSS, and JavaScript, but it uses significantly more JavaScript. As the JavaScript powering your web application grows in size it can bring with it a variety of problems that a few languages, like TypeScript, ReScript, PureScript, and Elm, have attempted to solve. Each of the aforementioned compile to JavaScript languages have their pros and cons but it is beyond the scope of this article to get into those details. Suffice it to say, my preference is Elm. It is also not the goal of this article to convince you to use Elm but only to show you how Elm fits into the flow of creating a web application and hosting it on GitHub Pages. So let's continue by adding Elm to our project.

Since JavaScript doesn't have a pattern-matching like Rust, it could be hard to replicate the same logic. I used the ReScript compiler to maintain the original logic as much as possible. It made me able to port it confidently. Specifically check_pair function can be converted into this.

ReScript, the "Fast, Simple, Fully Typed JavaScript from the Future", has been around for awhile now. The name "ReScript" came into existence in 2020, but the project has a history going back to 2016 under the combo of Reason and BuckleScript. The name change came about as the goal of BuckleScript shifted to try and create a language that was a part of the JavaScript ecosystem; JavaScript is the only build target, support for all of the features JavaScript devs expect to have like async/await syntax, and an easy to use standard library for JavaScript's built in functions.

ReScript is a fully typed language with an easy to understand JS like syntax, blazing fast compiler, that compiles to JavaScript. You can easily drop it into an existing project, and there is even a way to generate TypeScript types if you want to add it to a TypeScript project!