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
240
Phoenix1.6で標準搭載されたLiveViewに入門してみよう
mokichi
October 26, 2021
Tweet
Share
More Decks by mokichi
See All by mokichi
Elixir以外の言語もよく使うエンジニアが考える、Phoenix LiveViewの使いどころ
mokichi
1
420
Rubyistから見たElixir
mokichi
1
450
動的画像変換サービス「imagepix」のご紹介
mokichi
1
270
Phoenix LiveViewをプロダクション利用してみた所感
mokichi
3
960
Ractorが出たからRubyの並列処理をおさらいする
mokichi
0
770
WebエンジニアのためのKubernetesサクッと入門
mokichi
1
160
未来予知できない凡人の生存戦略
mokichi
0
84
Other Decks in Programming
See All in Programming
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
200
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
What's new in Spring Modulith?
olivergierke
1
160
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
410
Introduce Hono CLI
yusukebe
6
2.9k
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
750
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
260
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.9k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
870
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
510
品質ワークショップをやってみた
nealle
0
580
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
270
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
BBQ
matthewcrist
89
9.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Fireside Chat
paigeccino
40
3.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Optimizing for Happiness
mojombo
379
70k
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 はいいぞ