Elm: фронтенд без рантайм-ошибок

Elm — функциональный язык для фронтенда, который компилируется в JavaScript и обещает то, чего редко добиваются фреймворки: в чистом коде Elm не бывает ошибок времени выполнения. Нет null и undefined, нет исключений из ниоткуда, а компилятор проверяет все ветки условий и типы сообщений. В 2026 году ветка 0.19.1 остаётся стабильной уже несколько лет: язык меняется медленно, зато собранный проект не ломается от очередного обновления зависимостей.

Что даёт строгая типизация

Elm выводит типы сам, но требует, чтобы все возможные состояния были описаны явно. Вместо строки-статуса вы объявляете пользовательский тип с конечным набором вариантов, и забытая ветка становится ошибкой компиляции. Вместо nullable-значения используется Maybe, вместо кода ошибки — Result. Это не украшение: код перестаёт падать на данных, которые пришли не в том формате.

Обратная сторона: компилятор не пропустит неполный case и несовпадение типов, поэтому модель данных приходится переписывать целиком. Зато рефакторинг предсказуем: если проект собрался, большинство несоответствий уже исключено.

Установка и структура проекта

Официальный способ — npm-пакет elm, который скачивает бинарник компилятора. Рядом ставятся форматтер и тестовый раннер. После elm init появляется elm.json с исходным каталогом src и набором базовых пакетов; зависимости фиксируются точными версиями, а транзитивные версии выбирает сам компилятор.

npm install -g elm elm-format elm-test
elm init
elm reactor
elm make src/Main.elm --output=elm.js

elm reactor компилирует на лету — удобно для первых шагов, но не для продакшена. В сборке используется elm make с флагом —optimize: он включает минификацию и удаляет отладочные функции. Если в коде остался Debug.todo или Debug.log, оптимизированная сборка намеренно завершится ошибкой.

elm make src/Main.elm --optimize --output=public/elm.js
ls -lh public/elm.js
elm --version

Архитектура Elm

Любое приложение строится вокруг трёх функций: модель хранит состояние, update принимает сообщение и возвращает новую модель, view превращает модель в HTML. Побочные эффекты описываются значениями Cmd и Sub, а не выполняются внутри update. Такой цикл называют The Elm Architecture, и он же используется в elm-ui, elm-css и большинстве библиотек.

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 "-" ]
        , text (String.fromInt model)
        , button [ onClick Increment ] [ text "+" ]
        ]

main : Program () Model Msg
main =
    Browser.sandbox { init = 0, update = update, view = view }

Модель неизменяема: update возвращает новое значение. Это снимает класс ошибок с общими ссылками, но требует аккуратной работы с вложенными структурами. Для больших приложений модель разбивают на модули, а сообщения оборачивают в родительский тип.

Ошибки как значения

Maybe говорит, что значения может не быть: List.head возвращает Maybe a, а не бросает исключение на пустом списке. Result хранит либо успех, либо ошибку с описанием. Оба типа обрабатываются через case, и компилятор не даст забыть про неудачный сценарий.

type alias Track =
    { title : String
    , duration : Int
    }

trackDecoder : Decode.Decoder Track
trackDecoder =
    Decode.map2 Track
        (Decode.field "title" Decode.string)
        (Decode.field "duration" Decode.int)

Декодер — обычное значение, которое можно комбинировать. decodeString возвращает Result, поэтому битый JSON не роняет приложение: вы получаете Err с текстом проблемы. Та же схема работает для форм и URL.

Decode.decodeString trackDecoder json
    |> Result.map .title
    |> Result.withDefault "Без названия"

HTTP и побочные эффекты

Запросы описываются командой, а результат приходит новым сообщением. Никаких промисов и async/await: состояние меняется только в update. Поведение предсказуемо, хотя boilerplate растёт.

elm install elm/http
elm install elm/json
elm install elm/browser

type Msg
    = GotTracks (Result Http.Error (List Track))

loadTracks : Cmd Msg
loadTracks =
    Http.get
        { url = "/api/tracks"
        , expect = Http.expectJson GotTracks (Decode.list trackDecoder)
        }

Ошибка сети приходит как Err, а не как исключение: покажите уведомление, повторите запрос или оставьте старые данные. Чтобы устаревший ответ не перезаписал свежий, храните идентификатор запроса в сообщении.

Ports и связь с JavaScript

Elm не имеет доступа к DOM напрямую и не поддерживает нативные модули. Всё общение с внешним миром идёт через ports: типизированные каналы, которые компилятор проверяет. Через них подключают localStorage, WebSocket, карты, редакторы и любые библиотеки, которых нет в экосистеме.

port module Ports exposing (save)

port save : String -> Cmd msg

const app = Elm.Main.init({
  node: document.getElementById('app'),
  flags: { theme: 'dark' }
});

app.ports.save.subscribe((value) => {
  localStorage.setItem('draft', value);
});

Флаги передаются один раз при инициализации и тоже описываются декодером: неверный тип не даст приложению запуститься. Ports асинхронны, ответ придёт отдельным сообщением.

Тесты и качество кода

Чистые функции тестируются без браузера и моков. elm-test поддерживает fuzz-тесты: они генерируют случайные данные и ищут контрпримеры. Для декодеров это полезно: любой JSON либо разбирается, либо даёт понятную ошибку.

elm-test init
elm-test
elm-format src/ --validate
npx elm-review --template jfmengels/elm-review-unused/example

elm-format снимает споры о стиле, elm-review ищет неиспользуемый код. В CI достаточно трёх шагов: формат, сборка с —optimize и тесты. Компилятор отсекает большую часть проблем, поэтому пайплайн короткий.

elm-format src/ --yes
elm make src/Main.elm --optimize --output=/dev/null
elm-test --report json

Ограничения и итог

У Elm есть цена:

• экосистема небольшая, вакансий мало;
• часть библиотек не обновлялась годами;
• нет официального серверного рендеринга;
• язык однопоточный, сборка требует плагина вроде vite-plugin-elm.

Зато взамен вы получаете отсутствие целого класса аварий в проде, строгий контракт с JavaScript и предсказуемые обновления. Elm хорошо подходит для админок, дашбордов, форм со сложной валидацией и встраиваемых виджетов, где важнее надёжность, чем размер экосистемы.

Итог

Elm доказывает, что фронтенд может обходиться без рантайм-ошибок: типы, Maybe и Result, декодеры и явные эффекты закрывают большинство источников падений. Начните с небольшого виджета, соберите его через elm make —optimize, покройте декодеры тестами и только потом переносите на Elm целое приложение. Ограничения языка реальны, но там, где проект живёт годами без команды сопровождения, строгость окупается.