Tweet
Tweet

Slide 1

Slide 1 text

Elm Meets JavaScript Libraries チェシャ猫 (@y_taka_23) We Are JavaScripters! @26th (2018/11/22) #wejs

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

The Elm Architecture #wejs

Slide 4

Slide 4 text

Msg Model Html (rendering) update view #wejs

Slide 5

Slide 5 text

#wejs ＋ － 42 例：カウンタ

Slide 6

Slide 6 text

Msg Model Html (rendering) update view #wejs

Slide 7

Slide 7 text

#wejs

Slide 8

Slide 8 text

Msg Model Html (rendering) update view #wejs

Slide 9

Slide 9 text

#wejs

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

#wejs

Slide 17

Slide 17 text

#wejs

Slide 18

Slide 18 text

#wejs

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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