Word4 web UI in ReasonML
I started experimenting with BuckleScript+ReasonML and using it to rebuild https://word4.binary.ink.
What is ReasonML
I’m the worst at this as I’m finally taking a deep interest in Functional Programming (FP) after working more and more with the FP concepts in JavaScript. So there is definitely room for improvements in this post.
It is an object-functional programming language developed at Facebook. It builds ontop of OCaml with their own flavor of the syntax and geared towards providing interop with JavaScript.
Object-functional programming is a programming approach emphasizing the transformation of objects and using object-oriented as well as functional means and principles to this end. The production of effects in general as well the mutation of objects and object references in particular happen only sparingly, as transparent as possible to other parts of the code and separated as much as possible from transformational code. [1]
OCaml is a well-established pragmatic functional programming language that I’m slowly taking interest in. It boasts having a full-featured type system. ReasonML basically builds on this to make working with JavaScript safer.
A Hello World
example
JavaScript This is an example of how I would write a simple hello in javascript
// hello.js
console.log('hello world')
ReasonML This is an example of the same thing in ReasonML
// hello.re
let () = Js.log("hello world")
Resulting JavaScript ```javascript /// hello.bs.js // Generated by BUCKLESCRIPT VERSION 2.2.2, PLEASE EDIT WITH CARE 'use strict';
console.log(“hello world”);
/* Not a pure module */
### Another `Fib` example
This is an example of using recursion and the fibonacci example.
JavaScript
```javascript
let fib = (n, a, b) => {
if (n === 0) {
return a;
} else {
return fib((n - 1), b, (a + b))
}
}
fib(10, 1, 1)
// 89
ReasonML
let rec fib = (n, a, b) => {
if (n == 0) {
a;
} else {
fib ((n - 1), b, (a+b))
}
};
Js.log(fib(10, 1, 1));
Resulting JavaScript ```javascript // Generated by BUCKLESCRIPT VERSION 2.2.2, PLEASE EDIT WITH CARE 'use strict';
function fib(_n, _a, _b) { while(true) { var b = _b; var a = _a; var n = _n; if (n) { _b = a + b | 0; _a = b; _n = n - 1 | 0; continue ;
} else {
return a;
}
}; }
console.log(fib(10, 1, 1));
exports.fib = fib; /* Not a pure module */
## More fun
To learn more about it check out the sources and [https://reasonml.github.io](https://reasonml.github.io).