Actual footage of me working on Reason

Mareo is a simple demo of Mario for HTML canvas, written in Reason and compiled to JS through BuckleScript. It’s a fork of MariOCaml; I’ve modified the meta stuff to demonstrate a project workflow for our community.

Play it here!


Reason & BuckleScript have great interop to the existing JS ecosystem, but people often ask us what a workflow looks like in a theoretical, ideal world. We’ve made a repo to illustrate it:

This repo and blog post also serves as a demonstration of some of the community’s core values. …

Reason comes with a formatter that takes your badly written code and turns it into a well-indented piece of art:

Think of it as Prettier or Gofmt but for Reason.

Arguments about how to format code (and syntax in general) have plagued us since the dawn of programming; I’m not here to write about that. Instead, I’d like to show how refmt (“Reason format”) goes a step further and bakes in some of the wider-reaching semantic changes into the syntax itself, and why we do things this way.

JSX is a syntax that usually desugars to a function call…

Quick post that documents the various quirks of `propTypes`.

The React `propTypes` semantics differ from the ones from Flow and can cause subtle bugs. Here’s a handy cheat sheet.

propTypes: {
// field required, must be number and NOT `null` NOR `undefined`
foo: PropTypes.number.isRequired
propTypes: {
// field can be omitted; if provided, can be number OR `null` OR `undefined`
foo: PropTypes.number

This is unfortunate, because there’s no easy way to express the followings:

  1. Mandatory `foo`, but with a nullable value.
  2. Optional `foo`, but if passed, should NOT be nullable.

Things get more complicated when we add `defaultProps`:

Disclaimer: this post is dedicated to the typical software developer who, in this day and age, has a bit of wiggle room in terms of making tradeoffs between performance and API benefits.

  • Immutable-js and ClojureScript (A lisp that compiles JavaScript) hash maps are backed by fast JS arrays when the number of key-value pairs is under 8, beyond which they switch to another implementation.
  • Transit-js (serialization library, like `JSON.stringify`, but pluggable and more versatile!) implements similar heuristics, but switches only after 32 key-value pairs, since the task of deserializing and building an actual object is slower.
  • Here’s a similar story…

(By the way, we’re on Discord!)

I get very happy each time someone pings me on Twitter to show a crazy new React-Motion demo. As a library maintainer, that’s really what I hoped for! Furthermore, talking to the community and sitting in the Slack channel informed me about people’s pain points and confusions. In particular, one question that comes back often is where React-Motion stands compared to Animated, and vice-versa. I’d like to clear up this misconception here.

“Animation” is a loaded term. When we say “animate this item in React”, we might be talking about:

  1. Interpolating a certain property…

Cheng Lou

I blog only when I have more important things to do

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store