Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
アプリ作成と運用から学ぶ Firebase と Vue.js
Y-KANOH
August 21, 2019
Technology
2
260
アプリ作成と運用から学ぶ Firebase と Vue.js
勉強会アプリを Firebase と Vue.js を使って作成しました。
作成し、運用するうえで工夫したことや直面した課題を共有します。
Y-KANOH
August 21, 2019
Tweet
Share
More Decks by Y-KANOH
See All by Y-KANOH
どんとこい、PhpStorm 〜Why don't you do IDE's best!〜 / Don't KOI PhpStorm!! Why don't you do IDE's best!!
ykanoh
0
840
PHPでのリーダブルコード/Readable code in PHP
ykanoh
1
51
技術コミュニティ運営戦線〜継続して勉強会を運営するために〜/how to operate community continuously
ykanoh
0
790
めざせOSSコントリビュート/LetsContributeOSS
ykanoh
2
62
コミュニティ活動で差別化をめざすエンジニアの一手/Distinguish by community for engineers career
ykanoh
2
710
PHP標準関数との戦い/Fighting with PHP standard function
ykanoh
0
1.3k
PhpStorm中級者入門/PhpStorm intermediate level person
ykanoh
1
640
RFCの歩き方/How to read PHP RFC
ykanoh
2
1.3k
電撃:Laravelクイズ / DENGEKI:LaravelQuiz
ykanoh
1
1.4k
Other Decks in Technology
See All in Technology
ReverseETLでユーザーに価値を届ける基盤を実現した話
hakky
0
340
テクニカルライティングの検定を受けてみた話 / "My Story About Taking the Technical Writing Exam
line_developers
PRO
1
210
Micro frontends and micro services
kashif98
0
140
ふりかえりの技術 / retrospectives
soudai
3
170
AWS CLI でやってみる ~ AWS Hands-on for Beginners ECS ハンズオン ~
kentosuzuki
1
450
VS Code Meetup #21 - もう一度知りたい基礎編 - ファイル操作、コーディングの基本編
74th
0
190
聊聊 Cgo 的二三事
david74chou
0
330
MySQL v5.7 勉強会/study-mysql-ver-5-7
andpad
0
2k
eBPFで実現するコンテナランタイムセキュリティ / Container Runtime Security with eBPF
tobachi
PRO
5
1.7k
Step-by-Step MLOps and Microsoft Products
shisyu_gaku
1
550
OpenShiftのサポートを始めるぞ!高頻度で更新されるOSSを効果的にキャッチアップする仕組みを考えました!
loftkun
0
330
〇〇みたいな検索作ってと言われたときに考えること / thinking before developing search system like that one
ryook
5
2.7k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
296
110k
Pencils Down: Stop Designing & Start Developing
hursman
113
9.8k
Fireside Chat
paigeccino
13
1.4k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Building a Scalable Design System with Sketch
lauravandoore
448
30k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
21
1.4k
The Language of Interfaces
destraynor
148
21k
It's Worth the Effort
3n
172
26k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.7k
A Tale of Four Properties
chriscoyier
149
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Automating Front-end Workflow
addyosmani
1351
200k
Transcript
アプリ作成と運用から学ぶ Firebase と Vue.js
What is it ? ▰ アプリを作成 & 運用 ▰ Firebase
と Vue.js を使用 ▰ 実際どうだったか ▰ 今、困ってること 2
自己紹介 加納 悠史 カノウユウジ @YKanoh65 3 株式会社 ラクス 業務ではPHPer 趣味はダイビング
None
社内勉強会 やってますか?
弊社の勉強会 • ビアバッシュ ◦ 月一開催 ◦ 新人からベテランまで参加 6
弊社の勉強会 • ビアバッシュ ◦ 月一開催 ◦ 新人からベテランまで参加 7 発表の評価が聞きたい 改善点が知りたい
もっと楽しみたい
ビアバッシュ専用 Webアプリ
ビアバッシュ専用 Webアプリ SPA の Web アプリ 9 ❏ Vuetify ❏
Vuex ❏ Vuexfire Cloud Firestore Authentication Cloud Storage
Spark プランを使用 • 無料プラン • Firestore の制限 ◦ 読取り回数:5万回/日 10
11 できること • 発表予定の確認 • 発表へのコメント • スタンプでのリアクション
実装での工夫 スタンプ連打 対策 • FireStoreの書込み速度 → 1ドキュメントに 1回/秒 • 複数人による同時書込みに弱い
12
分散カウンタ 導入 • 複数ドキュメントを用意 • カウント数はランダムに保存 • 総カウント数は合計値 ⇒ 書込み速度向上!
13 4回 6回 5回 15回
が
スタンプ連打 対策 弱点 分散カウンタ 導入 ⇒ 1回の更新で3回の読取りが発生 15 4回 6回
5回 3つ 読取り
~再掲~ Spark プランを使用 • 無料プラン • Firestore の制限 ◦ 読取り回数:5万回/日
16
17 Firestore 読み取り数(初運用時)
18 開始前 64回 開始30分 3.7万回 開始150分 5.1万回! Firestore 読み取り数(初運用時)
19 開始30分 3.7万回 開始150分 5.1万回! Firestore 読み取り数(初運用時)
FireStore 読取り制限 Firebase料金プラン • 無料プラン ◦ 読取り回数:5万回/日 ⇒ すぐ突破してしまう 20
読み取り数削減案 • 分散カウンタ廃止 • キャッシュを活用 • 取得ドキュメントを絞る ノウハウがあれば教えてほしいです ... つか有料プランを使え
21
store.js の扱い Vuex と VuexFire • store.js でデータを管理 • 変数とコレクションを紐づけるイメージ
• Firebase とのやり取りは store.jsに集約 22 VuexFire Vuex
問題点 store.js の肥大化 コレクション追加 = 関数追加! • コンフリクト祭り • 可読性が低下...
23
何が問題なのか? ❏ 分割を考えるべきなのか? ❏ Vuexで大量のデータ管理が問題? ❏ クライアントで大量のデータを保持させる? 24
25 まとめ • 同時書込み数向上 → 分散カウンタ ◦ ただし読取り数などに注意が必要 ◦ 多少なら単一ドキュメントでも可?
• Vue.js と FireStore ◦ Vuex と Firebase の連動は検討が必要