1. The Elm Architecture.md

1. The Elm Architecture

Elm programs can be broken down into three pieces:

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

This is known as The Elm Architecture. It's a way of structuring your application the gives you a solid way of handling the state of your application and the effects that change this state.

More details from the official guide: https://guide.elm-lang.org/architecture/

The first thing we need to do is define a type alias for our model. For now our model will just be an empty record. We will update this as we go along.

type alias Model =
    {}

We also want to define our initial model. For now this is also just returning an empty record.

init : Model
init =
    {}

Before we define our update function we need to define a set of actions that we can pass into the update function. In Elm this is typically called Msg.

Let's define a message called Tick. When this message is triggered we should move our game forward.

type Msg = Tick

Then we need to define our update function. For now we just return our model without updating it – we'll get back to this later.

update : Msg -> Model -> Model
update msg model =
    case msg of
        Tick ->
            model

The case expression here is just like a switch statement in JavaScript, except more powerful. The compiler will check that you've covered all the branches, so you'll get a compile error if you ever mistype or forget to handle a case.

We also need a view for our game. In order to render our view we need to install the Html package. To install packages with Elm, we need to use elm-package. Run this command in the same folder as your .elm file:

elm package install elm-lang/html

And import the Html module at the top of our file:

import Html exposing (..)

Then we define a function called view that returns some html. Let's start by just returning a text node:

view : Model -> Html Msg
view model =
    text "Hello Pong!"

To wire everything together we can use the Html.beginnerProgram. This is the quickest way to get a simple Elm program up and running. This needs to be returned in a function called main. main is a special function that Elm will look for when starting up.

main =
    Html.beginnerProgram
        { model = init
        , update = update
        , view = view
        }

And that's it! You should now have your first Elm application up and running.

Your code should look something like this now:

import Html exposing (..)


-- Model


type alias Model =
    {}


init : Model
init =
    {}



-- UPDATE


type Msg
    = Tick


update : Msg -> Model -> Model
update msg model =
    case msg of
        Tick ->
            model



-- VIEW


view : Model -> Html Msg
view model =
    text "Hello Pong!"



-- MAIN


main : Program Never Model Msg
main =
    Html.beginnerProgram
        { model = init
        , update = update
        , view = view
        }