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/

shozo koga

June 01, 2019
Tweet

More Decks by shozo koga

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. Phoenix LiveView?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide


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

    View Slide

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

    View Slide

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

    View Slide

  17. こんなものを作った

    View Slide

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

    View Slide

  19. いいね, 削除機能

    View Slide

  20. ハッシュタグも実現

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. Thank you!!

    View Slide