Phoenix LiveViewで結婚式用Twitterを作った話

自己紹介古賀祥造(こがしょうぞう) 株式会社ベガコーポレーション fukuoka.ex ビルダー Elixir/PhoenixでAPIを日々書いてます : @koga1020_

fukuoka.exから来ました！もくもく会は毎月開催、リモート参加OK! ↓↓Let’s join us!!↓↓ https://fukuokaex.connpass.com

Phoenix LiveView？

なにそれ？おいしいの？✋

Phoenix LiveViewとは Phoenixアプリに追加して使うライブラリ WebSocketによる双方向通信を利用して、clientの状態をPhoenix側で管理できる画面の動的な書き換えをサーバーサイドレンダリングによって行うことができる

こんな感じでユーザーのクリックに応じて数値を変えたり、

リアルタイムバリデーション / 入力欄の追加など。

実はこのスライドもLiveView製

もうすこし流れを説明

ユーザーのClickイベントをサーバーで受け取ったり、

サーバーから時刻情報を送りつけたり出来る！

このやりとりがWebsocketによって双方向で繋がるイメージ

こんなのに向いているリッチなUI 通知, progress bar, dashboard, widgets, etc. 動的なフォームリアルタイムバリデーション,
サジェスト, multi step, etc. 他ユーザーへの通知(PubSub) ref: https://elixirforum.com/t/phoenix‑liveview‑is‑now‑live/20889/13

これらのロジックを APIを作らずに、 JavaScript不要でElixirコードでロジックを記述して、サッと実現できるのが良き

こんなものを作った

友人の結婚式用 Twitter風Webアプリ

いいね, 削除機能

ハッシュタグも実現

技術要素 CSSフレームワーク: bulma ユーザーのボタンclickでclassの付け外しの出し分けなど画像アップロード先: S3 を利用デプロイ: gigalixir
LiveViewもしっかりデプロイ可能

どうだった？実工数4日程度でサクサクと作れた Elixirワンソースでサクサクと書けてgood Vue.jsの経験があり、それとかなり近いフィーリングで書けてgood 投稿→他ユーザー画面へ即反映がサクッと作れたこれはPhoenixの旨味

気づき➀ ロジックをすべてElixirに寄せれるのはとても良い例. 投稿本文の文字列で文字列をハッシュタグとしてlinkに変換したい →ElixirのViewモジュールに関数生やして書ける Validationのロジックもフロントに持たなくてよくなるバリデーションの仕様変更に強くなる

気づき➁ ルーティングが異なる画面(例. 一覧画面と詳細画面)をLiveViewで切り替えるのは微妙そう？あくまで1Viewファイルがリッチになるイメージで使うと良さそう一覧ページから詳細ページへの遷移をLiveViewで書く→ 一覧ページ内での検索のサジェスト、登録画面内でのリアルタイムバリデーション→

気づき➂ ユーザーの入力に対して遅延(=debounce)がないとつらい属性が今後増える(はず) joseがissue立てている！今後に期待！

まとめ要件次第ではLiveViewはかなり実用的気になった方はExampleリポジトリがあるので、そこを触ってみましょう https://github.com/chrismccord/phoenix_live_view_example 面白いユースケースがあれば、ぜひ共有しましょう

Thank you!!

Phoenix LiveViewで結婚式用Twitterを作った話

Phoenix LiveViewで結婚式用Twitterを作った話

shozo koga

More Decks by shozo koga

Other Decks in Programming

Featured

Transcript