When I started learning Angular once I understood the angular life cycle, learning Angular was easy. So I would like to do the same here for Elm also. Elm’s anatomy is simple. In my previous blog, I mentioned what are all the components constitute elm application.
Elm application has three components, model, view and update along with the main entry point. Now let’s look at how the whole thing work.
All elm application starts with entry point main. Elm comes with great bootstrap for us get started call beginnerProgram, which hides all the wiring to connect all the parts. So to get started our main entry point will be something like the following
beginnerProgram (model = data, view = view, update = messageHandlers}
Here we call the main entry point with the three components, model, view and update.
The flow of control
1. On program entry, Elm reads the model data to build the view
2. View generates HTML to render with the data from the model
3. User interacts with view on each user interaction, message gets generated.
4. Messages passed to update function. Update look at the incoming messages and create new instance of the model. (It is functional program, model is immutable)
5. The new model will trigger the creation of new view and the loop repeats.
That is it.