Elm. Удобный и неловкий

    Поговорим о Elm.


    Elm — функциональный язык программирования для frontend-разработки. Синтаксис похож на Haskell, но значительно упрощен и специализирован. Исходный код на Elm компилируется в нативный JavaScript. Скомпилированный JavaScript содержит код приложения, которое управляют поддеревом DOM.


    Elm. Удобный и неловкий. Композиция
    Elm. Удобный и неловкий. Json.Encoder и Json.Decoder
    Elm. Удобный и неловкий. Http, Task


    Основным элементом в архитектуре языка Elm является приложение. В общем случае каждое приложение содержит:


    1. Состояние или модель. Данные описывающее текущее состояние приложения;
    2. Множество допустимых сообщений. Сообщения отправляются при наступлении событий (допустим клик по кнопке) и доставляются в функцию update;
    3. Функцию view, которая на основании состояния генерирует новое DOM дерево;
    4. Функция update, которая принимает модель и сообщение, а возвращает новую модель и требуемые эффекты;
    5. Функция subscribe, подписка на уведомления о событиях. В ядре языка имеются подписки на таймер, WebSocket и прочее.

    Типизация


    Все должно быть типизировано. Как следствие статическая проверка согласованности кода. Если скомпилировалось, то должно работать. А вот будет оно работать как вы ожидаете или нет — никаких гарантий. Это значительно упрощает рефакторинг.


    Модель


    Модель является пользовательским типом. Пользовательские типы строятся из:


    1. Type Aliases для описания структур;
    2. Union Types для описания допустимых объединений типов;
    3. базовые типы Int, String и прочие.

    Union Types позволяют объявлять тегированные типы. Возьмем для примера описания типа User:


    type User = Anonymous | User String

    Объявленный тип содержит информацию о типе пользователя и его данные, если он авторизован. Иначе пользователь анонимный.


    Граница


    Граница между Elm runtime и внешним окружением через декодеры. Декодер (Json.Decode) — функция, которая принимает на вход JSON и возвращает Elm тип. В процессе выполнения Json.Decode.decodeString или Json.Decode.decodeValue проверяется структура входных данных и соответствие типам.


    Декодер возвращает тип Result, который содержит данные, в случае успеха, или ошибку.


    Представление (view)


    Представление является функций от состояния, которая возвращают информацию для генерации DOM дерева. Пример:


    view : Model -> Html.Html Msg
    view model =
      case model.user of 
        Anonymous ->
          Html.div [] [ Html.text “Anonymous” ]
    
       User name ->
          Html.div [] [ Html.text (“Welcome ” ++ name) ]

    Для генерации DOM узлов используются функции. В боевых проектах view представляет собой композицию из функций более общего порядка. Например:


    view : Model -> Html.Html Msg
    view model =
      case model.user of 
        Anonymous ->
          anonymousView
    
       User name ->
          userView name

    anonymousView и userView пользовательские функции, которые генерируют небольшие части интерфейса.


    Мутации (update)


    Все события (действия пользователя, сетевые и тп) генерируют сообщения, которые доставляются в зарегистрированную при инициализации функцию. По умолчанию, эта функция имеет имя update. Функция принимает событие и модель, а возвращает новую модель и команды. Команды выполняются в Elm runtime и также могут генерировать события.


    Для примера, инкремент переменной при нажатии кнопки:


    update : Model -> Msg -> (Model, Cmd Msg)
    update model msg =
      case msg of
        OnClick ->
          ({model | clicked = model.clicked + 1}, Cmd.none)

    Подписка (subscribe)


    Подписка на события происходит при старте приложения и повторно вызывается при каждом изменении модели.


    В случае возникновения события они доставляются в функцию update.


    Для примера, подписка на таймер с периодом 10 секунд. При достижении 10 секунд генерируется сообщение Tick и доставляется в функцию update:


    subscribe : Model -> Sub Msg
    subscribe model =
      Time.every 10 Tick

    Источники


    • +10
    • 6.7k
    • 8
    Share post

    Similar posts

    Comments 8

      +4
      Только, казалось, началось и уже закончилось.
        –2
        Все правильно казалось, серия только началась.
        0
        А про неловкость где?
          0
          Это вводная статья. Будут еще несколько, в одну получилось много.
            +1
            http://elm-lang.org/examples — примитивные примеры
            При попытке открыть любой пример (взять хоть http://elm-lang.org/examples/hello-html) происходит редирект на поддомен «try» (http://try.elm-lang.org/examples/hello-html), для которого нет DNS-записей.

            Как-то это не очень интересно)
              0
              Наверное уже не происходит.
              +3
              Любой человек, даже начинающий разработчик, за 15 минут в официальной документации вычитает больше. Какой смысл делать такую маленькую заметку?
                0
                Господам из мира dotnet, возможно будет интересна реализация elmish github.com/elmish/elmish все то же самое, но на F#
                Вариации: Xamarin + elmish github.com/fsprojects/Fabulous

                Господам из мира ocaml, возможно будет интересна реализация www.npmjs.com/package/bucklescript-tea все то же самое, но на reason ml

                Господам из мира haskell, возможно будет интересен пример на purescript github.com/parsonsmatt/purs-architecture-tutorial

                Only users with full accounts can post comments. Log in, please.