This blog post is about to show a new way of writing web pages (blogs, tutorials, documentation…) about Reason.

What is Reason?

Reason is not a new language; it’s a new syntax and toolchain powered by the battle-tested language, OCaml. Reason gives OCaml a familiar syntax geared toward JavaScript programmers, and caters to the existing NPM/Yarn workflow folks already know.

In that regard, Reason can almost be considered as a solidly statically typed, faster and simpler cousin of JavaScript, minus the historical crufts, plus the features of ES2030 you can use today, and with access to both the JS and the OCaml ecosystem!

Reason is supported by Facebook and has very good integration with React.js.

Einstein

The klipse plugin

The klipse plugin is a javascript tag that transforms static code snippets of an html page into live and interactive snippets:

  1. Live: The code is executed in your browser
  2. Interactive: You can modify the code and it is evaluated as you type

Klipse is written in clojurescript,

The following languages are supported by Klipse - in any modern browser (including mobile): clojure, ruby, javascript, python, scheme, es2017, jsx, brainfuck, c++, Lua, OCaml and Reason.

In this article, we are going to demonstrate interactive Reason code snippets evaluated by BuckleScript and refmt.

The magic

The evaluation of Reason code snippets inside your browser is done in 3 steps:

  1. Reason code is converted into Ocaml code by refmt.
  2. Ocaml code is transpiled into javascript by Bucklescript.
  3. javascript code is evaluated with eval js function.

Klipsify a Reason code snippet

Let’s have on this page a small static code snippet:

let hello (name) = "Hello " ++ name ++ "!";
let a = hello("World");

(This blog is written with jekyll: the kramdown plugin helps a lot in beautifying the code snippets.)

And now, we are going to klipsify this code snippet:

let hello (name) = "Hello " ++ name ++ "!";
let a = hello("World");

Feel free to edit the code above: it’s interactive => it evaluates as you type.

All I had to do in order to klipsify my code snippet, was to set the language-klipse-reason class (configurable) to the appropriate html element.

See it by yourself: here is the source of this page:

<p>And now, we are going to <strong>klipsify</strong> this code snippet:</p>

<pre><code class="language-klipse-reason">
let hello (name) = "Hello " ++ name ++ "!";
let a = hello("World");
</code></pre>

Live demo

Before dealing about integration of the klipse plugin on a web page, let’s enjoy another klipse snippet implementing factorial in Reason:

let rec fact (n) =
switch (n) {
| 1 => 1
| _ => n * fact(n-1)
};

let x = fact(9);

Go ahead! modify the code snippet above, and it will evaluate as you type…

Transpilation into JS

Klipse can also display the transpiled javascript code.

Here you go:

let rec fact (n) =
switch (n) {
| 1 => 1
| _ => n * fact(n-1)
};

let x = fact(9);

Conversion into Ocaml

And if you are really curious, you can see the converted Ocaml code:

let rec fact (n) =
switch (n) {
| 1 => 1
| _ => n * fact(n-1)
};

let x = fact(9);

From Ocaml to reason

You can also convert from Ocaml to Reason:

let rec fact n = match n with 
| 1 -> 1 
| _ -> n * (fact (n - 1))

let x = fact 9

Evaluating a gist

Sometimes, instead of having the code of the snippets directly into your web page, you want to store it in another place e.g. in a github gist.

For instance, we could evaluate this gist that defines a high-order function sigma that returns the sum of the results of applying a given function f to each element of a list:

Again, feel free to modify the code…

Integration

All you need to do in order to integrate the klipse plugin to your blog (or any other web page), is to add this javascript tag to your web page:

<link rel="stylesheet" type="text/css" href="http://app.klipse.tech/css/codemirror.css">

<script>
    window.klipse_settings = {
        selector_transpile_reason_3: '.language-transpile-reason',
        selector_transpile_reason_3_to_ocaml: '.language-transpile-reason-to-ocaml',
        selector_eval_reason_3: '.language-klipse-reason',
        selector_ocaml_to_reason: '.language-ocaml-to-reason'
     };
</script>
<script src="http://app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>

By the way, this is exactly what we did on the page that you are currently reading.

Other languages

The Klipse plugin is designed as a platform that could support any language that has a client-side evaluator, by writing modules to the Klipse plugin. Currently, there are modules available for the following languages:

Conclusion

Go ahead!

Write your own blog post with interactive snippets in your preferred language.

It’s super simple to integrate the Klipse plugin on a blog bost: check the instructions on Klipse github repository.

You can get inspired by the work of the Klipse community…