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
390
Rubyistから見たElixir
mokichi
1
450
動的画像変換サービス「imagepix」のご紹介
mokichi
1
270
Phoenix LiveViewをプロダクション利用してみた所感
mokichi
3
950
Ractorが出たからRubyの並列処理をおさらいする
mokichi
0
760
WebエンジニアのためのKubernetesサクッと入門
mokichi
1
160
未来予知できない凡人の生存戦略
mokichi
0
80
Other Decks in Programming
See All in Programming
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
340
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
990
Improving my own Ruby thereafter
sisshiki1969
1
130
A Gopher's Guide to Vibe Coding
danicat
0
190
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
220
AHC051解法紹介
eijirou
0
640
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
25
9.4k
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
780
Langfuseと歩む生成AI活用推進
licux
3
320
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
130
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
17
9.4k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Six Lessons from altMBA
skipperchong
28
4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Speed Design
sergeychernyshev
32
1.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building an army of robots
kneath
306
46k
Designing for humans not robots
tammielis
253
25k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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 はいいぞ