Пример Model-View-Update архитектуры на F#

Кому-то не нравился Redux в React из-за его имплементации на JS?

Мне он не нравился корявыми switch-case в reducer'ах, есть языки с более удобным pattern matching, и типы лучше моделирующие события и модель. Например, F#.
Эта статья — разъяснение устройства обмена сообщениями в Elmish.

Я приведу пример консольного приложения написанного по этой архитектуре, на его примере будет понятно как использовать такой подход, а потом разберемся в архитектуре Elmish.

Я написал простое консольное приложение для чтения стихотворений, в seed'e есть несколько стихотворений по одному на каждого автора, которые выводятся на консоль.

Окно вмещает только 4 строки текста, по нажатию кнопок "Up" и "Down" можно листать стихотворение, цифровые кнопки меняют цвет текста, а кнопки влево и вправо позволяют перемещаться по истории действий, например пользователь читал стихотворение Пушкина, переключился на стихотворение Есенина, сменил цвет текста, а потом подумал, что цвет не очень и Есенин ему не нравится, нажал дважды на стрелку влево и вернулся к месту на котором закончил читать Пушкина.

Это чудо выглядит так :

Рассмотрим реализацию.

Если продумать все варианты, понятно, что все, что может делать пользователь это нажимать кнопку, по ее нажатию, можно определить, что хочет пользователь, а он может желать:

1. Поменять автора
2. Поменять цвет
3. Пролистать (наверх/вниз)
4. Пройти на предыдущую/последующую версию

Поскольку пользователь должен иметь возможность возвращаться на версию назад, нужно фиксировать его действия и запоминать модель, в итоге все возможные сообщения, описываются так:

type Msg =
        | ConsoleEvent of ConsoleKey
        | ChangeAuthor of Author
        | ChangeColor of ConsoleColor
        | ChangePosition of ChangePosition
        | ChangeVersion of ChangeVersion
        | RememberModel
        | WaitUserAction
        | Exit

type ChangeVersion =
        | Back
        | Forward

type ChangePosition =
        | Up
        | Down

type Author =
        | Pushkin
        | Lermontov
        | Blok
        | Esenin

type Poem = Poem of string

В модели нужно хранить информацию о тексте, который сейчас в консоли, историю действий пользователя и количество действий на которые пользователь будет откатываться, чтобы знать какую именно модель нужно показать.

type Model =
        {
            viewTextInfo: ViewTextInfo
            countVersionBack: int
            history: ViewTextInfo list
        }

type ViewTextInfo =
        {
            text: string;
            formatText: string;
            countLines: int;
            positionY: int;
            color: ConsoleColor
        }

Архитектура Elmish — model-view-update, модель уже рассмотрели, перейдем к view:

let SnowAndUserActionView (model: Model) (dispatch: Msg -> unit) =
       let { formatText = ft; color = clr } = model.viewTextInfo;
       clearConsoleAndPrintTextWithColor ft clr
       let key = Console.ReadKey().Key;
       Msg.ConsoleEvent key |> dispatch

let clearConsoleAndPrintTextWithColor (text: string) (color: ConsoleColor) =
       Console.Clear();
       Console.WriteLine()
       Console.ForegroundColor <- color
       Console.WriteLine(text)

Это одно из представлений, оно отрисовывается на основе viewTextInfo, ждет реакцию пользователя, и отправляет это сообщение в функцию update.
Позже подробно рассмотрим, что именно происходит при вызове dispatch, и что это вообще за функция.

Update:

let update (msg: Msg) (model: Model) =
        match msg with
        | ConsoleEvent key -> model, updateConsoleEvent key
        | ChangeAuthor author -> updateChangeAuthor model author
        | ChangeColor color -> updateChangeColor model color
        | ChangePosition position -> updateChangePosition model position
        | ChangeVersion version -> updateChangeVersion model version
        | RememberModel -> updateAddEvent model
        | WaitUserAction -> model, []

В зависимости от типа msg выбирается какая функция будет обрабатывать сообщение.

Это update на действие пользователя, сопоставление кнопки с сообщением, последний кейс — возвращает событие WaitUserAction — игнорируем нажатие и ждем дальнейших действий пользователя.

let updateConsoleEvent (key: ConsoleKey) =
       let msg =
        match key with
        | ConsoleKey.D1 -> ChangeColor ConsoleColor.Red
        | ConsoleKey.D2 -> ChangeColor ConsoleColor.Green
        | ConsoleKey.D3 -> ChangeColor ConsoleColor.Blue
        | ConsoleKey.D4 -> ChangeColor ConsoleColor.Black
        | ConsoleKey.D5 -> ChangeColor ConsoleColor.Cyan

        | ConsoleKey.LeftArrow -> ChangeVersion Back
        | ConsoleKey.RightArrow -> ChangeVersion Forward

        | ConsoleKey.P -> ChangeAuthor Author.Pushkin
        | ConsoleKey.E -> ChangeAuthor Author.Esenin
        | ConsoleKey.B -> ChangeAuthor Author.Blok
        | ConsoleKey.L -> ChangeAuthor Author.Lermontov

        | ConsoleKey.UpArrow -> ChangePosition Up
        | ConsoleKey.DownArrow -> ChangePosition Down

        | ConsoleKey.X -> Exit

        | _ -> WaitUserAction
       msg |> Cmd.ofMsg

