アプリ作成と運用から学ぶ Firebase と Vue.js

勉強会アプリを Firebase と Vue.js を使って作成しました。
作成し、運用するうえで工夫したことや直面した課題を共有します。

Transcript

1. アプリ作成と運用から学ぶ Firebase と Vue.js
2. What is it ? ▰ アプリを作成 & 運用 ▰ Firebase と Vue.js を使用 ▰ 実際どうだったか ▰ 今、困ってること 2
3. 自己紹介 加納 悠史　カノウユウジ @YKanoh65 3 株式会社 ラクス 業務ではPHPer 趣味はダイビング
5. 社内勉強会 やってますか？
6. 弊社の勉強会 • ビアバッシュ ◦ 月一開催 ◦ 新人からベテランまで参加 6
7. 弊社の勉強会 • ビアバッシュ ◦ 月一開催 ◦ 新人からベテランまで参加 7 発表の評価が聞きたい 改善点が知りたい もっと楽しみたい
8. ビアバッシュ専用 Webアプリ
9. ビアバッシュ専用 Webアプリ SPA の Web アプリ 9 ❏ Vuetify ❏ Vuex ❏ Vuexfire Cloud Firestore Authentication Cloud Storage
10. Spark プランを使用 • 無料プラン • Firestore の制限 ◦ 読取り回数：5万回/日 10
11. 11 できること • 発表予定の確認 • 発表へのコメント • スタンプでのリアクション
12. 実装での工夫 スタンプ連打 対策 • FireStoreの書込み速度 　→ 1ドキュメントに 1回/秒 • 複数人による同時書込みに弱い 12
13. 分散カウンタ 導入 • 複数ドキュメントを用意 • カウント数はランダムに保存 • 総カウント数は合計値 ⇒ 書込み速度向上！ 13 4回 6回 5回 15回
14. が
15. スタンプ連打 対策 弱点 分散カウンタ 導入 ⇒ 1回の更新で3回の読取りが発生 15 4回 6回 5回 3つ 読取り
16. ～再掲～ Spark プランを使用 • 無料プラン • Firestore の制限 ◦ 読取り回数：5万回/日 16
17. 17 Firestore 読み取り数（初運用時）
18. 18 開始前 64回 開始30分 3.7万回 開始150分 5.1万回！ Firestore 読み取り数（初運用時）
19. 19 開始30分 3.7万回 開始150分 5.1万回！ Firestore 読み取り数（初運用時）
20. FireStore 読取り制限 Firebase料金プラン • 無料プラン ◦ 読取り回数：5万回/日 　⇒ すぐ突破してしまう 20
21. 読み取り数削減案 • 分散カウンタ廃止 • キャッシュを活用 • 取得ドキュメントを絞る ノウハウがあれば教えてほしいです ... つか有料プランを使え 21
22. store.js の扱い Vuex と VuexFire • store.js でデータを管理 • 変数とコレクションを紐づけるイメージ • Firebase とのやり取りは store.jsに集約 22 VuexFire Vuex
23. 問題点 store.js の肥大化 コレクション追加 ＝ 関数追加！ • コンフリクト祭り • 可読性が低下... 23
24. 何が問題なのか？ ❏ 分割を考えるべきなのか？ ❏ Vuexで大量のデータ管理が問題？ ❏ クライアントで大量のデータを保持させる？ 24
25. 25 まとめ • 同時書込み数向上 → 分散カウンタ ◦ ただし読取り数などに注意が必要 ◦ 多少なら単一ドキュメントでも可？ • Vue.js と FireStore ◦ Vuex と Firebase の連動は検討が必要