Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Phoenix1.6で標準搭載されたLiveViewに入門してみよう
Search
mokichi
October 26, 2021
Programming
0
230
Phoenix1.6で標準搭載されたLiveViewに入門してみよう
mokichi
October 26, 2021
Tweet
Share
More Decks by mokichi
See All by mokichi
Elixir以外の言語もよく使うエンジニアが考える、Phoenix LiveViewの使いどころ
mokichi
1
370
Rubyistから見たElixir
mokichi
1
430
動的画像変換サービス「imagepix」のご紹介
mokichi
1
270
Phoenix LiveViewをプロダクション利用してみた所感
mokichi
3
940
Ractorが出たからRubyの並列処理をおさらいする
mokichi
0
750
WebエンジニアのためのKubernetesサクッと入門
mokichi
1
150
未来予知できない凡人の生存戦略
mokichi
0
76
Other Decks in Programming
See All in Programming
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
300
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
210
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
15
4.6k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.6k
20250708_JAWS_opscdk
takuyay0ne
2
130
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Visualization
eitanlees
146
16k
How to Ace a Technical Interview
jacobian
278
23k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Agile that works and the tools we love
rasmusluckow
329
21k
Being A Developer After 40
akosma
90
590k
Transcript
Phoenix1.6で標準搭載された LiveViewに入門してみよう 2021/10/26 @fukuoka.ex#47 株式会社スマートアルゴリズム 齋藤 和也
自己紹介 名前:齋藤 和也 HN:mokichi 年齢:33歳 居住:東京都 出身:福岡県 🍜 Twitter:@mokichi_s12m 株式会社スマートアルゴリズム 代表取締役 複数社で技術顧問を務める
クラウドインフラを含むサーバサイド開発やDevOps が得意 ここ数年は Elixir/Phoenix にお熱 🔥
LiveView はいいぞ
LiveViewとは • (ほぼ)JSを書かずにElixirだけでSPAを開発できる • 宣言的な記述ができたり、機能やUIをコンポーネントに分割できたりと、現 在主流になっているSPA開発の開発体験とかなり近い • 加えて、データの更新を各クライアントにリアルタイムに反映するといっ た、一般的に面倒なことがとても簡単にできる •
「Twitterクローンを15分で作る」という動画が話題に https://www.youtube.com/watch?v=MZvmYaFkNJI
Reactとかじゃダメなの? 🤔
現在主流になっているSPA開発の問題点 • フロントエンドとバックエンドの両方を高いクオリティで対応できるエンジニアは稀 で、分業化が進みがち • ある機能を実装する際に、バックエンド側を対応しないとフロントエンド側が進めら れず、ボトルネックが発生する(逆のパターンもあり) 教えてくれ、PM。俺たちはあと何本APIを作ればいい? • OGPの設定が必要な場合のSSRや、JSのバンドルサイズが大きくなることによる
Core Web Vitalsの各指標の悪化に頭を悩ませがち
LiveViewの特徴 • (ほぼ)JSを書かずにElixirだけでSPAを開発できる ◦ フロントエンドとバックエンドがデータをやりとりするためのAPIを 何本も作らなくていい(つまりAPIドキュメントも作らなくていい) • すべてのクライアントとWebSocketでつながっている ◦ 状態をサーバに保持し、状態の更新をクライアントに反映させている
◦ ブラウザのCookieやLocalStorageのことを気にしなくていい ◦ サーバの負荷は当然増えるが、昨今はリソース調達が容易なため さほど大きな問題ではない
ちょっと技術的にトガりすぎでは 😅 と思った方、そんなことはありません!
他の言語にも同じような仕組みのものがある • Ruby ◦ Ruby on Rails ── Hotwire ※Rails以外でも使える
• PHP ◦ Laravel ── LiveWire • Python ◦ Django ── Reactor など、非常に注目されている技術
とにもかくにも触ってみよう
マイクロポスト投稿アプリを作ってみる 匿名で短い文章を投稿できるアプリを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
プロジェクト作成 → 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
PubSubを使い、更新をリアルタイムに反映 1. Phoenix.PubSub.subscribe/2 でトピックを購読 トピックに配信されたメッセージを受け取れるようにする 2. Phoenix.PubSub.broadcast/3 でブロードキャスト データの更新を同じトピックを購読している全プロセスに送信 3.
handle_info/2 で送信されたメッセージを処理
2つのクライアントでデータを更新しあうデモ https://youtu.be/5yK1MrEjaME
LiveView はいいぞ