TECH Insights

Viden og indsigter fra IT Minds' it-talenter


Skrevet af Mindster og Software Developer hos IT Minds on 22-08-19 11:04
Mindster og Software Developer hos IT Minds

Writing a Knitting app for my wife!

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.

Skærmbillede 2019-08-22 kl. 10.51.51

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).


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

Skærmbillede 2019-08-22 kl. 10.53.14

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.

Skærmbillede 2019-08-22 kl. 10.54.24

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:

Skærmbillede 2019-08-22 kl. 10.55.35

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.


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.

Skærmbillede 2019-08-22 kl. 10.56.26


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:

Insights fra de bedste softwaretalenter

En del af IT Minds’ DNA er, at vi spotter og tiltrækker de bedste softwaretalenter, som er stærke i de nyeste teknologier og frameworks. Derfor vil vi gerne dele ud af vores viden og erfaringer vores konsulenter opsamler, når de afprøver og arbejder med nye teknologier og frameworks.

Seneste indlæg