Writing a Knitting app for my wife!
DISCLAIMER: THIS IS WRITTEN WITHOUT HOOKS

Two weeks ago I released a post about what reason is as a language with a promise that I would show a real world application using that technology. here

Application: knitzilla

(I am using a free dyno on heroku, so the first attempt to open will be a little slow).
Source code here

First off, I want to admit that I kinda "hacked" the beginning of this app. To avoid setting up a deployment script with webpack and service workers and such, I chose to try the "Reason is easily pluggable to existing JavaScript apps" selling point. And I must admit, I was not disappointed.

So I am using a JavaScript API to create my Material UI theme and also to register the application root.
Everything from <App/> and down are pure, reasonably written code.

In Reason land now I did several things which I think is cool to cover here:

1. Routing (built-in)
2. Write and Read from browser localStorage
3. Typesafe css-in-js (bs-css).

Routing

Since pattern matching is amazing, things as routing suddenly becomes a trivial matter

If you open the app or code, you will notice that I have implemented a "swipe" feature as well, these are bound in the same life-cycle method as shown above, but left out for brevity.

Read and write JSON in reason

When we write in JavaScript, we are used to basically a zero overhead when reading or writing JSON objects to and from JavaScript.

In most other languages this needs a little bit of work. Now there are libraries out there to help with JSON parsing in Reason, but I took a more native approach to learn the language better.

Since Reason needs to have 100% type coverage, we need to annonate how to parse earch part of the JSON object. I have made a Row Calculator parser to persist and hydrate the app with an array of rowCalc types.

In the code i use the decode and encode functions, and these uses the rowEncoders/decoders to to help parse the objects in the array.

The usage of the encoder is shown as:

The syntax above might look weird. After we haved talked through it, you will find it awesome is I do(I hope).

What we are saying that in the Dom.Storage namespace we want to use localStorage, localStorage is passed into the first argument of setItem, setItem like in JavaScript takes two strings, key and value.
The key being the string rowCalc, and the values being the state.rows from the component, these rows, which is a reason list type is passed into the encode function as shown above, which in turn can be stringified and saved. Just like this, when decoding them it is just the opposite.

BS-CSS

anyone who have used css-in-jss will agree that it provides some really powerfull features to the whole css experience. Though when using css-in-jss and you need to pass for instance 100% you have to do this a string, like borderRadius: "100%" you will have no help what so ever to tell you if 100% is even an option.

BS-CSS takes css-in-jss to a new level as shown below.

Conclusion

Even though KnitZilla is written with the now legacy api of ReasonReact it still shows the benefits of writing web with a fully typed language.

Moreover there are features in Reason that you will forever miss in JavaScript, like types (du'h) and pattern matching with the switch.

If you want to learn more about reason and ReasonReact visit:
ReasonReact
Reason