Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

A JavaScript Flavor 52% of Developers Don’t Know About

DZone's Guide to

A JavaScript Flavor 52% of Developers Don’t Know About

Ever heard of Reason? Don't worry, a lot of developers haven't. But after reading this article you may want to check it out.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

Reason is a programming language created by Facebook that was released in 2017, but has a small community today. According to a survey by StateofJS, the Reason language has not been heard of 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 was made keeping JavaScript programmers in mind. Facebook needed a new language, but, in addition to that, did not want to create an entirely new language, i.e. they did not want to create everything from scratch. They wanted to build it on top of an existing language so that programmers didn’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 is mainly used in academics, there is a reason why OCaml makes Reason so great.

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

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

Why Use Reason?

There are 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";
    is telling the compiler that name is a variable of type string. Type systems also come into play while defining the functions and semantics of a program. Reason is built on OCaml semantics and therefore has an excellent type system.
  • Practical Approach: The data structures 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 can create some headaches for programmers when they come across it. As a part of the 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 following code 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, 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 you a litle more about OCaml and why OCaml was chosen to back Reason.

What Is OCaml?

As defined on www.ocaml.org, OCaml, or Objective Caml, is a general-purpose programming language with an emphasis on expressiveness and safety. Let’s look at what they mean by expressiveness and what has made OCaml a successful language with a very active community today, even after 22 years.

OCaml uses the functional paradigm in programming which basically means that functions are the building blocks of the program. OCaml is powerful when it comes to 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);

Type safety in OCaml is one of the most compelling features. Used in many big projects today, the OCaml compiler verifies that the code is good to go before it gets executed. How does this help? Well, many runtime errors are detected during compilation, like pointer or integer erros, or attempting to access a field which is non-existent. These type errors, when commited in runtime environements, can cost a lot of time and effort. Getting and correcting it in compile time is very efficient.

Using OCaml as the backbone for Reason allows all the features of OCaml to be incorporated automatically. OCaml gives us the unique power to pass functions into our arguments. As discussed above, Reason compiles JavaScript code by default and the syntax is to similar and built with JS, thus it is very hard to ignore the fact that you will be using one of the JS libraries while coding your application in Reason. This is called interoperability with other programming languages.

ReasonReact

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

React is a JavaScript library for building an interactive user interface easily. React helps us in developing small components and adding them to other components and creating an application. React has some principles that 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.

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. 

Reason Interop JS

Interoperability is the ability of two languages to work together in the same program efficiently and synchronously. The main point of attraction for Reason for a developer is its close similarity to JS. Via innteroperability, we can combine the power and strengths of two languages and give birth to something more powerful. You can relate this to how HTML and JS work together. 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 fairly often. It is considered a part of the Reason world. Since there are very high chances of us or any programmer using 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, FFI can also be used. 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. Interoperability 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 a 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.val]
external setTimeout : (unit => unit, int) => float = “setTimeout”;

The above code makes use of the JS function setTimeout and @bs.val corresponds this to a value.

I hope 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.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

Topics:
web dev ,reason ,ocaml ,javascript flavors ,interoperability

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}