ELM Tutorial
Selected Reading
- ELM - Discussion
- ELM - Useful Resources
- ELM - Quick Guide
- ELM - Subscriptions
- ELM - Commands
- ELM - Messages
- ELM - Package Manager
- ELM - Architecture
- ELM - Error Handling
- ELM - Records
- ELM - Tuples
- ELM - List
- ELM - String
- ELM - Functions
- ELM - Loop
- ELM - Decision Making
- ELM - Operators
- ELM - Variables
- ELM - Data Types
- ELM - Basic Syntax
- ELM - Environment Setup
- ELM - Introduction
- ELM - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
ELM - Architecture
Elm - Architecture
In this chapter, we will discuss the standard way to create apppcations 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 apppcation state. For example, if an apppcation displays a pst 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 apppcation s state. The syntax for defining a Model is given below −
-- Model syntax
type apas 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 apppcation.
View
View is a visual representation of the apppcation 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 apppcation state. Messages are passed as parameter to the update function.
--Message Syntax type Message = Message1 |Message2 ...
The syntax shows a type Message. The elm apppcation 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.
Advertisements