Elm language

We are functional!

Few weeks ago we started working in a new web application. Nowadays, there is a huge variety of frameworks, boilerplates and front-end libraries to start with. After some research and considering different libraries and frameworks, we decided to be innovative and challenge ourselves moving out from our comfort zone and having some fun with functional programming paradigm. We went for Elm language:


According to Wikipedia, Elm is a domain-specific programming language for declarative creating web browser-based graphical user interfaces. It is becoming more and more popular in web development community. Important blue chip companies from IT sector are considering and adopting Elm. The link below refers to a survey about State of Elm in 2016:

From my experience, I must confess we found it a bit tricky… However, after spending a couple of hours and understanding functional philosophy, 
we found Elm really helpful to develop simple web apps and useful as SPA framework. It’s true Elm is in its very early days and is difficult to find a reliable set of packages and libraries for production. On the other hand, it is not too complicated to write your own helpers and libraries so you have a great opportunity to become and important contributor/evangelist among Elm community!

After some Elm and functional “propaganda”, let me show you a basic example of how easy is to implement a web app. The following code implements a calculator with four operations: add, sub, multiply and divide. You can get the code from the link below:


Elm architecture is based on the loop model-view-update:

  • Model — the state of your application
  • Update — a way to update your state
  • View — a way to view your state as HTML

These are the basic three functions required to render a simple web page. In this scenario, our model is pretty simple. We just need three variables: two operators and one result value:

The view is a function which receives a model as parameter and renders the corresponding HTML code.

From the view, the user triggers different events or “messages” collected by Elm so we let Elm know that something is happening in the view. These messages must be defined and specified in the view. We use messages when an operator value changes or an operation button is clicked. By this way, Elm architecture will generate all javascript code required to achieve this behavior. The messages used are listed below:

Note that your web application is reactive to your model. Any change in your view will result as an “update” to your model. In order to achieve this behavior, you have to implement the third main function “update”. This function covers all messages listed above and performs different calculator operations accordingly.

To summarize how the Elm loop works:

The communication between the view and update function is made via messages. The different events triggered from the view send messages to our update function. From our update function we “update” or produce a new model which will end up rendering a new view and bob is your uncle!

The learning curve might be complicated but once you understand the foundations of the architecture you will be able to create simple web apps with very few lines of code with high performance and runtime exceptions safe.