What Is Elm Architecture Life Cycle — Tentamen Software Testing Blog

Elm Architecture, credit: Jeremy Fairbank

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 and loads . Elm runtime takes over by interpreting our Picshare application function. module interprets function with and creates . Elm runtime takes over and renders into . We have ours 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 .

Elm reads from Elm queue and calls function with the current model and Like Msg. The updated model is passed to the view function that creates new 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

Originally published at https://blog.tentamen.eu on October 3, 2020.

Founder of Tentamen, software testing agency.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store