Share
Embed
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