Getting started with Elm
Tags: webdev, javascript, helloworld, elm
Published: 2017-09-23 22:10:12

---
title: "Getting started with Elm"
published: true
tags: web-development,javascript,hello-world,elm
canonical_url: 
---

#### Elm is a great functional language that brings this paradigm to the front-end world. In this post, I will try to report on my first steps with it while building a simple game-of-life. If it goes well there will a few follow-up posts to implement more functionalities and play with more features (web-socket, firebase,&nbsp;…)

### First steps

I won't retrace the first baby steps to create the project and to get started with the language: check out the [elm-tutorial](https://www.elm-tutorial.org/en/) for that! They did an awesome job and explained that perfectly. I'll rather focus on the problems and solutions that I encounter while trying to my first "significant" project with Elm hoping it will help others on this&nbsp;path.

### A quick&nbsp;start

Inspired by the official documentation and tutorial I started out my code as simple and concise as possible. I ended up with [that code](https://github.com/leojpod/elm-game-of-life/tree/quick-start). Nothing fancy here, nothing to report either. From there let's move&nbsp;on!

First "surprise", generating a random board to kick the game cannot be done at initialisation. It shouldn't have been a surprise if I had grasped the entire chapter about this package. Anyhow, to generate a random board for our game, we need to create a generator that will be passed to a command and elm will take care of sending us a message once it is&nbsp;done.

{% gist https://gist.github.com/leojpod/8c15398a07e7698aba64747373a84adb %}

The function randCell tranform a boolean generator into a cell one which we will then use to generate our board in the initialisation:

{% gist https://gist.github.com/leojpod/2d2b70451e770cdc4c52fe4ae8e5864b %}

So we kind of end up with a 2-step initialization: load an empty board but send the command to generate a random board and send us a BoardUpdate message when it is done. After that we just need to update our update function to account for this new&nbsp;message:

{% gist https://gist.github.com/leojpod/2b95e3ce1d1024d032731c565bdb038a %}

So far I was rather pleased by the simple fact of starting to work with Elm, it's simple and it's&nbsp;neat.

### The simple game and introducing some&nbsp;changes

After a couple of hours and of tinkering on how to implement the actual "algorithm" of the life game, I ended up with this [version of things](https://github.com/leojpod/elm-game-of-life/tree/with-tick). Nothing fancy, or extraordinary, the implementation is rather messy and could/should be done in a better way but that wasn't my point. I wanted to see how easy it would be to keep things in place when introducing changes hence the idea: What if the board cells could have 3 states (just for a better UI/UX)? It would&nbsp;be:

- Alive: there is a living thing in this&nbsp;cell
- Dead: some previously living thing just died (i.e. at the previous&nbsp;Tick)
- Empty: there is nothing in this&nbsp;cell

#### The good and the bad of Union&nbsp;Type

The first step was of course to change the union type Cell to add one constructor to it: Dead. That worked brilliantly: one change, one save and the compiler was telling me where to repair what I had broken: just like in the doc!&nbsp;Awesome!

But being a developer I tend to be lazy and I had the misfortune of finding out that like many functional / advance languages, Elm has the "default" pattern matching operator \_&nbsp;… Which is both great and&nbsp;bad.

- **Great**'cause in most cases Dead cells behave like Empty cells so I just needed to use the \_ instead of Empty in my case&nbsp;... of and voilÃ , it&nbsp;worked!
- **Bad**'cause now that I have some \_ all over the place I lost the nicely programmer friendly errors from the compiler telling my I need to take care of the new case in my union&nbsp;type…

Not clear? Let's take an example. This is the part where I filter the list of all the neighbour of a cell and check which ones are alive so I can update the cell's status properly:

{% gist https://gist.github.com/leojpod/313463ef4d20b2e67b4ac5f006a643f0 %}

Ok? The Empty case that was there before has been replaced by \_ which in our case more or less translate by Empty|Dead&nbsp;. Problem now: I want to add another state (e.g. Garbage ) that would change the way I count my neighbours. I would not get any warning on this case&nbsp;... of because of my \_ that would match the Garbage state. **Edit:** I made a [post about that and how to handle these cases&nbsp;better](https://medium.com/@leojpod/why-is-there-no-need-for-multicase-matching-in-elm-2bbdfc53589c).

### Moving on?

We are reaching the end of this first post, next stop will be about putting some interactivity to that game: The user will be able to define the starting board and will see it play out. But before closing this post, here are a few things I found and that are gonna be covered in the next&nbsp;post.

#### Elm-live

elm reactor is a nice way to get started but what if you want to use a package like [elm-mdl](https://debois.github.io/elm-mdl/) and get some CSS or JS library? Well good luck with that, to the best of my knowledge at least I haven't found an easy recipe to do so with elm reactor. I don't really need to take out the heavy weaponry and start setting up a webpack build either: just use [elm-live](https://github.com/tomekwi/elm-live)! Takes 5 min to read the doc and figure out how to create your index.html file and you are good to go (plus there is an auto-reload right out-of-the-box!)

#### Code Organization

I am an adept of clear code organization to a fault. I tend to lose precious minutes/hours/days just because the code doesn't look clean and it is not properly organized. Anyhow, when starting to prepare my Elm app for the game of life, I quickly ended up thinking I'll need to have some "sub-modules" in my code rather than following the tutorials and example code&nbsp;setup.

After a few unsuccessful attempts at coming up with my own organization I ended up on this piece of art: [blog.jenkster.com/2016/04/how-i-structure-elm-apps.html](http://blog.jenkster.com/2016/04/how-i-structure-elm-apps.html) Just go read it&nbsp;already!

That's all from me for&nbsp;today!