Elm - Architecture

Advertisements

Previous Page
Next Page  

In this chapter, we will discuss 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
Architecture

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.

Advertisements