Willem Hoek

HOWTO: create a JavaScript from OCaml with Js_of_ocaml

Feb 12, 2020

Caravaggio, The Cardsharps (Italian: Bari), c 1594

What is js_of_ocaml

“Js_of_ocaml translates your OCaml or Reason programs to Javascript. You can choose between readable or optimized JavaScript. It makes it possible to run pure OCaml programs in JavaScript environment like browsers and Node.js” [1]

What this means is that you can create JavaScript programs by writting OCaml code.

Why would you want to use OCaml? “What makes OCaml special is that it occupies a sweet spot in the space of programming language designs. It provides a combination of efficiency, expressiveness and practicality that is matched by no other language” [2].

There are also some great talks by Yaron Minsky about this [3][4]. In short, with OCaml and variants such as Reason you get:

Correctness: Less bugs, therefore more reliable due to type safety and type inference -
Agility: Ability to be productive when creating and maintaining your code
Performance: Programs compile and execute, fast

Hello World in the console

Here is a toy program to show the process. For this to work, you need OCaml installed. See the install guide from the OCaml website [5] on how to do this.

You also need to have the OCaml package js_of_ocaml installed. This can be done with opam, the fantastic OCaml package manager.

opam install js_of_ocaml

Create a simple OCaml program hello.ml

let () = print_endline "Hello World"
let () = Printf.printf "Created %d from OCaml\n" 123

Compile the OCaml program and then translate it into JavaScript, using js_of_ocaml

ocamlc hello.ml -o hello.byte

js_of_ocaml hello.byte -o hello.js

You now have a JavaScript program hello.js. If you have Node.js, you can run hello.js

node hello.js

Else, run the JS file in your browser by including it in a html page hello.html

<!DOCTYPE html>
<html>
  <body>
  <h3>Within your browser, open up Developer Tools (F12 from Chrome) and see the result in the Console log</h3>
    <script type="text/javascript" src="hello.js"></script>
  </body>
</html>

The print function in OCaml translates to a console.log() method in JavaScript. The JavaScript console log function is mainly used for code debugging as it makes the JavaScript print the output to the console. To view the results in your browser, right-click on the web page and select Inspect (F12 for Chrome), and then Console.

hello.html

Have a look at the above sample page here.

References

[1] ocsigen - js_of_ocaml
https://ocsigen.org/home/intro.html, Accessed 2020-02-12

[2] Real World OCaml. Online book by Yaron Minsky, Anil Madhavapeddy & Jason Hickey
https://dev.realworldocaml.org/prologue.html, Accessed 2020-02-12

[3] Why Ocaml? Talk by Yaron Minsky, Harvard, 2015
https://www.youtube.com/watch?v=v1CmGbOGb2I, Accessed 2020-02-12

[4] Caml Trading. Talk by Yaron Minsky, Carnegie Mellon University, 2009
https://youtu.be/FnBPECrSC7o?t=2496, Accessed 2020-02-12

[5] OCaml website
https://ocaml.org/

[6] CueKeeper, by Thomas Leonard
Example of a web application build with OCaml and compiled to JavaScript with js_of_ocaml
https://roscidus.com/blog/blog/2015/06/22/cuekeeper-internals-irmin/#compiling-to-javascript, Accessed 2020-02-12

[7] Functional Programming in OCaml. Textbook for CS3110 at Cornell.
https://www.cs.cornell.edu/courses/cs3110/2020sp/textbook/, Accessed 2020-02-23

[8] Chemoinformatics and structural bioinformatics in OCaml. Berenger, Zhang and Yamanishi
https://jcheminf.biomedcentral.com/track/pdf/10.1186/s13321-019-0332-0, Accessed 2020-02-23

[9] An interactive sketchbook for OCaml and Reason
https://sketch.sh/new/ml, Accessed 2020-02-23

[10] Try Reason online
https://reasonml.github.io/en/try

[11[ Playing with js_of_ocaml
https://medium.com/@vietlq/playing-with-js-of-ocaml-f3e99f9afb1f, Accessed 2020-03-10

Willem Hoek

HOWTO: create a JavaScript from OCaml with Js_of_ocaml

What is js_of_ocaml

Hello World in the console

References

Similar Posts on this website