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.
Elm Beginner Program
Here’s the code for today from the
Running Elm Program
In a command line run the
elm-reactor, which builds your project and starts a local server at http://localhost:8000.
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.
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.
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.
Html.beginnerProgram binds all the parts together, and describes how the whole app works. We need to pass it our
Now our program is ready to interact with users.
Next time we’ll implement text input and showing it back to users.