Basic Elm App Structure
This time we will take a look at Elm architecture. We need to understand its parts before moving to an implementation of our logic.
Before moving on, please make sure that you’ve read the previous post and an introduction to the Elm Architecture in the Elm guide.
The source code for this post is available in the 02-beginner-program folder in the elm-proofreading repository.
Elm Beginner Program
Here’s the code for today from the Main.elm file:
import Html exposing (div, text, beginnerProgram)
main = beginnerProgram { model = Model, view = view, update = update }
-- MODEL
type alias Model = {}
-- UPDATE
type Msg = None
update msg model =
case msg of
None ->
model
-- VIEW
view model =
div [] [ text "Hello, World!" ]Running Elm Program
In a command line run the elm-reactor, which builds your project and starts a local server at http://localhost:8000.
Navigate to the 02-beginner-program and start the Main.elm file.
The output would be the same as with previous version:
The important difference is that now our program can interact with users. We will get to this in the next post, and now let’s take a look at the new code.
Structure of Main.elm
First, we define a Model. Right now, it does not contain any data and it is an alias for an empty record.
-- MODEL
type alias Model = {}The update function should check incoming messages and update a model according to a message. As we don’t have any messages yet, update function will not be called. The current implementation just returns the same model.
type Msg = None
-- UPDATE
update msg model =
case msg of
None ->
modelThe view function returns the div with a “Hello, World!” text in it. Note that div is not an actual HTML code, but an object with some data. Elm takes care of rendering HTML code for you.
-- VIEW
view model =
div [] [ text "Hello, World!" ]The Html.beginnerProgram binds all the parts together, and describes how the whole app works. We need to pass it our Model, view, and update.
main = Html.beginnerProgram { model = Model, view = view, update = update }Now our program is ready to interact with users.
Next time we’ll implement text input and showing it back to users.