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
(I am using a free dyno on heroku, so the first attempt to open will be a little slow).
Source code here
<App/> and down are pure, reasonably written code.
In Reason land now I did several things which I think is cool to cover here:
- Routing (built-in)
- Write and Read from browser localStorage
- Typesafe css-in-js (bs-css).
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.
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
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
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.
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.
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.