2019/6/1に開催されたErlang & Elixir Fest 2019で行ったLT資料です
https://elixir-fest.jp/
Phoenix LiveViewで結婚式用Twitterを作った話
View Slide
自己紹介古賀 祥造(こが しょうぞう)株式会社ベガコーポレーションfukuoka.ex ビルダーElixir/PhoenixでAPIを日々書いてます: @koga1020_
fukuoka.exから来ました!もくもく会は毎月開催、リモート参加OK!↓↓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を利用デプロイ: gigalixirLiveViewもしっかりデプロイ可能
どうだった?実工数4日程度でサクサクと作れたElixirワンソースでサクサクと書けてgoodVue.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!!