「Phoenix LiveView 勉強会: SPA 開発の新潮流」に参加してきた
Phoenix LiveViewの勉強会に参加してきました。
Phoenix LiveViewはElixirConf2018で発表され、2019年3月にリリースされたPhoenixフレームワークのライブラリです。リアルタイムなSSR（Server Side Rendering）を行うための機能を持っており、一般的にReactやVue.jsなどのJSフレームワークで取り扱っていた仮装DOMに関する差分再構築の処理をElixirで行うことができます。 技術的にはWebSocketを利用しており、RubyのAction Cableのような形で処理を行っているものと見て取れます。
ここで重要なのは、差分再構築をサーバーサイドで行っているということです。通常、JSフレームワークではイベントごとに仮装DOMの差分を計算し、必要な箇所だけ再構築する処理をクライアント側で行いますが、LiveViewではサーバーサイドで行うため、セキュリティ的な意味でデータ管理がしやすいというメリットがある一方で、ネットワークに常時接続する必要がある・サーバーに負荷がかかるというデメリットもあります。デメリットについては、「一般的にクライアント側で処理するのが厳しいような激しいレンダリング処理」が生じるシーンではメリットになりそうだな、という印象です（処理の遅さをサーバーのスケールアップで解決できる）。また、予め頻繁に発生する再構築処理をキャッシュするような多少複雑な処理も実装しやすくなるのではないかと感じています。
勉強会では、複雑な仕様を持つSPAをLiveViewで開発する実例として、株式会社コアジェニック（旧商号：株式会社オイアクス）の黒田さんが開発されているWebサービス「Teamgenik（チームジェニック）」をデモアプリとして見せていただきました。
Rails + Vue.jsとPhoenix + LiveViewの違いを図で示されており、普段実務でSPAを構築したことのない私でも容易に理解できました。
ホワイトボードは、Rails＋Vue.jsと、Phoenix LiveViewのアーキテクチャの比較😌 #daimonex
— piacere @fukuoka.ex(love Elixir&Gravity extremely) (@piacere_ex) August 7, 2019
Vue.jsやReactが、仮想DOMをフロントサイドに持つ一方、LiveViewは仮想DOMをサーバサイドに持つ点が特徴🤔
性能的なデメリットはあるけど、フロントサイドとサーバサイドが同じ言語のメリットは大きい😝 pic.twitter.com/SwwigTMAmu
SPAの場合、サーバーサイドをBFF（Backend for Frontend）としてクライアントと分ける形が主流となっていますが、Phoenix LiveViewを利用することで、モノリシックなSPAを構築することが可能となります。
黒田さんのお話によると、現在はバージョン1系ということでところどころバグがあり、一部イベント（マウスオーバーやドラッグアンドドロップなど）を検知できない（JSで別途記述する必要がある）ため、プロダクションとして利用するには多少のリスクがあるようです。しかし、基本的にElixirで一貫してSPAを作り上げることができるため、開発速度の向上やサーバーサイドエンジニアとフロントエンドエンジニアのコミュニケーションコストを下げることができるのは非常に魅力的だと思います。
今までのSPAはサーバーサイドとクライアントサイドを分けたSPAやJavaScriptでのモノリシックなSPAという選択肢が主流でしたが、WebSocketを利用したモノリシックなSPAという新たな選択肢に期待が膨らむ勉強会となりました。
ありがとうございました。
