TL;DR
We added a function that adds a photo. So far, we have a static Elm application. We need to introduce the Elm application state so users could interact with our Picshare application. 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.
Elm Application Architecture
The state is an essential feature of interactive Elm applications. We will add a feature to the Picshare application so users could like photos.
Elm Architecture is depicted in the above image. Part of Elm is a framework that helps you to create interactive applications. Elm architecture is based on the Model-View-Update Pattern, where the Model is responsible for holding the application state. The view is capable of displaying a Model using HTML and CSS, and the update is responsible for updating the Model state through Messages and based on user interaction with the application.
Here is Picshare picture like feature in Model-View-Update pattern. The picture initially likes the state in the Model is zero, which means the picture is not liked by any user. View renders that state and shows like counter zero. User clicks like button that generates Messages for increasing picture models like counter by 1. The view presents this new picture state.
Remember
- why ELM application needs a state
- Model-View-Update pattern
Comments are closed.