The document discusses Elmish, a framework for building user interfaces in F# using the Elm architecture of Model-View-Update. It allows defining the UI as functions of the application's state (Model), handling user events and updating state (Update), and re-rendering the UI (View). The View renders the UI as HTML, Update handles events by updating the Model, and changes trigger re-rendering by View. Elmish provides a functional and type-safe way to develop web apps in F# that can share types between client and server.

1. Elmish / F#
SAFE Stack による Web 開発

2. T. Midorikawa a.k.a midoliy
• 大阪府 大阪市
• C# / F# 愛の伝道師 (非公式)
• Twitter: @ _midoliy_
• GitHub: @ Midoliy
• HP: https://midoliy.com
• Youtube: https://www.youtube.com/user/dgakusei
• 大阪 F# もくもく会 主催: https://oosakafs-moku2.connpass.com

3. What is SAFE Stack ?
• Fableを使ってSPAを作成するためのプロジェクトテンプレート
Saturn ・・・ バックエンドサービス用 F# ライブラリ.
Azure ・・・ いわずもがなの Microsoft Azure.
Fable ・・・ Babel を搭載した F# → Javascript コンパイラ.
Elmish ・・・ 本日の主役. F# で UI を記述するためのフレームワー
ク.

4. SAFE Stack 構成図
(引用元) https://safe-stack.github.io/docs/overview/

5. What is Elmish ?
• Elmスタイルの 「Model - View - Update」アーキテクチャをサポートするフレームワー
ク
UpdateView
UI
The Elm Architecture (MVU)
HTML Message
Create
New Model
Model

6. The Elm Architecture (MVU)
What is Elmish ?
• Elmスタイルの 「Model - View - Update」アーキテクチャをサポートするフレームワー
ク
UpdateView
UI
HTML Message
Create
New Model
Model

7. View → UI
let view (model : Model) (dispatch : Msg -> unit) =
div []
[ Navbar.navbar [ Navbar.Color IsPrimary ]
[ Navbar.Item.div [ ]
[ Heading.h2 [ ]
[ str "SAFE Template" ] ] ]
Container.container []
[ Content.content [ Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ] ]
[ Heading.h3 [] [ str ("Press buttons to manipulate counter: " + show model) ] ]
Columns.columns []
[ Column.column [] [ button "-" (fun _ -> dispatch Decrement) ]
Column.column [] [ button "+" (fun _ -> dispatch Increment) ] ] ]
Footer.footer [ ]
[ Content.content [ Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ] ]
[ safeComponents ] ] ]

8. View → UI
let view (model : Model) (dispatch : Msg -> unit) =
div []
[ Navbar.navbar [ Navbar.Color IsPrimary ]
[ Navbar.Item.div [ ]
[ Heading.h2 [ ]
[ str "SAFE Template" ] ] ]
Container.container []
[ Content.content [ Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ] ]
[ Heading.h3 [] [ str ("Press buttons to manipulate counter: " + show model) ] ]
Columns.columns []
[ Column.column [] [ button "-" (fun _ -> dispatch Decrement) ]
Column.column [] [ button "+" (fun _ -> dispatch Increment) ] ] ]
Footer.footer [ ]
[ Content.content [ Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ] ]
[ safeComponents ] ] ]
<nav class="navbar is-primary">
<div class="navbar-item">
<h2 class="title is-2">SAFE Template</h2>
</div>
</nav>

9. View → UI

10. View → UI
Container.container []
[ Content.content [ Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ] ]
[ Heading.h3 [] [ str ("Press buttons to manipulate counter: " + show model) ] ]
Columns.columns []
[ Column.column [] [ button "-" (fun _ -> dispatch Decrement) ]
Column.column [] [ button "+" (fun _ -> dispatch Increment) ] ] ]
<div class="container">
<div class="content has-text-centered">
<h3 class="title is-3">Press buttons to manipulate counter: 42</h3>
</div>
<div class="columns">
<div class="column">
<button class="button is-primary is-fullwidth">-</button>
</div>
<div class="column">
<button class="button is-primary is-fullwidth">+</button>
</div>
</div>
</div>

