Reasonml – A JavaScript Flavor 52% of Developers Don’t Know About
Tags: showdev, codenewbie, javascript, webdev
Published: 2022-07-15 06:41:47

Reason is a programming language created by Facebook that was released in 2017 but has a small community today. According to a survey at stateofjs (https://2018.stateofjs.com/javascript-flavors/overview) Reason language has not been heard by almost 52% of people. Facebook says it is a faster and simpler cousin of Javascript and that proves the point that the syntax of Reason is made keeping in mind the Javascript programmers. Facebook needed a new language but in addition to that did not want to create an entirely new language, which means they did not want to create everything from scratch. They wanted to build it on top of an existing language so that programmers don’t need to learn an entirely new syntax and semantics. This resulted in the birth of Reason which is made 80% on top of OCaml. OCaml is a language that has been around for 22 years now. Although Ocaml has a small community and academic focussed mainly, there is a reason why OCaml makes Reason so great.

Reason’s compilation target is Javascript and hence it creates a beautiful readable compilation code in Javascript helping a huge army of JavaScript programmers across the globe. For example, the below-mentioned code is in Reason

   

```
 let add = (a,b) => a+b;
    add(13,2);
```

You must have got a brief idea now about what is Reason. But what’s the point of knowing something until we know why we should be using that thing? So in the next section, I will tell you why should we use reason.

***Hey! Do you know? [md5-hash-calculator](https://www.lambdatest.com/free-online-tools/md5-hash-calculator?utm_source=devto&utm_medium=organic&utm_campaign=jul16_pk&utm_term=pk&utm_content=free_tools) — Free online tool to generate MD5 hash values.***

## Why use Reason?

Two main strengths of Reason apart from it being derived from OCaml:

* **Excellent type system:** A type system is a set of rules in a programming language where you tell the compiler what the type of the variable (or object etc) is. For example
var name = "Harish";
Here you are telling the compiler that name is a variable of type string. Type system also comes into play while defining the functions and semantics of the program. The reason is built on OCaml semantics and therefore has an excellent type system.

* **Practical Approach:** Data structure used in Reason are immutable in nature. This means that once the variable is declared, it’s value cannot be reassigned or changed. The variable declaration for an immutable is performed using ‘let’. This is done by default but this creates some headache for the programmers when they are stuck across it. If you have done programming, then you must have stuck here too. As a part of a solution, you need to generate another record for overwriting the value that needs alteration. Hence, Reason gives us the practical approach to just declare the variable or object as mutable so that it knows that whenever the value is reassigned, it is perfectly within the semantics.
The the following shortcode here will show the immutable object.

    

```
type record = {
    age : int,
    mutable marks: int,
    }
    let  studentData = {a:23, b:40};
    studentData.b = 78; //Changing the value of marks since it is mutable
```

* **Better Performance:** Reason’s code output is very small and the build system finishes building in just 100ms (with small fluctuations)

* So yes, Reason has got some power in it to be used as a futuristic approach in JavaScript. This will surely create another approach for Web developers in their applications. But in the above sections, we came across OCaml a lot. It would be unfair to finish off this post about Reason without telling about OCaml and why OCaml was chosen to back Reason.

***Do you know? [placeholder-image-generator](https://www.lambdatest.com/free-online-tools/placeholder-image-generator?utm_source=devto&utm_medium=organic&utm_campaign=jul16_pk&utm_term=pk&utm_content=free_tools) — Placeholder images are used by designers to visualize a design before the final image is obtained.***

## What is OCaml?

As defined by the [www.ocaml.org](https://ocaml.org/?utm_source=devto&utm_medium=organic&utm_campaign=jul16_pk&utm_term=pk&utm_content=blog) , OCaml or Objective Caml, is a general-purpose programming language with an emphasis on expressiveness and safety. Let’s look what they mean by expressiveness and safety words that have made OCaml a successful language with a very active community today even after 22 years of its birth.

Expressiveness means the programmer can express his program more freely and informatively. OCaml uses the functional paradigm in programming which basically and naively means that functions are the building blocks of the program. OCaml language has a huge power in defining functions. Always remember that our complete code and the quality of the program is always better in functional paradigms.

   

```
 let add(a,b,c,d) = a+b+c+d;
    add(2,3,4,5);

```
Safety in OCaml is one of the most compelling features. Used in many big projects today, OCaml compiler verifies the program before its execution. How does this help? Well, many runtime errors are detected out in a compilation like a pointer and an integer confusion or may be accessing a field which is non-existent or does not exist at all. These type errors when done in runtime sometimes costs a lot of time and efforts. Getting and correcting it in compile time is very time efficient.

Using OCaml as the backbone for Reason allows all the features of OCaml to incorporate automatically. OCaml gives us the unique power to even pass the functions in the arguments. As discussed above, Reason compiles down JavaScript by default and the syntax is almost similar and built with JS flavor, it is very hard to ignore the fact that you will be using one of JS libraries while coding your application in Reason. This is called **interoperability** with other programming languages, which in this case is Reason’s interop with JS (interop is used more commonly).

## ReasonReact

ReasonReact is what we can call as React wrapped around Reason. Before coming to this, let’s briefly look at what is React.

React is a Javascript library for building an interactive user interface easily. React helps us in developing small components and add them with other components and create an application. Reacts some principles do not match with that of the JS. These are:

* **React focuses on immutability which is not used in Javascript (without any external libraries).**

* **React also focuses on functional programming but Javascript does not.**

* **React also uses the dynamically lose data type system used by JS because it is a JS framework.**

Since all these things were a small trouble for the developer community, ReasonReact is the solution to it. ReasonReact is a way to use the Reason’s power to build Reason’s user interfaces. ReasonReact uses the static strong type system and functional paradigm as discussed in the previous sections, ReasonReact forms a perfect combination for any developer. All these things that were not before, comes from Reason part of ReasonReact and hence is used by many.

***Hey! Do you know? [random-binary-generator](https://www.lambdatest.com/free-online-tools/random-binary-generator?utm_source=devto&utm_medium=organic&utm_campaign=jul16_pk&utm_term=pk&utm_content=free_tools) — Free online tool to generate binary numbers or digits.***

## Reason Interop JS

**Interoperability or interop is the ability of two languages to work together in the same program efficiently and synchronously.** Definitely, it is of a greater advantage as we have discussed all through the article. The main point of attraction for Reason for a developer is its close similarity to JS. By interop, we can combine the power and strengths of two languages and give birth to something more powerful. You can relate interop concept to HTML and JS interop. How just one "script" tag can render JS into the HTML and create responsive web pages in a minute.

We use the JS libraries in our Reason code more than often. It is considered a part of the Reason world. Since there are very high chances of us or any programmer using the JS in Reason, it is better we learn how to interop JS with Reason.

So whenever you are about to use the JS code in your Reason code, you have to use the “raw” keyword. This code will help you out

    

```
[%%raw “var age = 23”];
    let add = [%raw {|
    function fun(b){
    return a+b;
    }
    |}];

```
Observe that the code has a variable b which is not of the JS but of Reason’s and we have combined both of the languages and used Reason interop with JS.

Along with the interop, a term FFI can also be heard by you. These both the terms are sometimes used interchangeably and hence it is better to clear the air rather than having a confused mind. An FFI or Foreign Function Interface is the same phenomenon of using two languages with each other and using similar semantics. Both the language semantics are used as original and still, we can run both of them in a single program. This term is more common among Haskell and Python programmer. Just like how we use C semantics into C++ and still run our code. Deeply interop is a broader term with no specific focus on something but when we use **FFI**, it directly points to the semantics of one language being used with/in the semantics of another.

In using Reason and JS, there are few objects already available which you can have a look at. Some of them are

* **@bs.new — for a new instance**

* **@bs.val — variables/functions**

* **@bs.send — obj.method()**

* **@bs.obj — creating JS objects**

and there are many more. “bs” here refers to bucklescript

   

```
 [[@bs](http://twitter.com/bs).val]
    external setTimeout : (unit => unit, int) => float = “setTimeout”;
```

This makes use of the JS function setTimeout and @bs.val tells that it will correspond to a value.

I guess you now have a good grip on Reason and OCaml. This was all about Reason, you can explore more on the official documentation and practice.