I recently decided to try to get familiar with ReasonML. Over a weekend, I took my random quote generator, Nootropic Cat Treats, of which I’ve built prior versions in vanilla JavaScript, Angular, Cycle.js, and React, and converted it to a ReasonReact build.
Overall, I found Reason and ReasonReact surprisingly easy to get started with. My general process was to 1) read most of the documentation for Reason and ReactReason 2) follow the Bsb installation and quick start and 3) try to modify the quick start application, one little feature at a time, until I arrived back at my random quote generator. Below, I’ve written out some of the dumber mistakes I made.
My computer science background is weak. When I saw that Reason had lists, I thought of the Ramda documentation and how it seems to refer to arrays as lists with no apparent explanation. Despite the fact that Reason’s documentation clearly spells out that lists and arrays are different, I tried to use lists and access them with myList[0] syntax and inspect them in the console and felt confused as to why they looked so weird and wondered how I had instantiated them in such a weird way.
I generally abandoned lists in my project in favor of arrays. It wasn’t until I was done that the term “doubly linked list” popped in my head and I had a vague flashback to writing in C++ for a community college class on data structures.
I assumed that using ReasonML would complicate my webpack configuration. I deleted my config file in favor of what was shipped with the quick start project. This was fine until I wanted to add back styling. After a bit of research, I realized that I could just copy and paste anything involving styling from my original webpack config to my new one and use some weird syntax to import my CSS files like before.
I kept adding small things back into my config until I realized that I could keep the entirety of the original file. I just let BuckleScript convert my Reason to JavaScript, and let webpack take over from there. The entry point was the same JavaScript file, but that JavaScript file was compiled from Reason, instead of directly modified by me. I also needed to modify my vendor build per the new dependencies.
I’ve generally developed a habit of not reading interpreted or compiled files. The BuckleScript interpreter outputs JavaScripted formatted to be read by humans.
I kind of tried to force pattern matching and switch statements into my random quote generator. I wanted to use a switch statement to create potential bounds of a generated random number, between 0 and the length of an array of quotes. I saw the note below in Reason’s documentation, but didn’t really understand what I was supposed to do about it:
Note: you can only pass literals (i.e. concrete values) as a pattern, not let-binding names or other things.
I had trouble trying to add the length of the quote array as a potential case. I ended up switching to if statements and kept moving forward. Pattern matching is a subject I need to revisit.