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
Phoenix LiveViewで結婚式用Twitterを作った話
Search
shozo koga
June 01, 2019
Programming
2
2.9k
Phoenix LiveViewで結婚式用Twitterを作った話
2019/6/1に開催されたErlang & Elixir Fest 2019で行ったLT資料です
https://elixir-fest.jp/
shozo koga
June 01, 2019
Tweet
Share
More Decks by shozo koga
See All by shozo koga
Looker StudioとSnowflakeでプロダクトチームのダッシュボードを作る取り組み
koga1020
0
460
20230511 Storybookを軸としたコンポーネント管理と自動テスト戦略
koga1020
0
600
20230311 最近のElixir動向まとめ
koga1020
0
590
【Elixir】Dataloaderを導入してGraphQLのN+1問題を解消する
koga1020
1
400
20221108 WEB+DB PRESS Vol.131「はじめてのElixir」特集記念イベント
koga1020
1
180
fukuoka.exの思い出話とこれからを考える
koga1020
1
120
Ectoの全体感をまとめてみる
koga1020
0
440
Phoenix.PubSubの紹介と活用を考える
koga1020
0
400
EDI#1 発足LT会
koga1020
0
46
Other Decks in Programming
See All in Programming
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
140
Ethereum_.pdf
nekomatu
0
460
みんなでプロポーザルを書いてみた
yuriko1211
0
280
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
1
300
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.7k
cmp.Or に感動した
otakakot
3
200
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
930
Macとオーディオ再生 2024/11/02
yusukeito
0
370
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
KATA
mclloyd
29
14k
Writing Fast Ruby
sferik
627
61k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Faster Mobile Websites
deanohume
305
30k
Documentation Writing (for coders)
carmenintech
65
4.4k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Rails Girls Zürich Keynote
gr2m
94
13k
Building Applications with DynamoDB
mza
90
6.1k
Transcript
Phoenix LiveViewで結婚式用Twitterを作った話
自己紹介 古賀 祥造(こが しょうぞう) 株式会社ベガコーポレーション fukuoka.ex ビルダー Elixir/PhoenixでAPIを日々書いてます : @koga1020_
fukuoka.exから来ました! もくもく会は毎月開催、リモート参加OK! ↓↓Let’s join us!!↓↓ https://fukuokaex.connpass.com
Phoenix LiveViewで結婚式用Twitterを作った話
Phoenix LiveView?
なにそれ?おいしいの?✋
Phoenix LiveViewとは Phoenixアプリに追加して使うライブラリ WebSocketによる双方向通信を利用して、clientの状態をPhoenix側で管理できる 画面の動的な書き換えをサーバーサイドレンダリングによって行うことができる
こんな感じでユーザーのクリックに応じて数値を変えたり、
リアルタイムバリデーション / 入力欄の追加など。
実はこのスライドもLiveView製
もうすこし流れを説明
ユーザーのClickイベントをサーバーで受け取ったり、
サーバーから時刻情報を送りつけたり出来る!
このやりとりがWebsocketによって双方向で繋がるイメージ
こんなのに向いている リッチなUI 通知, progress bar, dashboard, widgets, etc. 動的なフォーム リアルタイムバリデーション,
サジェスト, multi step, etc. 他ユーザーへの通知(PubSub) ref: https://elixirforum.com/t/phoenix‑liveview‑is‑now‑live/20889/13
これらのロジックを APIを作らずに、 JavaScript不要でElixirコードでロジックを記述して、 サッと実現できるのが良き
こんなものを作った
友人の結婚式用 Twitter風Webアプリ
いいね, 削除機能
ハッシュタグも実現
技術要素 CSSフレームワーク: bulma ユーザーのボタンclickでclassの付け外し の出し分けなど 画像アップロード先: S3 を利用 デプロイ: gigalixir
LiveViewもしっかりデプロイ可能
どうだった? 実工数4日程度でサクサクと作れた Elixirワンソースでサクサクと書けてgood Vue.jsの経験があり、それとかなり近いフィーリングで書けてgood 投稿→他ユーザー画面へ即反映 がサクッと作れた これはPhoenixの旨味
気づき➀ ロジックをすべてElixirに寄せれるのはとても良い 例. 投稿本文の文字列で 文字列 をハッシュタグとしてlinkに変換したい →ElixirのViewモジュールに関数生やして書ける Validationのロジックもフロントに持たなくてよくなる バリデーションの仕様変更に強くなる
気づき➁ ルーティングが異なる画面(例. 一覧画面と詳細画面)をLiveViewで切り替えるのは微妙そ う? あくまで1Viewファイルがリッチになるイメージで使うと良さそう 一覧ページから詳細ページへの遷移をLiveViewで書く→ 一覧ページ内での検索のサジェスト、登録画面内でのリアルタイムバリデーション→
気づき➂ ユーザーの入力に対して遅延(=debounce)がないとつらい 属性が今後増える(はず) joseがissue立てている! 今後に期待!
まとめ 要件次第ではLiveViewはかなり実用的 気になった方はExampleリポジトリがあるので、そこを触ってみましょう https://github.com/chrismccord/phoenix_live_view_example 面白いユースケースがあれば、ぜひ共有しましょう
Thank you!!