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

Transcript

1. Phoenix1.6で標準搭載された
   LiveViewに入門してみよう
   2021/10/26 @fukuoka.ex#47
   株式会社スマートアルゴリズム　齋藤 和也
   

   View Slide

2. 自己紹介
   名前：齋藤 和也　HN：mokichi
   年齢：33歳
   居住：東京都　出身：福岡県 🍜
   Twitter：@mokichi_s12m
   株式会社スマートアルゴリズム 代表取締役
   複数社で技術顧問を務める
   クラウドインフラを含むサーバサイド開発やDevOps
   が得意
   ここ数年は Elixir/Phoenix にお熱 🔥
   

   View Slide

3. LiveView はいいぞ
   

   View Slide

4. LiveViewとは
   ● （ほぼ）JSを書かずにElixirだけでSPAを開発できる
   ● 宣言的な記述ができたり、機能やUIをコンポーネントに分割できたりと、現
   在主流になっているSPA開発の開発体験とかなり近い
   ● 加えて、データの更新を各クライアントにリアルタイムに反映するといっ
   た、一般的に面倒なことがとても簡単にできる
   ● 「Twitterクローンを15分で作る」という動画が話題に
   https://www.youtube.com/watch?v=MZvmYaFkNJI
   

   View Slide

5. Reactとかじゃダメなの？ 🤔
   

   View Slide

6. 現在主流になっているSPA開発の問題点
   ● フロントエンドとバックエンドの両方を高いクオリティで対応できるエンジニアは稀
   で、分業化が進みがち
   ● ある機能を実装する際に、バックエンド側を対応しないとフロントエンド側が進めら
   れず、ボトルネックが発生する（逆のパターンもあり）
   教えてくれ、PM。俺たちはあと何本APIを作ればいい？
   ● OGPの設定が必要な場合のSSRや、JSのバンドルサイズが大きくなることによる
   Core Web Vitalsの各指標の悪化に頭を悩ませがち
   

   View Slide

7. LiveViewの特徴
   ● （ほぼ）JSを書かずにElixirだけでSPAを開発できる
   ○ フロントエンドとバックエンドがデータをやりとりするためのAPIを
   何本も作らなくていい（つまりAPIドキュメントも作らなくていい）
   ● すべてのクライアントとWebSocketでつながっている
   ○ 状態をサーバに保持し、状態の更新をクライアントに反映させている
   ○ ブラウザのCookieやLocalStorageのことを気にしなくていい
   ○ サーバの負荷は当然増えるが、昨今はリソース調達が容易なため
   さほど大きな問題ではない
   

   View Slide

8. ちょっと技術的にトガりすぎでは 😅
   と思った方、そんなことはありません！
   

   View Slide

9. 他の言語にも同じような仕組みのものがある
   ● Ruby
   ○ Ruby on Rails ── Hotwire ※Rails以外でも使える
   ● PHP
   ○ Laravel ── LiveWire
   ● Python
   ○ Django ── Reactor
   など、非常に注目されている技術
   

   View Slide

10. 󰳕 とにもかくにも触ってみよう 󰠁
    

    View Slide

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
    

    View Slide

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
    

    View Slide

13. PubSubを使い、更新をリアルタイムに反映
    1. Phoenix.PubSub.subscribe/2 でトピックを購読
    トピックに配信されたメッセージを受け取れるようにする
    2. Phoenix.PubSub.broadcast/3 でブロードキャスト
    データの更新を同じトピックを購読している全プロセスに送信
    3. handle_info/2 で送信されたメッセージを処理
    

    View Slide

14. 2つのクライアントでデータを更新しあうデモ
    https://youtu.be/5yK1MrEjaME
    

    View Slide

15. LiveView はいいぞ
    

    View Slide