Меняем автора, обратите внимание, что countVersionBack сразу сбрасывается на 0, это значит, что если пользователь откатывался по своей истории назад, а потом захотел сменить цвет, это действие будет трактоваться как новое и будет добавлено в history.

let updateChangeAuthor (model: Model) (author: Author) =
        let (Poem updatedText) = seed.[author]
        let updatedFormatText = getlines updatedText 0 3
        let updatedCountLines = (splitStr updatedText).Length
        let updatedViewTextInfo =
            {model.viewTextInfo
             with text = updatedText;
              formatText = updatedFormatText;
              countLines = updatedCountLines }

        { model
          with viewTextInfo = updatedViewTextInfo;
           countVersionBack = 0 },
        Cmd.ofMsg RememberModel

Также мы отправляем сообщение RememberModel, обработчик которого, обновляет history, добавляя текущую модель.

let updateModelHistory model =
        { model with history = model.history @ [ model.viewTextInfo ] },
        Cmd.ofMsg WaitUserAction

Остальные update'ы можно посмотреть тут, они похожи на рассмотренные.

Чтобы проверить работоспособность программы, я приведу тесты на несколько сценариев:

[<Property(Verbose=true)>]
let ``Автор равен последнему переданному автору`` (authors: Author list) =
    let state = (createProgram (authors |> List.map ChangeAuthor) |> run)
    match (authors |> List.tryLast) with
    | Some s ->
        let (Poem text) = seed.[s]
        state.viewTextInfo.text = text
    | None -> true

[<Property(Verbose=true)>]
let ``Цвет равен последнему переданному цвету`` changeColorMsg =
    let state = (createProgram (changeColorMsg|>List.map ChangeColor)|> run)
    match (changeColorMsg |> List.tryLast) with
    | Some s -> state.viewTextInfo.color = s
    | None -> true

[<Property(Verbose=true,Arbitrary=[|typeof<ChangeColorAuthorPosition>|])>]
let ``Вызов случайных цепочек команд смены цвета и автора корректен`` msgs =
      let tryLastSomeList list = list |> List.filter (Option.isSome)
                                      |> List.map (Option.get)
                                      |> List.tryLast
      let lastAuthor = msgs
                       |> List.map (fun x -> match x with
                                             | ChangeAuthor a -> Some a
                                             | _ -> None)
                       |> tryLastSomeList
      let lastColor = msgs
                       |> List.map (fun x -> match x with
                                            | ChangeColor a -> Some a
                                            | _ -> None)
                       |> tryLastSomeList
      let state = (createProgram msgs |> run)
      let colorTest =
          match lastColor with
          | Some s -> state.viewTextInfo.color = s
          | None -> true
      let authorTest =
          match lastAuthor with
          | Some s ->
              let (Poem t) = seed.[s];
              state.viewTextInfo.text = t
          | None -> true
      authorTest && colorTest

Для этого используется библиотека FsCheck, которая предоставляет возможность генерации данных.

Теперь рассмотрим ядро программы, код в Elmish писался на все случаи жизни я упростил его(оригинальный код):

type Dispatch<'msg> = 'msg -> unit

type Sub<'msg> = Dispatch<'msg> -> unit

type Cmd<'msg> = Sub<'msg> list

type Program<'model, 'msg, 'view> =
        {
          init: unit ->'model * Cmd<'msg>
          update: 'msg -> 'model -> ('model * Cmd<'msg>)
          setState: 'model -> 'msg -> Dispatch<'msg> -> unit
         }

