Elm

Elm, created by Evan Czaplicki, compiles to JavaScript for browser applications. It is purely functional and statically typed, and it popularized The Elm Architecture: the whole app is a model, a view that turns it into HTML, and an update function that reacts to messages. The idea later inspired Redux.

Paradigm: Reactive and Dataflow Programming

What Makes Elm Special

  • Model, View, Update. The state is one value, view is a pure function of it, and every change flows through update. Data always moves in one direction.
  • No runtime exceptions in practice. There is no null, no undefined, and errors are values (Maybe, Result). The compiler forces you to handle each case.
  • The best error messages. The compiler explains mistakes in friendly, precise language and suggests fixes, and it set a standard for other languages.
  • Virtual DOM and subscriptions. The runtime computes changes in a virtual DOM. Timers, WebSockets and keyboard events arrive as subscriptions producing messages.
  • Enforced semantic versioning. The package manager checks API changes, so a patch release can never break your build.

Example: A counter with the Elm Architecture

module Main exposing (main)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)


type alias Model =
    Int


type Msg
    = Increment
    | Decrement


update : Msg -> Model -> Model
update msg model =
    case msg of
        Increment ->
            model + 1

        Decrement ->
            model - 1


view : Model -> Html Msg
view model =
    div []
        [ button [ onClick Decrement ] [ text "-" ]
        , div [] [ text (String.fromInt model) ]
        , button [ onClick Increment ] [ text "+" ]
        ]


main =
    Browser.sandbox { init = 0, update = update, view = view }

How It Works

  • The model is just an Int. Msg is a custom type listing every event the app understands.
  • update is a pure function from a message and the old model to the new model. The case must cover every message, or the compiler refuses to build.
  • view builds HTML as ordinary function calls. onClick Increment produces a Msg, not a callback that mutates something.
  • Browser.sandbox connects the three pieces. When a button is clicked, the runtime calls update, then view, and patches the page.

History and Where It Is Used

Elm is used by companies for front ends where reliability matters (NoRedInk, Rakuten and others), and its architecture shaped Redux and many later state-management libraries. The community is small but very welcoming, and the language is a good, safe way to learn functional UI programming.

Learn More