Writing Javascript from the future. A brief intro to Rescript.
Tags: rescript, react, javascript, typescript
Published: 2021-08-03 15:05:53

## The ignition point
Rescript is a strongly and statically typed functional programming language.

## Alright, so what?

Part of Rescript's magic comes from its interoperablity and similarity with the well known Javascript. This means you can use JS libraries in Rescript code and use Rescript code in projects with JS. The compiler transforms the Rescript code into readable JS or TS.


## Showing the code

Here is an example of interop with external JS libs.

```rescript
@module("@headlessui/react")
external Transition: () => React.element = "Transition"
```

Pretty simple, I'd say.
 
Here are some code chunks showing off some syntax.

```rescript
let student = {
  "name": "John Cena",
  "id": 123456
}
// this is both valid JS and Rescript
```

```rescript
let multiply = (a, b) => a * b
let result = multiply(10,4)
// this is also both valid JS and Rescript
```

## Why should you use it?

Until now, i've only said its similarities to Javascript, I have not given any examples on why is it usefull or even worth using. Here are some Rescript built-in features that I find extremelly usefull.

1. Strong, static and inferred type system
    Rescript is a language that uses the ML family type system behind the scenes, that is why it is bullet proof. Here is a small comparison between Rescript and Typescript type inference.
    ```rescript

        let sumIfTrue = (test, a, b) => {
          let term1 = if test(a) {a} else {0}
          let term2 = if test(b) {b} else {0}
  
          term1 + term2
        }

        let isEven = x => mod(x,2) === 0

        let result = sumIfTrue(isEven, "string", 2)

    ``` 

    The code above has an error, the rescript compiler knows that the parameter `a` must be a number. ([Example in Rescript Playground](https://rescript-lang.org/try?code=DYUwLgBAzgrgtgSQGYBUBOMQQLwQBRghRgA0EAhmQEYCUOAfBAN4BQEEokhacAjDhACWSCIWJ5ydJuQC+EEMChYmABhlsO4USB4AmAcO3jazKnIVLmajRu58IAam16W6lpyFQAogDcQAOwEADwYIOAB7ABM8IJJdOmxEiBUWdy00IhhgSFxYRFQMEDxBbz9-MgAiYjRBfwBzCrJ4oA))

    ```typescript

        const sumIfTrue = (test, a, b) => {
          let term1 = test(a) ? a : 0;
          let term2 = test(b) ? b : 0;

          return term1 + term2;
        }

        const isEven = (x) => {
          return x % 2 === 0;
        }

        const result = sumIfTrue(isEven, "string", 2)

    ``` 

    The Typescript compiler will not automatically infer the types of any function, hence this is valid TS and might break in a real world app. ([Example in Typescript Playground](https://www.typescriptlang.org/play?#code/MYewdgzgLgBBCuBbAkgMwCoCd4FMYF4YAKKHaAGhgENKAjASgID4YBvAKBhgBsdZTMiAIwEYpaESqMA-NRgAuGAAYA3Jx58xOQQCZR4qEQYxZtBcrXrMfeJjBbBIgNQPEOtQF927UJFgBLCABRADcce0IiAA9GfBYOLmsoW3somABSGD18HIt2Lx9waDlCBBQMbBwiQNDwygAiaEx-MABzevIdenYgA))

    The examples above are really simple and the mistakes are easily identifiable, but we must consider that in larger and more complex applications these mistakes gets harder and harder to identify manually.

2. Fast compile time
Many developers do not feel the need of this feature, because they have high-end machines and build times in big TS projects already gotten so high, that we migh have lost perception of speed in this case. Rescript's compiler makes type checking fast again.

3. JSX
React can be used out of the box with rescript, since JSX is part of Rescript's syntax. I will talk a little bit more about this in a future article. If you are super interested, checkout out the [official docs](https://rescript-lang.org/docs/react/latest/introduction).

4. No null or undefined
This wipes out a big amount of bugs, since there are not `Cannot read property foo of undefined` or `undefined is not a function` in rescript code. However, rescript has the concept of nullish and optional values safely implemented in the language core.

5. Pattern Matching and Labelled arguments
They are not something that you look for until you realize how usefull they are. After that, you will miss these features in any other language that does not have them.
```rescript
let getIshColor = (~color,~suffix) => {
  let ish = switch color {
    | "blue" => "blueish"
    | "red" => "redish"
    | "yellow" => "yellowish"
    | _ => "unknownish"
  } 
  ish ++ " " ++ suffix
}
let color = getIshColor(~color="red",~suffix="car") // no more confusing argument orderantion!
```
## Why not to use it

*Using something new and not tested at scale.*
  - It is natural that human beings reject something that changes their day to day directlly. The principles of rescript might be a pain in the beginning, even tought they will pay off in a medium/long term. About the "tested at scale": rescript is used by Facebook's team and many other companies, such as Drafbit. The technical quality of their products cannot be contested, so the point here is about quantity. We only know something can be safelly used until many people start using it.

## Outro
For this article, that is all. I am probably going to cover other important points of rescript in future posts, but for the introduction I feel like this is enought.

Thanks for the reading and see you in the next one.