
A ReasonReact Tutorial - kcorbitt
https://jaredforsyth.com/2017/07/05/a-reason-react-tutorial/
======
jasim
Reason/OCaml has brought back my love of programming. It is functional,
statically typed, and extremely pragmatic. You can program it just like an
imperative language and write mutating code without any ceremony, or you can
write purely functional code and get the benefits of equational reasoning.

The pragmatism comes from the fact that you can use it today on the browser.
Unlike most other compile-to-js languages which are fairly new, OCaml is a
mature language with a stable ecosystem. Its history dates back to the 80s
when Robin Milner et al started building a theorem prover which evolved into a
language that can be used for general purpose programming with strong compile-
time guarantees thanks to the Hindley-Milner type system.

Reason is a new syntax for OCaml, and it is being lead by Jordan Walke and
Cheng Lou. Jordan prototyped the first versions of React in OCaml, and React
has planted nubs of FP ideas like immutability, and introduced a functional
approach to building composable UIs which has so far been dominated by object-
oriented mutation-heavy paradigms. The team is taking it one step further by
bringing the entire FP paradigm to the browser.

The Reason syntax is currently functional just like OCaml and Haskell:

    
    
      let sum a b => a + b;
      print_int (sum 1 2);
    

The Reason team is considering changing it to a syntax that ALGOL-style
programmers are familiar with. There are more details here:
[https://github.com/facebook/reason/pull/1299](https://github.com/facebook/reason/pull/1299).
So it'd become:

    
    
      let sum(a, b) => a + b;
      print_int(sum(1,2));
    

So in essence Reason can be considered a super-set of Javascript that adds
powerful static typing, immutable values, and almost-first-class modules. This
will greatly remove a source of friction for programmers new to FP, and in
turn should help in the mainstream adoption of a strongly typed functional
programming language. I think this would be a wonderful thing for practicing
programmers in that more of us will be able to enjoy statically typed FP, and
for the industry in general because we can now expect better programming
practices and more robust systems.

~~~
erokar
One of the things I dislike most about JavaScript is the syntax. I always
thought the Javaesque syntax hid the some of the nice semantics underneath.
CoffeeScript and LiveScript help reveal that language.

I really hope Reason doesn't make the same mistake and go for a more ALGOL-
like syntax. My hope would be that they go for an even cleaner syntax than the
current, more like Standard ML and Elm. The semicolons and the curly braces
will not be missed.

~~~
klibertp
It's not ALGOL-like syntax that's a problem with JS, it's the fact that for
decades the JS syntax was frozen, without any significant additions to the
initial, very minimal, syntax. The same is true for JS standard library: it's
almost non-existent compared to Python or Ruby, and even Lua has more builtins
(IIRC).

In other words, you can have good looking FP support with braces and
semicolons. It's just that you need to build such support into the language,
and for JS it was impossible for a long time.

~~~
erokar
I'm not complaining that JS isn't Haskell. Underneath the C/Java syntax JS is
a small, simle, Lispy, dynamic language — if you like that kind of thing. JS'
syntax hide that. CoffeeScript helped reveal it.

> In other words, you can have good looking FP support with braces and
> semicolons.

Of course. But why would you?

~~~
jasim
I love braces and semicolons and my biggest gripe with CoffeeScript and HAML
and Python was that they used space to delimit blocks. The good thing about
braces is that moving code around is easy and it makes auto-formatting
possible. refmt, prettier etc. are all amazing to have.

But in terms of syntactic preferences, it is quite subjective and I wouldn't
claim there is one true answer.

------
laylomo
Excellent post, Jared. Thanks for making it.

I figured I should share a project I made as well with ReasonReact. I'm a noob
to React and frontend programming in general, but I was surprised by how
easily it was to pick it up. I created a simple game of Snake over a weekend
just to test it out. Great programming experience, great first impression.

edit: live demo: (warning: not mobile friendly)
[http://192.241.133.216/projects/websnake/index.html](http://192.241.133.216/projects/websnake/index.html)

~~~
mambodog
For people who want to look at some Reason code, here are some more projects:

[https://github.com/jsdf/reason-react-hacker-
news](https://github.com/jsdf/reason-react-hacker-news) (rather
unimaginatively, a hacker news app)

[https://github.com/jsdf/lisp.re](https://github.com/jsdf/lisp.re) (native,
the start of a lisp in Reason)

------
ch4s3
This is a really nice tutorial, and the interactive elements showing type info
are great!

------
modarts
Reason is an awesome project. It's still early, but I could even see this
having the power to mainstream an ML (given the fact it's picking up steam in
the enormous JS community)

It's syntax fixes pretty much every issue I ever had with OCaml as well (and
feels pretty nice to write if you're coming from a JS background)

------
nv-vn
This is cool stuff! Awesome to see OCaml as a platform moving forward with
Reason/Bucklescript/React.

------
sikan
Loving Reasonml so far - super good tooling/ecosystem and good interpolation
with JS.

~~~
ch4s3
Are you running on node or some other backend?

~~~
sikan
Currently just playing around with the frontend(React) only. But the
development experience (especially with VSCode + merlin) has been awesome so
far. If I were to build a backend I would probably go for Elixir :P

~~~
ch4s3
Oh cool, I just posted about that on the Elixir Forum
[https://elixirforum.com/t/reasonml-with-
phoenix/6643](https://elixirforum.com/t/reasonml-with-phoenix/6643)

------
bsuh
Being able to use React is great and all but What if you want to use service
workers? Web workers? Canvas? Websockets? Type defining or writing wrappers
around every web specific API I need to use is a non-starter for me.

Is there any ongoing or planned effort to integrate web technologies into
ReasonML (as in provide up to date and comprehensive typings)?

~~~
thekenwheeler
There are actually a ton of binding already defined here:
[https://github.com/BuckleTypes](https://github.com/BuckleTypes)

Further, anything already typed with Flow or Typescript can be converted with
this.
[https://github.com/rrdelaney/ReasonablyTyped](https://github.com/rrdelaney/ReasonablyTyped)

Beyond that, defining js types and interop with Reason/BS has probably been
the most pleasant experience in a compile-to lang that I've used.

------
TheSmoke
thanks for the post, great job. i'm using react with clojurescript (reagent).
i also would love to see a react tutorial with js_of_ocaml.

~~~
cies
I'd say BuckleScript (BS) has already overtaken js_of_ocaml. If I'm not
mistaken BS even forked some code of it.

------
prodtorok
Comparison with Clojurescript?

~~~
modarts
Advanced type system, language level pattern matching, ML syntax, compiles to
clean and readable JS in comparison to what is emitted by the Clojurescript
compiler

------
thepostman
SUPA HOT FIREEEE

