Elm Language The Elm Architecture Beginner program


Example

Html has beginnerProgram mostly for learning purposes.

beginnerProgram is not capable of handling Subscriptions or running Commands.

It is only capable of handling user input from DOM Events.

It only requires a view to render the model and an update function to handle state changes.

Example

Consider this minimal example of beginnerProgram.

The model in this example consists of single Int value.

The update function has only one branch, which increments the Int, stored in the model.

The view renders the model and attaches click DOM Event.

See how to build the example in Initialize and build

import Html exposing (Html, button, text)
import Html exposing (beginnerProgram)
import Html.Events exposing (onClick)


main : Program Never
main =
    beginnerProgram { model = 0, view = view, update = update }


-- UPDATE


type Msg
    = Increment

update : Msg -> Int -> Int
update msg model =
    case msg of
        Increment ->
            model + 1


-- VIEW


view : Int -> Html Msg
view model =
    button [ onClick Increment ] [ text ("Increment: " ++ (toString model)) ]