$30 off During Our Annual Pro Sale. View Details »

Elm Meets JavaScript Libraries #wejs / We Are J...

y_taka_23
November 22, 2018

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

y_taka_23

November 22, 2018
Tweet

More Decks by y_taka_23

Other Decks in Technology

Transcript

  1. The Elm Architecture (TEA) • update や view は「純粋」な関数 ◦

    結果がソースコード以外に依存しない • 再現性があるのでテストが容易 ◦ Model と Msg が同じなら update の結果も同じ ◦ Html は必ず view 経由でしか変更されない • Redux や Vuex でも採用 ◦ Elm は TEA 以外の書き方を許さないので安全 #wejs
  2. Cmd / Sub • 状況に応じた動作の変更は必須 • Command (Cmd) ◦ update

    の際に外部に向かって通信を行う ◦ サーバサイドへの REST 通信など • Subscription (Sub) ◦ 外部からやってくる Msg を待ち受ける ◦ マウスの座標の変化、websocket など #wejs
  3. まとめ • The Elm Architecture (TEA) ◦ Elm の「中の世界」で純粋性を保つ ◦

    状態管理の煩雑さを防ぎテストを容易に • Cmd / Sub ◦ 「外の世界」とのインタフェースを定義 • JS ライブラリとの連携 ◦ 外部サーバと同様 Cmd / Sub で「通信」する #wejs