What Is Elm Architecture Life Cycle — Tentamen Software Testing Blog

Image for post
Image for post
Elm Architecture, credit: Jeremy Fairbank

TL;DR

The Elm Architecture Life Cycle

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 architecture data flow is unidirectional

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

Written by

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