Fable on Wails with Feliz and Elmish

ElmishはFableでElmっぽいアーキテクチャを実現するライブラリ。

elmish.github.io

今回もまた前回に引き続きで。

yohfee.hatenadiary.org

まずは依存関係のインストール。

$ cd path/to/hello
$ cd frontend/src
$ dotnet add package Fable.Elmish.React -v 3.0.1

Elmish 4もまたFable 4待ちと思われる。

frontend/src/App.fsはこうなる。

module App

type Model = int

type Msg =
    | Increment
    | Decrement

let init () = 0

let update msg count =
    match msg with
    | Increment -> count + 1
    | Decrement -> count - 1

open Feliz

let view (state: Model) dispatch =
    Html.div [ Html.button [ prop.style [ style.marginRight 5 ]
                             prop.onClick (fun _ -> dispatch Increment)
                             prop.text "Increment" ]
               Html.button [ prop.style [ style.marginLeft 5 ]
                             prop.onClick (fun _ -> dispatch Decrement)
                             prop.text "Decrement" ]
               Html.h1 state ]

open Elmish
open Elmish.React

Program.mkSimple init update view
|> Program.withReactBatched "root"
|> Program.run

前回のなんとなくReact感が伝わってたものから、JSXに相当するところはイベントハンドラ変わらないものの、なんとなくReduxっぽさある雰囲気になったように思う。

あとはwails devしてイカ省略。

ということでWailsのフロントエンドをFable+Feliz+Elmish+Reactで作っていくことはできそう感を得た。次回はWailsのバックエンドつまりGoとの相互運用性を見ていこう。