5 ms·

A ReasonReact Tutorial

161 points by kcorbitt 9y ago

ch4s3 9y ago
This is a really nice tutorial, and the interactive elements showing type info are great!
nv-vn 9y ago
This is cool stuff! Awesome to see OCaml as a platform moving forward with Reason/Bucklescript/React.
sikan 9y ago
Loving Reasonml so far - super good tooling/ecosystem and good interpolation with JS.
- ch4s3 9y ago
  Are you running on node or some other backend?
  - sikan 9y ago
    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 9y ago
      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
    - moosingin3space 9y ago
      It would be awesome if Reason/OCaml had a backend for the Erlang BEAM VM -- could make things like Nuxt.js in OCaml possible. Full-stack type safety benefits would be awesome!
laylomo 9y ago
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 9y ago
  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)
TheSmoke 9y ago
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 9y ago
  I'd say BuckleScript (BS) has already overtaken js_of_ocaml. If I'm not mistaken BS even forked some code of it.
jasim 9y ago
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.
- cies 9y ago
  > The pragmatism comes from the fact that you can use it today on the browser. Part of that pragmatism was already available in OCaml since it's inception. > The Reason syntax is currently functional just like OCaml and Haskell: Reason does not prohibit --thus "allows-- OO, just as it is available in OCaml. Though both communities prefer FP style. I'd say OCaml (and therefor Reason) is FP first and OO on top of that. Contrary to Ruby's OO first and FP on top of that. Some say OCaml's OO is in there to sell it to mgmt :) > So in essence Reason can be considered a super-set of Javascript I do not think that's strictly true, but I get what you're trying to say. > The Reason team is considering changing it to a syntax that ALGOL-style programmers are familiar with. I really like the syntax as it is, and kind of hope "for my own sake" they keep it in line with OCaml and Haskell. But if this kind of syntax is needed to bring together a critical mass and start an FP revolution, then it is "just syntax" and I easily compromise on that!
modarts 9y ago
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)
bsuh 9y ago
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 9y ago
  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.
prodtorok 9y ago
Comparison with Clojurescript?
- modarts 9y ago
  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 9y ago
SUPA HOT FIREEEE

161 points by kcorbitt 9y ago

ch4s3 9y ago

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

nv-vn 9y ago

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

sikan 9y ago

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

ch4s3 9y ago
Are you running on node or some other backend?
- sikan 9y ago
  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 9y ago
    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
  - moosingin3space 9y ago
    It would be awesome if Reason/OCaml had a backend for the Erlang BEAM VM -- could make things like Nuxt.js in OCaml possible. Full-stack type safety benefits would be awesome!

laylomo 9y ago

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 9y ago
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)

TheSmoke 9y ago

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 9y ago
I'd say BuckleScript (BS) has already overtaken js_of_ocaml. If I'm not mistaken BS even forked some code of it.

jasim 9y ago

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.

cies 9y ago
> The pragmatism comes from the fact that you can use it today on the browser. Part of that pragmatism was already available in OCaml since it's inception. > The Reason syntax is currently functional just like OCaml and Haskell: Reason does not prohibit --thus "allows-- OO, just as it is available in OCaml. Though both communities prefer FP style. I'd say OCaml (and therefor Reason) is FP first and OO on top of that. Contrary to Ruby's OO first and FP on top of that. Some say OCaml's OO is in there to sell it to mgmt :) > So in essence Reason can be considered a super-set of Javascript I do not think that's strictly true, but I get what you're trying to say. > The Reason team is considering changing it to a syntax that ALGOL-style programmers are familiar with. I really like the syntax as it is, and kind of hope "for my own sake" they keep it in line with OCaml and Haskell. But if this kind of syntax is needed to bring together a critical mass and start an FP revolution, then it is "just syntax" and I easily compromise on that!

modarts 9y ago

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)

bsuh 9y ago

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 9y ago
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.

prodtorok 9y ago

Comparison with Clojurescript?

modarts 9y ago
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 9y ago

SUPA HOT FIREEEE