How web apps work and functional languages learned with Elm


Author : Kenta Inoue


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.


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

Back to index

Join Us


We have an ambition like "we open up the future with technology we carry out into the world"and are established with continuing effort to become a leading company in the industry.
Because of being a young company, it will with all the employees who join the company be able to realize that we make history with all the employees who join the company.
We are currently executing hiring activity.
With Nihon Insight Technologies carrying out the technology into the world, you are expected to perform all the capability you have.

New Graduate
Mid Career

Contact Us