Tabata Timer in Elm


I’ve written a Tabata Timer in Elm, for the purpose of exploring the lauguage and dogfooding. I do Tabatas every morning, so the features I want are:

  • configure duration (work, rest, prepare) and cycles, no of tabata
  • playing sounds in state transition (you won’t stare at the monitor when doing tabata)
  • On screen countdown timer to show the progress
  • Remember my last setting
  • Run on Firefox/Chrome (I use Firefox mainly)

Elm is a pure functional lauguage so you need to do things in a bit different than your normal js. Follow the recommended Elm architecture, which inspire redux, and you will be fine. Datas are immutable. It has no null. You need to cater for every program branch. In this program, I also need to touch the ‘side effect’ part: subscription (clock ticking) and ports (localstorage, talk to howler.js).

The experience of having no runtime exception feels… magical. The compiler is very strict but the messages are friendly. Once you’ve passed the complie stage, the application comes alive and run without problem. You will need some time to battle with the compiler when you’re still not familiar with the concept in Elm.

Some note on modulization. Coming from an OO world, we are used to group variables and functions together and encapsulate them. In the Elm architecture, it is recommend to start with one model, view and update. When things get big, try to split the view/update functions into helper module and keep the model intact. Model change is more likely to propagate through your code base and you need to write boilerplate wiring code. How to scale an Elm app has been a hot topic in the discussion group. People who use Elm in production shares that most of the time you don’t need a component with its own model/view/update, but a dumb component for rendering.

As for the side-effect part, my program only touched a few of those. It seems like that job like reading a json file is not a trivial task in Elm, as you need to always cater for null object, failed result, etc. But it’s actually worth to check for these cases which will break your program.

Overall, it’s fun journey to write an Elm program. There’s a lot to learn.

Tags: elm, programming, tabata, web

via 網絡暴民 Jacky’s Blog