Exploring ReScript

Getting started

Install dependencies

npm i

For executing the project, run this two processes concurrently.

npm run rs:build:watch
npm run build:dev

Those are for rescript -> js compilation and webpack bundling respectively.

What is ReScript

ReScript is a review of Reason language and BuckleScript(Js compiler) that brings all the benefits of OCaml type system into Js environment. It was announced on July 2020.

https://rescript-lang.org/blog/bucklescript-is-rebranding https://medium.com/swlh/learn-rescript-a-safer-way-to-write-javascript-part-1-e0b56d447c44

A bit of history

Before ReScript was Reason, a language built over OCaml that takes advantage over its type system with a more familiar syntax for Js developers.

Reason was first released in May 2016 and was developed at Facebook by Jordan Walke, the creator of React. This new language was bundled along BuckleScript, a Js compiler that allowed to transpile from OCaml to Js.

Later, ReasonReact augmented Reason syntax for easier development of React apps.

Reason was unsuccessful due to the large tech stack required(Js, React, OCaml, Reason, BuckleScript, etc...)

https://reasonml.github.io/docs/en/what-and-why https://reasonml.github.io/reason-react/docs/en/what-and-why https://reasonml.github.io/docs/en/faq#what-is-bucklescript-and-rescript-and-why-is-it-mentioned-in-so-many-reason-related-resources

ReScript capabilities

The documentation is divided in three main sections:

  • Language features
  • Javascript interop
  • Build system

Language features

Here it explores language syntax and type system. Things that I found interesting:

  • Variables are immutables
  • Almost all types are infered but Records. You may declare types if you want as well. Supports composition, generic and recursive types.
  • Most primitive types has its equivalent in Js and it's expanded with some more like Int32, Int64 or TypedArray
  • Supports tuples, records, objects, list, arays and variants(enums) as data structures
  • Null & undefined doesn't exist as such. They are supported through None or unit. Type systems enforces you to handle those cases.
  • Functions are curried by default and may have labelled arguments
  • Pipe operator
  • Pattern matching
  • JSX support(besides rescript-react)
  • Async programming is only supported thourh promises & callbacks. Async/await feature release is being delayed for better pipe operator integration.
  • No need of importing modules. They are always available. Also has module interface support(Signatures).
  • Decorators

https://rescript-lang.org/docs/manual/latest/overview

Javascript interop

ReScript has the capability of integrating existing Js and viceversa in the same project. This allows to start using ReScript in any project. It's a big topic but this are the some relevant features.

  • Raw Js injection
  • Shared data types between Js and ReScript
  • External binding to any Js module/library, global variables
  • Browser support & polyfills for some ReScript own types

https://rescript-lang.org/docs/manual/latest/interop-cheatsheet

Build system

ReScript come with its own build system that compiles your project to Js browser-ready.

  • Namespace support
  • You may export to es6 or commonjs
  • Easy interop with other bundling systems like Webpack or Rollup

https://rescript-lang.org/docs/manual/latest/build-overview

ReScript-React

Although ReScript handle JSX by default, rescript-react offers first class bindings to the language. It supports element rendering and hooks nicely and comes with several modules for DOM access, event handling, inline styling and routing.

https://rescript-lang.org/docs/react/latest/introduction

Conclusions

ReScript type system is really something. It's strict and forces you to cover all cases. Main IDE's and editors supports it through plugins allowing syntax highlighting and errors, type hint and autocomplete, snippets, etc... Documentation is good, especially when it compares ReScript -> Js outputs but sometimes examples are poor. Today its community and ecosystem is small but Js interop mechanism may turn the tides in a near future. Also we have to take in count that it's Facebook who is behind the language.

The Js compilers/transpilers aren't new and more will come. Who knows. It may happen that we don't need to develop in Js anymore(as we do today) but in our favorite language, exporting our code to Js browser-ready.

ReScript simple syntax looks really good and it's type system it's nuts but right now it needs to have a complete Js support(async/await, bindings...) a better library ecosystem and more community. After that it can even become a game breaker.

Some other interesting links