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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Phoenix LiveView?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size 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 full-size slide

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

    View full-size slide

  17. こんなものを作った

    View full-size slide

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

    View full-size slide

  19. いいね, 削除機能

    View full-size slide

  20. ハッシュタグも実現

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide