ReasonML: OCaml for React Developers

It's 2017, and while TypeScript is winning the mainstream, a group at Facebook is pushing ReasonML. Reason isn't a new language; it's a new syntax and toolchain for OCaml. It gives us the safety of a 20-year-old type system with a syntax that looks like JavaScript.

Why Reason?

OCaml has features that TypeScript can only dream of: true pattern matching, sound type inference (you almost never need to write type annotations), and ultra-fast compilation.

ReasonReact: The Better React

ReasonReact isn't just a wrapper; it's a more principled way to write components.

/* Counter.re */
type state = {count: int};
type action = | Increment | Decrement;

let component = ReasonReact.reducerComponent("Counter");

let make = (_children) => {
  ...component,
  initialState: () => {count: 0},
  reducer: (action, state) =>
    switch (action) {
    | Increment => ReasonReact.Update({count: state.count + 1})
    | Decrement => ReasonReact.Update({count: state.count - 1})
    },
  render: (self) =>
    <div>
      <button onClick=(_event => self.send(Decrement))> (ReasonReact.stringToElement("-")) </button>
      <div> (ReasonReact.stringToElement(string_of_int(self.state.count))) </div>
      <button onClick=(_event => self.send(Increment))> (ReasonReact.stringToElement("+")) </button>
    </div>
};

BuckleScript Interop

Reason compiles to JS via BuckleScript. The interop is surprisingly clean. You can use any JS library by writing a "binding."

[@bs.val] external alert : string => unit = "alert";

let handleClick = () => alert("Hello from Reason!");

In 2017, ReasonML is the "advanced" choice for teams that want more safety than TypeScript can provide without the steep learning curve of pure OCaml or Haskell.

Aunimeda builds modern web frontends - from single-page applications to complex multi-locale sites.

Contact us to discuss your frontend project. See also: Web Development, Corporate Website Development