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

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

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

2019/6/1に開催されたErlang & Elixir Fest 2019で行ったLT資料です

https://elixir-fest.jp/

302e60b4d42787b4a39de4a3a80cfc9d?s=128

shozo koga

June 01, 2019
Tweet

Transcript

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

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

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

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

  5. Phoenix LiveView?

  6. なにそれ?おいしいの?✋

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

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

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

  10. 実はこのスライドもLiveView製

  11. もうすこし流れを説明

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

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

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

  15. こんなのに向いている リッチなUI 通知, progress bar, dashboard, widgets, etc. 動的なフォーム リアルタイムバリデーション,

    サジェスト, multi step, etc. 他ユーザーへの通知(PubSub) ref: https://elixirforum.com/t/phoenix‑liveview‑is‑now‑live/20889/13
  16. これらのロジックを APIを作らずに、 JavaScript不要でElixirコードでロジックを記述して、 サッと実現できるのが良き

  17. こんなものを作った

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

  19. いいね, 削除機能

  20. ハッシュタグも実現

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

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

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

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

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

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

  27. Thank you!!