Phoenix1.6で標準搭載されたLiveViewに入門してみよう

Transcript

1. Phoenix1.6で標準搭載された LiveViewに入門してみよう 2021/10/26 @fukuoka.ex#47 株式会社スマートアルゴリズム　齋藤 和也
2. 自己紹介 名前：齋藤 和也　HN：mokichi 年齢：33歳 居住：東京都　出身：福岡県 🍜 Twitter：@mokichi_s12m 株式会社スマートアルゴリズム 代表取締役 複数社で技術顧問を務める クラウドインフラを含むサーバサイド開発やDevOps が得意 ここ数年は Elixir/Phoenix にお熱 🔥
3. LiveView はいいぞ
4. LiveViewとは • （ほぼ）JSを書かずにElixirだけでSPAを開発できる • 宣言的な記述ができたり、機能やUIをコンポーネントに分割できたりと、現 在主流になっているSPA開発の開発体験とかなり近い • 加えて、データの更新を各クライアントにリアルタイムに反映するといっ た、一般的に面倒なことがとても簡単にできる • 「Twitterクローンを15分で作る」という動画が話題に https://www.youtube.com/watch?v=MZvmYaFkNJI
5. Reactとかじゃダメなの？ 🤔
6. 現在主流になっているSPA開発の問題点 • フロントエンドとバックエンドの両方を高いクオリティで対応できるエンジニアは稀 で、分業化が進みがち • ある機能を実装する際に、バックエンド側を対応しないとフロントエンド側が進めら れず、ボトルネックが発生する（逆のパターンもあり） 教えてくれ、PM。俺たちはあと何本APIを作ればいい？ • OGPの設定が必要な場合のSSRや、JSのバンドルサイズが大きくなることによる Core Web Vitalsの各指標の悪化に頭を悩ませがち
7. LiveViewの特徴 • （ほぼ）JSを書かずにElixirだけでSPAを開発できる ◦ フロントエンドとバックエンドがデータをやりとりするためのAPIを 何本も作らなくていい（つまりAPIドキュメントも作らなくていい） • すべてのクライアントとWebSocketでつながっている ◦ 状態をサーバに保持し、状態の更新をクライアントに反映させている ◦ ブラウザのCookieやLocalStorageのことを気にしなくていい ◦ サーバの負荷は当然増えるが、昨今はリソース調達が容易なため さほど大きな問題ではない
8. ちょっと技術的にトガりすぎでは 😅 と思った方、そんなことはありません！
9. 他の言語にも同じような仕組みのものがある • Ruby ◦ Ruby on Rails ── Hotwire ※Rails以外でも使える • PHP ◦ Laravel ── LiveWire • Python ◦ Django ── Reactor など、非常に注目されている技術
10. 󰳕 とにもかくにも触ってみよう 󰠁
11. マイクロポスト投稿アプリを作ってみる 匿名で短い文章を投稿できるアプリをLiveViewで • Elixir ~> 1.12.0 ◦ Phoenix ~> 1.6.0 ◦ LiveView ~> 0.16.0 • Erlang ~> 24.0 • PostgreSQL >= 9.0 https://github.com/mokichi/microposts-sample-phoenix-liveview
12. プロジェクト作成 → Scaffold → 起動 $ mix archive.install hex phx_new $ mix phx.new sample cd $_ でプロジェクトのディレクトリに移動 $ mix phx.gen.live Microposts Micropost microposts content lib/sample_web/router.ex にルーティングの設定を追加 mix ecto.migrate でDBマイグレーション $ mix phx.server http://localhost:4000/microposts
13. PubSubを使い、更新をリアルタイムに反映 1. Phoenix.PubSub.subscribe/2 でトピックを購読 トピックに配信されたメッセージを受け取れるようにする 2. Phoenix.PubSub.broadcast/3 でブロードキャスト データの更新を同じトピックを購読している全プロセスに送信 3. handle_info/2 で送信されたメッセージを処理
14. 2つのクライアントでデータを更新しあうデモ https://youtu.be/5yK1MrEjaME
15. LiveView はいいぞ