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.
Why
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: https://github.com/reasonml/Mareo.
This repo and blog post also serves as a demonstration of some of the community’s core values. Note that these might or might not have been achieved yet, but we’re working hard toward them.
Repo Walkthrough
Simplicity
The first thing you might notice is that the Mareo repo is devoid of many configuration files; there’s the usual package.json, .gitignore, plus a bsconfig.json, used for building the project. To be clear: it’s possible for extra meta files to creep in at later stages, though in general the community’s trying hard to push back against them.
Opening up package.json and you’ll see the familiar dependencies (only two, both devDependencies!): bs-platform and rollup (Webpack would work too). The installation & build process are brutally banal (npm install && npm start)*. In fact, a few folks come into our discord room saying “woah, that’s it?” Well yes, that’s pretty much it =). We have quite a few ideas we’d like to implement if we made our own package manager in the future, but for the sake of onboarding existing JavaScript users, we’ve decided to take a less “shiny” approach in favor of familiarity, to tone down on meta-level bells and whistles in order to surface the true shiny part of our stack: the language itself. You don’t have to deep fry naturally good ingredients.
Interop
BS supports a wide array of output module format: CommonJS, AMD, Google closure, ES6, and a few others. Mareo compiles to ES6 (precisely, es6-global , which resolves node_modules to relative paths for browsers). Since Safari supports ES6 modules natively, the Mareo repo doesn’t have a development-time bundling step. The workflow gracefully degrades to using rollup at development time for Chrome and Firefox (rollup is fast too! Kudos to the team). See index.html to see how this is done. Only one extra script tag!
The generated JavaScript files are checked in; this way, you see exactly what your Reason changes compile to, right in your version control (think snapshot tests, but for entire JS outputs). You can also require Mareo as a third-party dependency without needing Reason & BuckleScript at all. Though in this particular case, it doesn’t really make sense to model Mareo as a dependency.
Challenge for you: port a JS library over to Reason + BuckleScript without your JS dependents noticing it! If you’re porting over a ReactJS component, may I suggest ReasonReact?
Performance
That we don’t have a development-time bundling step, plus the fact that the bsb incremental build is around 100ms, means that the moment you save your changes, the build would have already finished. We strongly believe a tighter iteration feedback loop helps a project’s development (which is why we’ve opted for a fast statically typed language in the first place), sometimes even more so than other features. Hot reloading would be great too.
Runtime performance is almost not worth talking about. Our bindings often have no runtime overhead. Yes, that’s an empty output file. The DOM interop got compiled away. Uglified + gzipped output is 13kb of fully idiomatic code, without further optimization.
Focus on Concreteness
Aka, SHIP! I’m personally a sucker for great, concrete end-user products (cool toys like this one count!). They’re a testament that we’ve successfully achieved our purpose as an infra-level tool, beyond building extra abstractions layers with promises of future value. In the context of the Mareo demo, I feel that Mario’s jumping physics & collision detections are a bit off (not to blame the original repo, which was made during a hackathon); it’d be great if someone with a sharper eye can fix them. Pull requests welcomed!
Summary
Credits to BuckleScript, the rollup team, and the original MariOCaml!
Keep shipping! =)
*Unfortunately, banality doesn’t sell. Which is why I’m trying to compensate by writing these blog posts.
