Elm – Understanding Model, View and Update

In the previous part we wrote a program that used a model to update the view. In this part, we would understand how model, view and update works.

module Main exposing (..)           -- Line 1     

import Browser                      -- Line 2
import Html exposing (div, text)    -- Line 3

-- Function to add two numbers      -- Line 4
add a b = a + b                     -- Line 5
init =                              -- Line 6
    { value = 0}                    -- Line 7

view model =                        -- Line 8
    div [] [text "How Elm Works"] -- Line 9

update model =                      -- Line 10
    model                           -- Line 11

main =                              -- Line 12
    Browser.sandbox                 -- Line 13
        {                           -- Line 14
            init = init,            -- Line 15
            view = view,            -- Line 16
            update = update         -- Line 17
        }                           -- Line 18

To help us understand the Elm program we wrote, I have added line numbers. So we begin with Line 1

Line 1

module Main exposing (..)     --   Line 1

This is a module declaration containing the name of the module and exposing (..) indicates that all the functions in this module can be used by other modules

Line 2 and 3

import Browser                      -- Line 2
import Html exposing (div, text)    -- Line 3

This two lines import modules which contains UI component necessary for rendering  some content on a webpage.

Line 4

-- Function to add two numbers      -- Line 4

This is a comment. Comments in Elm begin with —

Line 5

add a b = a + b                     -- Line 5

This is a function definition. The name of the function is add. It takes two parameters, adds and returns the sum.

Lines 6 and 7

init =                              -- Line 6
    { value = 0}                    -- Line 7

The init function sets the initial value of the model. In this example, the value is set to 0.

Lines 8 and 9

view model =                      -- Line 8
    div [] [text "How Elm Works"] -- Line 9

The view function takes the model as its first parameter. It returns a div tag which takes two parameters. The first is the list of attributes while the second is list of contents that go inside the div.

Lines 10 and 11

update model =                      -- Line 10
    model                           -- Line 11

The update function also takes the model as its first parameter. It should return the updated value of the model. For this particular case, we just return the model as we are not changing anything as at now.

Lines 12 to 18

main =                              -- Line 12
    Browser.sandbox                 -- Line 13
        {                           -- Line 14
            init = init,            -- Line 15
            view = view,            -- Line 16
            update = update         -- Line 17
        }                           -- Line 18

This is the main method. It calls the Browser.sandbox(). This function takes a record having three properties:

init – the initial model

view – the function that actually renders the model on the  screen

update – this is the function that update the model when something changes

Rendering the Model

Now that you understand how an Elm program works, let’s go a bit further.

If you compile this code you will notice that the text that displays on the screen is a hardcoded text passed in to the view. But you see that the view takes the model as parameter. So we would like to display the model rather than a hardcoded value. To do that we would:

replace the text “How Elm Works” with model.value

But model.value is a number whereas the text attrribute of the div tag expects a string. To fix this, instead of model.value we would use a fromInt() function like so:

view model =                            -- Line 8
    div [] [text (fromInt model.value)] -- Line 9

Then we also need to import the fromInt function from String module like so

import String exposing (fromInt)

At this point, everything works fine. You can just also change the value form 0 to 33 or something else, recompile and see that the UI is updated with the new value.

Cool! In the next part, we now see how we can work with buttons and textboxes.