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

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

332f89cc697355902a817506b6995f2b?s=128

y_taka_23

May 21, 2018
Tweet

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