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
530
20230511 Storybookを軸としたコンポーネント管理と自動テスト戦略
koga1020
0
660
20230311 最近のElixir動向まとめ
koga1020
0
630
【Elixir】Dataloaderを導入してGraphQLのN+1問題を解消する
koga1020
1
430
20221108 WEB+DB PRESS Vol.131「はじめてのElixir」特集記念イベント
koga1020
1
200
fukuoka.exの思い出話とこれからを考える
koga1020
1
140
Ectoの全体感をまとめてみる
koga1020
0
470
Phoenix.PubSubの紹介と活用を考える
koga1020
0
430
EDI#1 発足LT会
koga1020
0
50
Other Decks in Programming
See All in Programming
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
180
WebDriver BiDiとは何なのか
yotahada3
1
150
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
12
4.4k
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
240
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
510
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Angular Meetup Berlin
danielsogl
0
100
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
130
Formの複雑さに立ち向かう
bmthd
1
890
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
800
SpringBoot3.4の構造化ログ #kanjava
irof
3
1k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Rails Girls Zürich Keynote
gr2m
94
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Being A Developer After 40
akosma
89
590k
Optimizing for Happiness
mojombo
376
70k
Embracing the Ebb and Flow
colly
84
4.6k
GraphQLとの向き合い方2022年版
quramy
44
13k
Thoughts on Productivity
jonyablonski
69
4.5k
For a Future-Friendly Web
brad_frost
176
9.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
420
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
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!!