dotnetConf2019 meetup in AICHI / Elmish
Download as PPTX, PDF1 like600 views
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.
![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 ] ] ]](https://image.slidesharecdn.com/dotnetconf2019meetupinaichielmish-191005132923/85/dotnetConf2019-meetup-in-AICHI-Elmish-7-320.jpg)
![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>](https://image.slidesharecdn.com/dotnetconf2019meetupinaichielmish-191005132923/85/dotnetConf2019-meetup-in-AICHI-Elmish-8-320.jpg)
![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>](https://image.slidesharecdn.com/dotnetconf2019meetupinaichielmish-191005132923/85/dotnetConf2019-meetup-in-AICHI-Elmish-10-320.jpg)
![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](https://image.slidesharecdn.com/dotnetconf2019meetupinaichielmish-191005132923/85/dotnetConf2019-meetup-in-AICHI-Elmish-11-320.jpg)
![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 ] ] ]](https://image.slidesharecdn.com/dotnetconf2019meetupinaichielmish-191005132923/85/dotnetConf2019-meetup-in-AICHI-Elmish-18-320.jpg)
dotnetConf2019 meetup in AICHI / Elmish
- 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. ご清聴ありがとうございまし た