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
Browser module interprets
view function with
initialModel and creates
VirtualDOM. Elm runtime takes over and renders
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 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.
- 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.