Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GHCJS Miso による Haskell + Firebase 10 分間クッキング #funfunfunctional / Fun Fun Functional 1st

GHCJS Miso による Haskell + Firebase 10 分間クッキング #funfunfunctional / Fun Fun Functional 1st

Fun Fun Functional (1) で使用したスライドです。

Miso Framework はいわゆる The Elm Architecture を Haskell 上で実装するためのフレームワークです。今回のイベントでは、この Miso Framework を Firebase と組み合わせ、リアルタイムにブラウザ間同期を行うサンプルアプリをその場で実装するライブコーディングを行いました。

イベント概要:https://opt.connpass.com/event/128536/
ブログ記事:https://ccvanishing.hateblo.jp/entry/2019/05/29/194539

y_taka_23

May 27, 2019
Tweet

More Decks by y_taka_23

Other Decks in Technology

Transcript

  1. GHCJS Miso による Haskell + Firebase 10 分間クッキング チェシャ猫 (@y_taka_23)

    FunFunFunctional #1 (2019/05/27)
  2. 本日のお品書き • 話すこと ◦ Miso Framework の使い方 ◦ JSaddle による

    JavaScript の呼び出し • 話さないこと ◦ サーバサイドとのコード共有や SSR ◦ Firebase のセキュリティ設定など
  3. Miso Framework https://haskell-miso.org

  4. Miso Framework • GHCJS ◦ GHC のフォーク、JavaScript を出力 ◦ Haskell

    用ライブラリが(ほぼ)使用可能 • Miso Framework ◦ GHCJS で The Elm Architecture を実装 ◦ 他に類似の FW として Reflex など
  5. Miso Elm Model Model Action Message Update Update Effect Command

    Subscription Subscription View View
  6. (以下、当日はライブコーディング)

  7. 完成イメージ図

  8. 1. アプリの基本構造を作成

  9. None
  10. None
  11. 2. ユーザ入力を取得し格納

  12. None
  13. None
  14. 3. Realtime DB へデータを格納

  15. None
  16. None
  17. 4. Realtime DB からデータを取得

  18. None
  19. None
  20. 5. 入力フォームをリセット

  21. None
  22. まとめ • Miso Framework の使い方 ◦ The Elm Architecture の

    Haskell 実装 ◦ Elm とほぼ同じだが副作用の扱いに若干の差 • JSaddle による JavaScript の呼び出し ◦ Update / Sub の内部で IO として使用可能 ◦ 事実上、型が付いていないので注意
  23. Haskell Day 2019 開催決定!

  24. Elm もいいけど Haskell もね! Presented by チェシャ猫 (@y_taka_23)