What Is Elm Architecture Life Cycle

TL;DR

In the previous post, we created a Picshare Browser Program. Let’s explore the Elm architecture life cycle by pressing our heart like button. This post is part of the functional language series, and it is based on a remarkable book, Programming Elm Build Safe and Maintainable Front-End Applications by Jeremy Fairbank.

The Elm Architecture Life Cycle

We will explore the Picshare application Life Cycle by clicking the heart like button. The initial state is the heart that is not filled because the initial model has value for Like set to false.

The browser renders our index.html and loads picshare.js. Elm runtime takes over by interpreting our Picshare application main function. Browser module interprets view function with initialModel and creates VirtualDOM. Elm runtime takes over and renders VirtualDOM into HTML. We have ours Picshare with a heart like a button.

The initial state of our heart like button is not liked. When we click on it, Elm is wiring DOM event API with VirtualDOM (Elm source code), and it will dispatch to the Elm queue Like Msg.

Elm reads Like Msg from Elm queue and calls update function with the current model and Like Msg.  The updated model is passed to the view function that creates new VirtualDOM Diff from the previous model. Using that Diff, real DOM is created. VirtualDOM Diff makes Elm much faster and efficient because Elm renders only Changes in real DOM (HTML). In our case, only heart like button is changed.

Remember

• Elm is using Diff to update only changed parts of HTML.
• Elm architecture data flow is unidirectional