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
   

   View Slide

2. #wejs
   Elm
   http://elm-lang.org
   

   View Slide

3. The Elm Architecture
   #wejs
   

   View Slide

4. Msg
   Model
   Html
   (rendering)
   update
   view
   #wejs
   

   View Slide

5. #wejs
   ＋
   － 42
   例：カウンタ
   

   View Slide

6. Msg
   Model
   Html
   (rendering)
   update
   view
   #wejs
   

   View Slide

7. #wejs
   

   View Slide

8. Msg
   Model
   Html
   (rendering)
   update
   view
   #wejs
   

   View Slide

9. #wejs
   

   View Slide

10. The Elm Architecture (TEA)
    ● update や view は「純粋」な関数
    ○ 結果がソースコード以外に依存しない
    ● 再現性があるのでテストが容易
    ○ Model と Msg が同じなら update の結果も同じ
    ○ Html は必ず view 経由でしか変更されない
    ● Redux や Vuex でも採用
    ○ Elm は TEA 以外の書き方を許さないので安全
    #wejs
    

    View Slide

11. 常に同じ = アプリとして無意味
    #wejs
    

    View Slide

12. Cmd / Sub
    ● 状況に応じた動作の変更は必須
    ● Command (Cmd)
    ○ update の際に外部に向かって通信を行う
    ○ サーバサイドへの REST 通信など
    ● Subscription (Sub)
    ○ 外部からやってくる Msg を待ち受ける
    ○ マウスの座標の変化、websocket など
    #wejs
    

    View Slide

13. Msg
    Model
    Html
    (rendering)
    update
    view
    Sub
    Cmd
    #wejs
    

    View Slide

14. JS も外部サーバ的な扱い
    #wejs
    

    View Slide

15. Msg
    Model
    Html
    (rendering)
    update
    view
    Sub
    Cmd
    (JS)
    #wejs
    

    View Slide

16. #wejs
    

    View Slide

17. #wejs
    

    View Slide

18. #wejs
    

    View Slide

19. まとめ
    ● The Elm Architecture (TEA)
    ○ Elm の「中の世界」で純粋性を保つ
    ○ 状態管理の煩雑さを防ぎテストを容易に
    ● Cmd / Sub
    ○ 「外の世界」とのインタフェースを定義
    ● JS ライブラリとの連携
    ○ 外部サーバと同様 Cmd / Sub で「通信」する
    #wejs
    

    View Slide

20. Would You Like a Cup of TEA?
    Presented by チェシャ猫 (@y_taka_23)
    #wejs
    

    View Slide