（この記事は、fukuoka.ex Elixir／Phoenix Advent Calendar Advent Calendar 2018 の14日目です）
昨日は@kikuyutaさんの階段の上でも下でも電灯を点けたり消したりするでした。
LiveViewとはElixirConf2018でのKeynote中に発表された機能
Phoenixに将来搭載される機能として、ElixirConf2018で発表されました。
大まかにいうと、
「Elixirでフロントエンドのバリデーションとかアニメーションと書けちゃう。しかもリアルタイムに。」
っていう機能です。
ElixirConf2018が開かれたは2018年9月ですが
よく理解しないままになっていたのでこの機会に調査してみました。
ElixirConf2018 キーノート
ElixirConf 2018 - Keynote - Chris McCord
LiveViewをわかりやすく説明した記事。今回の記事のソースはほぼこれ。
Phoenix’s LiveView: Client-Side Elixir At Last?
今のウェブアプリの手法
昨今は新しくウェブアプリケーションを開発し始めるのであれば、
SPAはデファクトスタンダードのようになってると思います。
その背景には、ページ全体の再描画を伴わないページ遷移やページ内の部分的な再描画により、
リッチなUXをユーザーに提供できることがあります。
しかし一方で、SPAアプリケーションを組むとなるとフロントエンドの複雑度はあがり、
サポートするフレームワークの利用もほぼ必須となります。
バックエンドとフロントエンドどちらも1人のエンジニアが横断してみるという場合には、バックエンドの実装に加え、SPAのフロントエンドの実装も行うとなると、それは大変です。
そこで、第三の選択肢として、Phoenix.LiveViewを選ぶと良いとのことです。
立ち位置的には、SSRとSPAの間に位置すると言われています。
フロントの処理をElixirで書ける
Phoenixで開発をしていて、言語を変えずにそのままフロントエンドのイベントに紐づく処理を書くことが出来ます。
たとえば、下記のコードはボタンを押したらインクリメントされたりデクリメントされます。
phx-{イベント名} でボタンクリックでエリクサーで書いた関数が動いちゃってます。
説明とDemo
これいいな～って思ったのが、バリデーションです。
フロントエンドでも、バックエンドでもバリデーションの役割は違えど、同じようなロジックのバリデーションも、それぞれ組むことがあると思います。
LiveViewではエリクサーで書いたバリデーションがそのまま使えるので、別の言語で2度書く必要がありません。
リアルタイム更新
フロントエンドの状態更新にWebSocketを使用しているので、
リアルタイムで更新されます。
別タブで開いてるページ内の情報も更新されます。
デモでは、2つタブを開いていて片方から、もう片方が見ている情報を削除しちゃってました。
情報を見ている方では消したタイミングで、ちゃんとブラウザリロード無しに「情報はありません」
状態になっていました。
Demo
エリクサーならではの利点、パフォーマンス
パフォーマンスに関することも話されていました。
ここでは、大量のdivタグを操作するアニメーションがDemoされていました。
divタグのパラメーターの状態はバックエンドからプッシュするというものです。
このような場合でも、60FPSでヌルヌル動作するとのことです。
選択する場合・選択しない場合
SPAと比較してメリット・デメリットがあるから案件の特性に合わせて選ぶことが大切とのこと。
メリット
- 言語を単一でできることから、生産性向上が見込める
- だから早くアプリをリリースできる
- SPAほど大きいJSファイルではないので、ペイロードが小さい
- SSRだからSEOに強い
デメリット
- PWAにしてしかも、オフライン時でも使えるようにという用途には対応出来ない
- ネイティブ機能（具体的にどの機能かはわかってない）を使うときや、複雑なUIの場合はSPAが良い
まだ使えない。追加ライブラリとしての開発されているそう。
まだ公開はされておらず、残念ながら試すことは出来ません。
Phoenixに同梱されて配布されるのではなく、Phoenixに追加するライブラリのような形で公開されるそうです。
しかし、触れる日が待ち遠しい機能です！
明日のfukuoka.ex Elixir／Phoenix Advent Calendar 2018 15日目の記事は， @zacky1972 さんの「ZEAM開発ログ2018年総集編その2: Elixir 研究構想についてふりかえる(後編)」です。こちらもお楽しみに！