October 29, 2020 | 2 minutes read

Porting my site to Reason

#reason#react#nextjs#webdev

I've heard of ReasonML for a while now.

It's a language that always intrigued me since I'm a fan of FP patterns. Well, I finally got around to really diving deep into it (aside from todos 😅).

Reason is not too different from JS/TS so the port was mainly about stripping away all the TypeScript types and letting the compiler infer the rest.

I've got to say, my favourite thing about Reason is the Rescript compiler. The inference it provides is great! It makes it so you only have to provide types at the very bottom level.

What do I mean?

Take for example this code:

1module Component = {
2 [@react.component]
3 let make = (~name) => <div> React.string(name) </div>
4}
5
6// using the component
7<Component name="Bob"/>

As you can see, I haven't declared a single type. The prop

1name
is inferred to be a string because it's used with
1React.string
!

The type of

1React.string
is something like this:

1module React {
2 let string: string => string = //..
3}

A major pain point I have though is that modeling data can be a bit of a hassle. There is no extending base types within Reason/Rescript (there is in ocaml), so something as simple as this requires copy pasting:

1interface Person {
2 name: sting;
3}
4
5interface Employee extends Person {
6 company: string;
7}

The Reason equivalent is:

1type person = {
2 name: string
3};
4
5type employee = {
6 name: string,
7 company: string
8}

Yeah...

Overall, I really enjoy using Reason/Rescript. Just the inference itself is enough for me to reach for it whenever I can!