let runWith<'arg, 'model, 'msg, 'view> (program: Program<'model, 'msg, 'view>) =
    let (initModel, initCmd) = program.init() //1
    let mutable state = initModel //2
    let mutable reentered = false //3
    let buffer = RingBuffer 10 //4 

    let rec dispatch msg =
        let mutable nextMsg = Some msg; //5
        if reentered  //6
         then buffer.Push msg //7
         else 
             while Option.isSome nextMsg do // 8
                 reentered <- true // 9
                 let (model, cmd) = program.update nextMsg.Value state // 9
                 program.setState model nextMsg.Value dispatch // 10
                 Cmd.exec dispatch cmd |> ignore  //11
                 state <- model; // 12
                 nextMsg <- buffer.Pop() // 13
                 reentered <- false; // 14

    Cmd.exec dispatch initCmd |> ignore // 15
    state //16

let run program = runWith program

Тип Dispath<'msg> именно тот dispatch который используется во view, он принимает Message и возвращает unit
Sub<'msg> — функция подписчик, принимает dispatch и возвращает unit, мы порождаем список Sub, когда используем ofMsg:

let ofMsg<'msg> (msg: 'msg): Cmd<'msg> =
        [ fun (dispatch: Dispatch<'msg>) -> dispatch msg ]

После вызова ofMsg, как, например Cmd.ofMsg RememberModel в конце метода updateChangeAuthor, через некоторое время вызовется подписчик и сообщение попадет в метод update
Cmd<'msg> — Лист Sub<'msg>

Перейдем к типу Program, это generic тип, принимает тип модели, сообщения и view, в консольном приложении нет нужны что-то возвращать из view, но в Elmish.React view возвращает F# структуру DOM дерева.

Поле init — вызывается на старте elmish, эта функция возвращает начальную модель и первое сообщение, в моем случае я возвращаю Cmd.ofMsg RememberModel
Update — главная функция update, вы с ней уже знакомы.

SetState — в стандартном Elmish принимает только модель и dispatch и вызывает view, но мне нужно передавать msg, чтобы подменять view в зависимости от сообщения, я покажу ее реализацию после того, как мы рассмотрим обмен сообщениями.

Функция runWith, получает конфигурацию, далее вызывает init, возвращаются модель и первое сообщение, на строчках 2,3 объявляются два изменяемых объекта, первый — в котором будет храниться state, второй нужен функции dispatch.

На 4 строке объявляется buffer — можно воспринимать его как очередь, первый зашел — первый вышел(на самом деле реализация RingBuffer, очень интересна, я взял ее из библиотеки, советую ознакомиться на github)

Далее идет сама рекурсивная функция dispatch, та же самая, что вызывается во view, при первом вызове мы минуем if на строчке 6 и сразу попадаем в цикл, ставим reented значение true, чтобы последующие рекурсивные вызовы, не заходили снова в этот цикл, а добавляли новое сообщение в buffer.

На строчке 9 выполняем метод update, из которого забираем измененную модель и новое сообщение(в первый раз это сообщение RememberModel)
На строчке 10 отрисовывается модель, метод SetState выглядит так:

Как вы видите, разные сообщения вызывают разные view
Это необходимая мера, чтобы не блокировать поток, потому что вызов Console.ReadLine блокирует поток программы, и такие события как RememberModel,ChangeColor (которые инициируются внутри программы, а не пользователем) будут каждый раз ждать пока пользователь нажмет на кнопку, хотя просто должны изменить цвет.

В первый раз будет вызвана функция OnlyShowView, которая просто отрисует модель.
Eсли бы вместо RememberModel в метод пришло сообщение WaitUserAction, то вызвалась бы функция ShowAndUserActionView, которая отрисует модель и заблокирует поток, ожидая нажатия кнопки, как только кнопка будет нажата снова вызовется метод dispatch, и сообщение будет запушено в buffer(потому что reenvited= false)

Далее нужно обработать все сообщения, пришедшие из метода update, иначе мы их потеряем, рекурсивные вызовы попадут в цикл только если reented станет false. 11 строчка выглядит сложно, но на самом деле это просто push всех сообщения в buffer:

let exec<'msg> (dispatch: Dispatch<'msg>) (cmd: Cmd<'msg>) =
        cmd |> List.map (fun sub -> sub dispatch)

Для всех подписчиков, возвращенных методом update, будет вызван dispatch, тем самым эти сообщения будут добавлены в buffer.

На 12 строке обновляем модель, достаем новое сообщение и возвращаем значение reented на false, когда buffer не пустой это не нужно, но если там не осталось элементов и dispatch может быть вызван только из view, это имеет смысл. Опять же в нашем случае, когда все синхронно, это не имеет смысла, так как мы ожидаем синхронный вызов dispatch на 10 строчке, но если в коде есть асинхронные вызовы, возможен вызов dispatch из callback'a и нужно иметь возможность продолжить выполнение программы.

Ну вот и все описание функции dispatch, на 15 строке она вызывается и на 16 возвращается state.

В консольном приложении выход происходит, когда buffer становится пустым. В оригинальной версии runWith ничего не возвращает, но без этого тестирование невозможно.

Program для тестирования отличается, функция createProgram принимает список сообщений, которые бы инициировал пользователь и в SetState они подменяют обычное нажатие:

Еще одно отличие моей измененной версии от оригинальной — сначала вызывается функция update, а потом только setState, в оригинальной версии наоборот, сначала происходит отрисовка, а потом обработка сообщений, я вынужден был на это пойти из-за блокирующего вызова Console.ReadKey (необходимости менять view)

Я надеюсь, мне удалось объяснить как устроен Elmish и подобные системы, за бортом осталось довольно много функционала Elmish, если вас заинтересовала это тема, советую заглянуть на их сайт.

Спасибо за внимание!

Автор: Евгений

Источник