Elm (0.18) Architecture: A Flow Diagram

Taking my previous post on Elm Architecture under consideration, I’ve generated the following diagram:

Let me explain further…

The diagram represents an app created from Html.programWithFlags. ie:

programWithFlags :
    { init : flags -> ( model, Cmd msg )
    , update : msg -> model -> ( model, Cmd msg )
    , subscriptions : model -> Sub msg
    , view : model -> Html msg
    }
    -> Program flags model msg

If, in your hosting html page, you set the window.options js object then you will have acces to those values in your Elm Program’s init via flags.

For example, if your windows.options object looks like:

windows.options = {
    name: "James Bond",
    employee_number: 007
}

Then, within your Main.elm, you could have the following code:

type alias Model = 
    { employee_name: String
    , employee_id: Int
    }

init : Flags -> ( Model, Cmd Msg )
init flags = 
    let model = 
        { employee_name = flags.name
        , employee_id = flags.employee_number
        }
    in 
        ( model, Cmd.none )

Here, the Cmd.none is an empty Cmd Msg, meaning no Commands are called. See Platform.Cmd for more details. I’ll discuss Commands and Results more thoroughly in future posts.

If the window.options object is more complicated, then we will need to use decoders - which will discussed in future posts. For now, I’ll say that decoders are a common difficulty point for many and many also avoid adopting Elm because of it. Most Elm developers, once learning decoders, can appreciate how valuable they are for the robustness of your application - I personally miss them when using other js tools.

Subscriptions will also need more detailed discussion in the Future.

However, before we get into ’expert’ features like Commands/Results/Decoders/Subscriptions, I think it’s best I talk next about types and type definitions, as having a clear understanding of those makes one MUCH better at reading Elm code.

EDIT: The above is valid for Elm 0.18, but I will soon create a post which will account for the breaking changes in 0.19