In this chapter, we learned how to properly manage data flow in our apps by following the Elm Architecture which boils down to three fundamental concepts: model, view, and update.
A model represents the state of our app. The
view function takes a model and returns a list of HTML functions. The virtual DOM converts those functions into real HTML nodes and renders them on a screen. When the user generates an event by interacting with an HTML element, the Elm Runtime sends a message to the
update function. After processing the message, the
update function returns a new model back to the Elm Runtime which sends the new model to
view to render it again. This cycle continues until the app is terminated.
To keep the purity of our application code intact, the Elm Runtime manages all side effects for us. If we need to perform an operation that causes a side effect such as generating a random number or fetching data from a remote HTTP server, all we need to do is create a command and hand it over to the runtime. The runtime will figure out how to execute that command and will notify the
update function in our app with the result.
Similarly, if we want to listen to an external event, we just need to create a subscription that specifies the type of event and which message to send to the
update function when that event is triggered. We then hand that subscription over to the Elm Runtime and wait for the event to occur. The runtime figures out how to listen to that event. All we need to do is handle the message it sends to the
In the next chapter, we’ll learn how to send and receive data from an HTTP server using commands.