Elm が苦手なことは Haskell にやらせよう #wejs / We Are JavaScripters 19th

We Are JavaScripters! @19th で使用したスライドです。Elm がカバーできないサーバサイドについて Haskell を使用し、さらにクライアントサイドも GHCJS + Miso を用いて実装します。Elm のアーキテクチャがそのまま導入でき、かつライブラリの再利用や Isomorphic JavaScript (Server Side Rendering) が実現できます。

イベント概要：https://wajs.connpass.com/event/86763/
ブログ記事：https://ccvanishing.hateblo.jp/entry/2018/05/24/213324

Transcript

1. Elm が苦手なことは Haskell にやらせよう チェシャ猫 (@y_taka_23) We Are JavaScripters! @19th (2018/05/21) #wejs
2. Elm http://elm-lang.org #wejs
3. 超・目的特化型言語 Elm • Web フロントエンドに特化 ◦ 逆に言えばそれ以外には全く向かない • 必要最小限の言語仕様 ◦ Haskell 風だが、かなり機能が絞られている • フレームワークと不可分 ◦ いわゆる The Elm Architecture (TEA) ◦ 面倒な部分はすべて隠蔽されている #wejs
4. さて、サーバサイドは何で書く？ #wejs
5. Haskell https://haskell.org #wejs
6. サーバサイド用の言語は？ • REST API が書けるなら何でも OK ◦ サーバサイド Elm (elm-node) も一応ある • 迷うなら Haskell は悪くない選択肢 ◦ Elm とクラスタが近いし、困ったら相談可 • Haskell から Elm のコードが生成可 ◦ elm-export : JSON エンコーダ・デコーダを生成 ◦ servant-elm : REST クライアントを生成 #wejs
7. それ以上の Haskell のメリット？ #wejs
8. Isomorphic JavaScript #wejs
9. Isomorphic JavaScript • 初回アクセスはサーバで HTML 生成 ◦ ロード時間の短縮 ◦ SEO 対策（最近は大丈夫だと思うけど） • それ以後はクライアントで差分更新 • 両者で共通のロジックを使用 ◦ フロント側とサーバ側を同じ言語で書く ◦ しかし Elm はサーバ用に設計されていない #wejs
10. Elm の書きやすさを残しつつ フロントエンドも Haskell で書きたい #wejs
11. Miso https://haskell-miso.org #wejs
12. GHCJS + Miso • Glasgow Haskell Compiler (GHC) ◦ Haskell のデファクトスタンダード • GHCJS ◦ GHC のコンパイル先を JavaScript に改造 ◦ 通常の Haskell ライブラリを再利用可能 • Miso フレームワーク ◦ GHCJS で The Elm Architecture を実装 #wejs
13. Miso https://github.com/FPtje/miso-isomorphic-example #wejs
14. コード比較：カウンタ https://github.com/dmjio/miso ＋ － 42 #wejs
15. 例：カウンタ type alias Model = Int type Msg = NoOp | Increase | Decrease update : Msg -> Model -> ( Model, Cmd Msg ) update msg count = case msg of NoOp -> ( count, Cmd.none ) Increase -> ( count + 1, Cmd.none ) Decrease -> ( count - 1, Cmd.none ) Elm type Model = Int data Action = NoOp | Increase | Decrease updateModel :: Action -> Model -> Effect Action Model updateModel act count = case act of NoOp -> noEff count Increase -> noEff (count + 1) Decrease -> noEff (count - 1) Miso #wejs
16. 例：カウンタ view : Model -> Html Msg view count = div [] [ [ button [ onClick Decrease ] [ text "-" ] ] , [ text (toString count) ] , [ button [ onClick Increase ] [ text "+" ] ] ] Elm viewModel :: Model -> View Action viewModel count = div_ [] [ [ button_ [ onClick Decrease ] [ text "-" ] ] , [ text (ms (show count)) ] , [ button_ [ onClick Increase ] [ text "+" ] ] ] Miso #wejs
17. まとめ • Elm はフロントエンド特化言語 ◦ 本来の目的から外れた用途は苦手 • サーバサイドは Haskell で書くと便利 ◦ コード生成ツールや困った時の相談先など • GHCJS + Miso でフル Haskell 化 ◦ フロントエンドが Elm 感覚かつ Haskell で書ける ◦ Isomorphic JS で SPA の弱点を解消 #wejs
18. Enjoy Elm & Haskell! Presented by チェシャ猫 (@y_taka_23) #wejs