Slide 1
Slide 1 text
GHCJS Miso による
Haskell + Firebase
10 分間クッキング
チェシャ猫 (@y_taka_23)
FunFunFunctional #1 (2019/05/27)
Slide 2
Slide 2 text
本日のお品書き
● 話すこと
○ Miso Framework の使い方
○ JSaddle による JavaScript の呼び出し
● 話さないこと
○ サーバサイドとのコード共有や SSR
○ Firebase のセキュリティ設定など
Slide 3
Slide 3 text
Miso Framework
https://haskell-miso.org
Slide 4
Slide 4 text
Miso Framework
● GHCJS
○ GHC のフォーク、JavaScript を出力
○ Haskell 用ライブラリが（ほぼ）使用可能
● Miso Framework
○ GHCJS で The Elm Architecture を実装
○ 他に類似の FW として Reflex など
Slide 5
Slide 5 text
Miso Elm
Model Model
Action Message
Update Update
Effect Command
Subscription Subscription
View View
Slide 6
Slide 6 text
（以下、当日はライブコーディング）
Slide 7
Slide 7 text
完成イメージ図
Slide 8
Slide 8 text
1. アプリの基本構造を作成
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
2. ユーザ入力を取得し格納
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
3. Realtime DB へデータを格納
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
4. Realtime DB からデータを取得
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
5. 入力フォームをリセット
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
まとめ
● Miso Framework の使い方
○ The Elm Architecture の Haskell 実装
○ Elm とほぼ同じだが副作用の扱いに若干の差
● JSaddle による JavaScript の呼び出し
○ Update / Sub の内部で IO として使用可能
○ 事実上、型が付いていないので注意
Slide 23
Slide 23 text
Haskell Day 2019 開催決定！
Slide 24
Slide 24 text
Elm もいいけど Haskell もね！
Presented by チェシャ猫 (@y_taka_23)