11. View → UI
Container.container []
[ Content.content [ Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ] ]
[ Heading.h3 [] [ str ("Press buttons to manipulate counter: " + show model) ] ]
Columns.columns []
[ Column.column [] [ button "-" (fun _ -> dispatch Decrement) ]
Column.column [] [ button "+" (fun _ -> dispatch Increment) ] ] ]
UI → Update

12. The Elm Architecture (MVU)
What is Elmish ?
• Elmスタイルの 「Model - View - Update」アーキテクチャをサポートするフレームワー
ク
UpdateView
UIHTML Message
Create
New Model
Model

13. View → UI & UI → Update

14. The Elm Architecture (MVU)
What is Elmish ?
• Elmスタイルの 「Model - View - Update」アーキテクチャをサポートするフレームワー
ク
UpdateView
UI
HTML Message
Create
New Model
Model

15. Update → View
let update (msg : Msg) (currentModel : Model) : Model * Cmd<Msg> =
match currentModel.Counter, msg with
| Some counter, Increment ->
let nextModel = { currentModel with Counter = Some { Value = counter.Value + 1 } }
nextModel, Cmd.none
| Some counter, Decrement ->
let nextModel = { currentModel with Counter = Some { Value = counter.Value - 1 } }
nextModel, Cmd.none
| _, InitialCountLoaded initialCount ->
let nextModel = { Counter = Some initialCount }
nextModel, Cmd.none
| _ -> currentModel, Cmd.none

16. Update → View
let update (msg : Msg) (currentModel : Model) : Model * Cmd<Msg> =
match currentModel.Counter, msg with
| Some counter, Increment ->
let nextModel = { currentModel with Counter = Some { Value = counter.Value + 1 } }
nextModel, Cmd.none
| Some counter, Decrement ->
let nextModel = { currentModel with Counter = Some { Value = counter.Value - 1 } }
nextModel, Cmd.none
| _, InitialCountLoaded initialCount ->
let nextModel = { Counter = Some initialCount }
nextModel, Cmd.none
| _ -> currentModel, Cmd.none

17. Update → View
let update (msg : Msg) (currentModel : Model) : Model * Cmd<Msg> =
match currentModel.Counter, msg with
| Some counter, Increment ->
let nextModel = { currentModel with Counter = Some { Value = counter.Value + 1 } }
nextModel, Cmd.none
| Some counter, Decrement ->
let nextModel = { currentModel with Counter = Some { Value = counter.Value - 1 } }
nextModel, Cmd.none
| _, InitialCountLoaded initialCount ->
let nextModel = { Counter = Some initialCount }
nextModel, Cmd.none
| _ -> currentModel, Cmd.none

18. View → UI
let view (model : Model) (dispatch : Msg -> unit) =
div []
[ Navbar.navbar [ Navbar.Color IsPrimary ]
[ Navbar.Item.div [ ]
[ Heading.h2 [ ]
[ str "SAFE Template" ] ] ]
Container.container []
[ Content.content [ Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ] ]
[ Heading.h3 [] [ str ("Press buttons to manipulate counter: " + show model) ] ]
Columns.columns []
[ Column.column [] [ button "-" (fun _ -> dispatch Decrement) ]
Column.column [] [ button "+" (fun _ -> dispatch Increment) ] ] ]
Footer.footer [ ]
[ Content.content [ Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ] ]
[ safeComponents ] ] ]

19. まとめ
• Elmish = F# で Web開発するためのイケてるライブラリ
• Reactが下で動作しているので、実行効率もそこまで悪くない
• サーバ側と型を共有できるので、型安全にコーディング可能
• 関数型プログラミングでバグり難い開発を！

20. ご清聴ありがとうございまし
た