l1x/reasonml.md

## reasonml.md

      
    Raw
  

              reasonml.md
            
          
    Starting with ReasonML for backend devs

Background

Bucklescript

BuckleScript is a backend for the OCaml compiler which emits JavaScript. It works 
with both vanilla OCaml and Reason, the whole compiler is compiled into JS (and ASM) 
so that you can play with it in the browser.

Reason(ML)

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.

Getting the env

MacOS

brew install node
npm install -g bs-platform
Linux

Anything else

TBD
Creating a project folder

Projects can be created by invoking bsb with init and chosing a theme.
bsb -init awesome-ml -theme basic-reason

If you develope a React application you can chose the React theme.
bsb -init awesome-ml-react -theme react

List of available themes at the moment:
bsb -themes
Available themes:
basic
basic-reason
generator
minimal
node
react

Full list of bsb switches:
Bsb options are:
  -color  forced color output
  -no-color  forced no color output
  -w  Watch mode
  -regen  (internal) Always regenerate build.ninja no matter bsconfig.json is changed or not (for debugging purpose)
  -clean-world  Clean all bs dependencies
  -clean  Clean only current project
  -make-world  Build all dependencies and itself
  -init  Init sample project to get started. Note (`bsb -init sample` will create a sample project while `bsb -init .` will resuse current directory)
  -theme  The theme for project initialization, default is basic(https://github.com/bucklescript/bucklescript/tree/master/jscomp/bsb/templates)
  -query  (internal)Query metadata about the build
  -themes  List all available themes
  -where  Show where bsb.exe is located
  -help  Display this list of options
  --help  Display this list of options

Building your app

Directory strcture and files

The project consists of the following files and folder:
README.md
bsconfig.json
node_modules
package.json
src
tasks.json

Configuration lives in package.json.
{
  "name": "awesome-ml",
  "version": "0.1.0",
  "scripts": {
    "build": "bsb -make-world",
    "start": "bsb -make-world -w",
    "clean": "bsb -clean-world"
  },
  "keywords": [
    "BuckleScript"
  ],
  "license": "MIT",
  "devDependencies": {
    "bs-platform": "1.9.2"
  }
}
As we can see there are three scripts that can be used to manage our project.

build
start
clean

These can be invoked by running npm run $action, for example: npm run build
> awesome-ml@0.1.0 build /Users/l1x/code/sb/awesome-ml
> bsb -make-world

BSB check build spec : OK

Making the dependency world!
Package stack: awesome-ml
ninja.exe -C lib/bs
ninja: Entering directory `lib/bs'
ninja: no work to do.

In the src folder there is the demo.re file that contains the ML code. After running build it transpiles to demo.js in the lib/js/src folder. Comparing the two files there is nothing surprising:

demo.re

cat src/demo.re
Js.log "Hello, from Middle-earth. Buckle up little hobbit, you are about to enter Mordor!";


demo.js

cat ./lib/js/src/demo.js
// Generated by BUCKLESCRIPT VERSION 1.9.2, PLEASE EDIT WITH CARE
'use strict';

console.log("Hello, from Middle-earth. Buckle up little hobbit, you are about to enter Mordor!");

/*  Not a pure module */

Now we can create a small html file in the root folder of the project and reference the JS:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
      <title>Awesome ReasonML</title>
  </head>
  <body>
    <div id="index"></div>
      <script src="lib/js/src/demo.js"></script>
  </body>
</html>
Opening index.html in a browser and pulling up the developer console shows us the Hello, from Middle-earth. Buckle up little hobbit, you are about to enter Mordor!. When the demo.re file is changed, it gets auto-compiled while npm run start is running.