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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Phoenix LiveView？

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

実はこのスライドもLiveView製

Slide 11

Slide 11 text

もうすこし流れを説明

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

こんなものを作った

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

いいね, 削除機能

Slide 20

Slide 20 text

ハッシュタグも実現

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Thank you!!