Anatomy of Elm

When I started learning Angular once I understood the angular life cycle, learning Angular was easy. So I would like to do the same here for Elm also. Elm’s anatomy is simple. In my previous blog, I mentioned what are all the components constitute elm application.

Elm application has three components, model, view and update along with the main entry point. Now let’s look at how the whole thing work.

All elm application starts with entry point main. Elm comes with great bootstrap for us get started call beginnerProgram, which hides all the wiring to connect all the parts. So to get started our main entry point will be something like the following

main =

     beginnerProgram (model = data, view = view, update = messageHandlers}

Here we call the main entry point with the three components, model, view and update.

The flow of control


  1. On program entry, Elm reads the model data to build the view

2. View generates HTML to render with the data from the model

3. User interacts with view on each user interaction, message gets generated.

4. Messages passed to update function. Update look at the incoming messages and create new instance of the model. (It is functional program, model is immutable)

5. The new model will trigger the creation of new view and the loop repeats.

That is it.

Elm – Basic Architecture

Before you go head first into building, it is good understand the basic architecture of Elm. Most of the application follows one of the MV* pattern. Elm also follows the pattern in a different way. Elm has three distinct parts in the application

Model: As the name suggests the state of the application. You data model. Model defines and holds the current state of the application.

View: This holds the visual representation of the application, HTML, Think of this as HTML template.

Update:These are the events which triggers change in model state which triggers change in view.

When you look at Elm application, you potentially will have view, model and updates all in single Elm file. During deployment, elm will compile this file and spit out, HTML and Javascript.

With the above architecture, one would always need to have entry point to the application and that is represented by ‘main’. We will see more details how they all fit together tomorrow.

Elm – Gradual Learning

I found this video of Evan Czaplicki’s. For anyone interested in learning Elm, this is a good one to listen to. It is every entertaining and educational at the same time. There are lot of stuff in it but the one thing that caught my eye was ‘Gradual Learning’. Learning to do work in functional language is very difficult for normal programmers. Functional programming is considered theory and it has lot of constraints. The main one sticks out quickly is immutability. For people coming from C# or Java, it is a no go. It is one of the main reason there is not much adoption of functional programming. There are pockets of companies and people building enterprise grade application in functional programming but main stream always found it difficult to adopt.

Coming back to the point which caught my attention ‘Gradual Learning’. If you can get developers going quicker and then build on it over time instead of two month dedicated training will be a big win. For me, Elm provides that and I have experienced it. It is very easy to get started without knowing in and out of FP. You can build simple applications in clean Elm way in five to ten minutes. Compare to when Angular was released, this is steady learning and improving instead of wave of easy to do and then step back and spend time experimenting things before you can hit the next level.

Elm provides lot of boiler plates code for you to get started, over the period you can start to peel the layers and learn under the covers, this provides the satisfaction of progression and learning. You will see that first hand as you go through the tutorials.