5

Writing Javascript from the future. A brief intro to Rescript.

 2 years ago
source link: https://dev.to/guilhermells/writing-javascript-from-the-future-a-brief-intro-to-rescript-44p6
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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.

@module("@headlessui/react")
external Transition: () => React.element = "Transition"
Enter fullscreen modeExit fullscreen mode

Pretty simple, I'd say.

Here are some code chunks showing off some syntax.

let student = {
  "name": "John Cena",
  "id": 123456
}
// this is both valid JS and Rescript
Enter fullscreen modeExit fullscreen mode
let multiply = (a, b) => a * b
let result = multiply(10,4)
// this is also both valid JS and Rescript
Enter fullscreen modeExit fullscreen mode

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.

    
        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)

    
        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)

    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.

  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.

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!
Enter fullscreen modeExit fullscreen mode

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.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK