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
170
Phoenix1.6で標準搭載されたLiveViewに入門してみよう
mokichi
October 26, 2021
Tweet
Share
More Decks by mokichi
See All by mokichi
Elixir以外の言語もよく使うエンジニアが考える、Phoenix LiveViewの使いどころ
mokichi
1
170
Rubyistから見たElixir
mokichi
1
350
動的画像変換サービス「imagepix」のご紹介
mokichi
1
230
Phoenix LiveViewをプロダクション利用してみた所感
mokichi
3
830
Ractorが出たからRubyの並列処理をおさらいする
mokichi
0
620
WebエンジニアのためのKubernetesサクッと入門
mokichi
1
92
未来予知できない凡人の生存戦略
mokichi
0
44
Other Decks in Programming
See All in Programming
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
670
How to debug Xdebug... or any other weird bug in PHP
dunglas
2
1.5k
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
7
1.9k
Debugging: A Few Things You Should Know
jmatsu
1
130
Folding Cheat Sheet #8
philipschwarz
PRO
0
140
GPU Hash Table | レイトレ合宿10
yknishidate
0
330
ActiveRecordの力でDBのメタデータを迅速に解析する
lnit
5
2k
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
220
CSC509 Lecture 06
javiergs
PRO
0
130
sqlcを利用してsqlに型付けを
kamiyam
0
250
モジュラモノリス、その前に / Modular monolith, before that
euglena1215
8
750
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
230
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
43
13k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Typedesign – Prime Four
hannesfritz
39
2.4k
YesSQL, Process and Tooling at Scale
rocio
167
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
Testing 201, or: Great Expectations
jmmastey
38
7k
Rails Girls Zürich Keynote
gr2m
93
13k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Building Your Own Lightsaber
phodgson
102
6k
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 はいいぞ