This chapter, we will discuss Architecture in ELM Programming Language and the standard way to create applications in Elm platform. Elm uses an architectural pattern similar to Model-View-Controller pattern.
Following are the four main parts of Elm Architecture.
- Model
- View
- Message
- Update
How does the Elm architecture work
The model contains the application state. For example, if an application displays a list of customers then the state will contain each customer data. To display the state in a presentable way, a view/html has to be generated. Once the user interacts with view by pressing a button or typing data in a form, view generates signals called messages. Messages are passed to the update method, which evaluates the messages and takes proper action. Therefore, the update method will generate a new model.
The new model generates a new view. The view will lead to new interactions from user to signal messages, that goes to update function. Further, the function creates a new model. So, the cycle repeats as shown in the above diagram.
Model
Model deals with the application’s state. The syntax for defining a Model is given below −
-- Model syntax
type alias Model = {
property1:datatype,
proptery2:datatype
...
}
To create a model, we need to first create a template with all property required in it. Each property specifies the state of the application.
View
View is a visual representation of the application state. The View knows how to take data and generate web page out of it. When a user interacts with the View, the user can manipulate the state by generating messages. The syntax for defining a View is given below −
--View Syntax view model =some_implementation
Message
Message is a request from the user to alter the application state. Messages are passed as parameter to the update function.
--Message Syntax type Message = Message1 |Message2 ...
The syntax shows a type Message. The elm application will edit the state based on messages passed to it. These decisions are made in the update method.
Update
The update function interprets the messages, which are passed as parameter to it, and updates the model.
--Update Syntax update Message_type model = some_implementation
The update function takes Message and Model as parameters.
Next Topic : Click Here