Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

y_taka_23

May 21, 2018
Tweet

More Decks by y_taka_23

Other Decks in Technology

Transcript

  1. 超・目的特化型言語 Elm • Web フロントエンドに特化 ◦ 逆に言えばそれ以外には全く向かない • 必要最小限の言語仕様 ◦

    Haskell 風だが、かなり機能が絞られている • フレームワークと不可分 ◦ いわゆる The Elm Architecture (TEA) ◦ 面倒な部分はすべて隠蔽されている #wejs
  2. サーバサイド用の言語は? • REST API が書けるなら何でも OK ◦ サーバサイド Elm (elm-node)

    も一応ある • 迷うなら Haskell は悪くない選択肢 ◦ Elm とクラスタが近いし、困ったら相談可 • Haskell から Elm のコードが生成可 ◦ elm-export : JSON エンコーダ・デコーダを生成 ◦ servant-elm : REST クライアントを生成 #wejs
  3. Isomorphic JavaScript • 初回アクセスはサーバで HTML 生成 ◦ ロード時間の短縮 ◦ SEO

    対策(最近は大丈夫だと思うけど) • それ以後はクライアントで差分更新 • 両者で共通のロジックを使用 ◦ フロント側とサーバ側を同じ言語で書く ◦ しかし Elm はサーバ用に設計されていない #wejs
  4. GHCJS + Miso • Glasgow Haskell Compiler (GHC) ◦ Haskell

    のデファクトスタンダード • GHCJS ◦ GHC のコンパイル先を JavaScript に改造 ◦ 通常の Haskell ライブラリを再利用可能 • Miso フレームワーク ◦ GHCJS で The Elm Architecture を実装 #wejs
  5. 例:カウンタ 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
  6. 例:カウンタ 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
  7. まとめ • Elm はフロントエンド特化言語 ◦ 本来の目的から外れた用途は苦手 • サーバサイドは Haskell で書くと便利

    ◦ コード生成ツールや困った時の相談先など • GHCJS + Miso でフル Haskell 化 ◦ フロントエンドが Elm 感覚かつ Haskell で書ける ◦ Isomorphic JS で SPA の弱点を解消 #wejs