Elm Meets JavaScript Libraries #wejs / We Are JavaScripters 26th

We Are JavaScripters! @26th で使用したスライドです。

Elm を特徴づけるものとして、純粋関数型プログラミングの枠内で Web フロントエンドをうまく扱うことに成功したいわゆる The Elm Architecture (TEA) があります。初心者向けの解説としてよく Msg, Model, update からなる図が挙げられていますが、実用的なものを作る場合 Cmd と Sub は避けては取れない要素です。

そこで本スライドでは、Cmd と Sub を用いた JavaScript ライブラリとの連携について簡単に解説しました。JavaScript の関数を直接内部に埋め込む他の AltJS と異なり、Elm における JavaScript 連携はクライアント・サーバ間の通信と似た形になるのがポイントです。

ちなみに当日会場では、Firebase を利用した「リアルタイム化」カウンタのデモを披露しました。

イベント概要：https://wajs.connpass.com/event/107088/
ブログ記事：http://ccvanishing.hateblo.jp/entry/2018/11/24/232705
デモアプリ：https://github.com/y-taka-23/elm-realtime-counter

Transcript

1. Elm Meets JavaScript Libraries チェシャ猫 (@y_taka_23) We Are JavaScripters! @26th (2018/11/22) #wejs
2. #wejs Elm http://elm-lang.org
3. The Elm Architecture #wejs
4. Msg Model Html (rendering) update view #wejs
5. #wejs ＋ － 42 例：カウンタ
6. Msg Model Html (rendering) update view #wejs
7. #wejs
8. Msg Model Html (rendering) update view #wejs
9. #wejs
10. The Elm Architecture (TEA) • update や view は「純粋」な関数 ◦ 結果がソースコード以外に依存しない • 再現性があるのでテストが容易 ◦ Model と Msg が同じなら update の結果も同じ ◦ Html は必ず view 経由でしか変更されない • Redux や Vuex でも採用 ◦ Elm は TEA 以外の書き方を許さないので安全 #wejs
11. 常に同じ = アプリとして無意味 #wejs
12. Cmd / Sub • 状況に応じた動作の変更は必須 • Command (Cmd) ◦ update の際に外部に向かって通信を行う ◦ サーバサイドへの REST 通信など • Subscription (Sub) ◦ 外部からやってくる Msg を待ち受ける ◦ マウスの座標の変化、websocket など #wejs
13. Msg Model Html (rendering) update view Sub Cmd #wejs
14. JS も外部サーバ的な扱い #wejs
15. Msg Model Html (rendering) update view Sub Cmd (JS) #wejs
16. #wejs
17. #wejs
18. #wejs
19. まとめ • The Elm Architecture (TEA) ◦ Elm の「中の世界」で純粋性を保つ ◦ 状態管理の煩雑さを防ぎテストを容易に • Cmd / Sub ◦ 「外の世界」とのインタフェースを定義 • JS ライブラリとの連携 ◦ 外部サーバと同様 Cmd / Sub で「通信」する #wejs
20. Would You Like a Cup of TEA? Presented by チェシャ猫 (@y_taka_23) #wejs