Author : Kenta Inoue

Introduction

Elm is one of the pure functional languages mainly used for interactive applications such as web development, and is characterized by its simplicity and ease of use. Furthermore, the official tutorials are easy to understand, making it a recommended language for beginners in web development and functional languages.

This article will summarize the features of web applications and functional languages by looking at its Elm.

Official Elm Tutorials

How web apps work

Elm makes it easy to create web applications using a module called The Elm Architecture. Let's take a closer look at this.

First, we will look at Browser.sandbox, the basic structure of a web application.

import Browser
        import Html exposing (Html, button, div, text)
        import Html.Events exposing (onClick)
        
        main =
            Browser.sandbox { init = init, update = update, view = view }

Browser.sandbox consists of three elements: init, update, and model, each of which has the following types for arbitrary types Model and Msg.

init : Model
        update : Msg -> Model -> Model
        view : Model -> HTML Msg

From this we can see that update returns a Model from Msg and Model, and view returns an HTML Msg from Model.

In other words, the following diagram shows how a web application works.

init is the initial value of the system. view is the up arrow, which takes a Model type value from the system and displays HTML in the browser based on the return HTML msg type value. update is the bottom arrow, which takes a value of type Msg as input from the browser and updates the original value of type Model to the new one.

An example can be seen in Elm's official tutorial, which is easy to understand by looking at a web application where pressing a button increases the number of digits.

-- INIT
        type alias Model = Int
        
        init : Model
        init = 0
        
        -- UPDATE
        type Msg = Increment | Reset
        
        update : Msg -> Model -> Model
        update msg model =
            case msg of
                Increment -> model + 1
                Reset -> 0
        
        -- VIEW
        view : Model -> Html Msg
        view model =
            div []
                [ div [] [ text (String.fromInt model) ]
                , button [ onClick Increment ] [ text "+" ]
                , button [ onClick Reset ] [text "reset" ]
                ]

In this example, the Model is an Int type value and the initial value init is 0. view recieves this value and displays it and buttons that return Increment or Reset in the browser. The update function receives information from the browser as to whether Increment or Reset was pressed and updates the Model value.

What you can learn from using Elm

Since Elm is a pure functional language, every function depends only on its arguments. In other words, init, update, and view above are all independent functions, and a web app is composed of these three independent mechanisms.

Thus, with functional languages, even complex programs can be broken down into broad categories by type and function. This is one of the great advantages of functional programming.

Summary

We have summarized the structure of a web application using the pure functional language Elm and the advantages of using functional languages.