Programming Elm

The Elm Architecture Life Cycle

If you continue clicking on the love button, the heart should toggle back and forth between being an outline and filled. To fully understand how your Elm program is working, let’s walk through the life cycle of a mouse click on the love button within the context of the Elm Architecture. We’ll start from the beginning when the model’s liked field is False.

The Elm runtime takes your main program and bootstraps an initial application. It calls your view function with the initialModel to produce a virtual DOM representation of the HTML you want to be displayed. Elm interprets the virtual DOM and renders the correct HTML in the browser on your behalf as shown in the figure. At this point, Elm will display the unliked ...