What Is ReasonML? A Better Way To Write React Applications

ReasonML 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) ReasonML 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 ReasonML 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 ReasonML 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.

ReasonML’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 ReasonML

You must have got a brief idea now about what is ReasonML. 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 ReasonML.

Why use ReasonML?

Two main strengths of ReasonML 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 ReasonML is built on OCaml semantics and therefore has an excellent type system.
• Practical Approach: Data structure used in ReasonML 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, ReasonML 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

  1 2 3 4 5 6

  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: ReasonML’s code output is very small and the build system finishes building in just 100ms (with small fluctuations)

  So yes, ReasonML 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 ReasonML without telling about OCaml and why OCaml was chosen to back ReasonML.

What is OCaml?

As defined by the www.ocaml.org , 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.

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 ReasonML 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, ReasonML 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 ReasonML. This is called interoperability with other programming languages, which in this case is ReasonML’s interop with JS (interop is used more commonly).

ReasonReact

ReasonReact is what we can call as React wrapped around ReasonML. 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 ReasonML’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.

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 ReasonML 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 ReasonML code more than often. It is considered a part of the ReasonML world. Since there are very high chances of us or any programmer using the JS in ReasonML, it is better we learn how to interop JS with ReasonML.

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

Observe that the code has a variable b which is not of the JS but of ReasonML’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 ReasonML 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

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 ReasonML and OCaml. This was all about ReasonML, you can explore more on the official documentation and practice.

Harish Rajora

I am a computer science engineer. I love to keep growing as the technological world grows. I feel there is no powerful tool than a computer to change the world in any way. Apart from my field of study, I like reading books a lot and write sometimes on https://www.themeaninglesslife.com .

See author's profile