Anatomy of Elm

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

main =

     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

clip_image001

  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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s