React Native x Firebaseの メリットとTips5選

2020/2/2開催「PORT Firebase × React Native」の発表資料です。

1. React Native x Firebaseの メリットとTips5選 stand.fm
 和田崇彦 (@takahi5)
 React Native Firebase
2. 自己紹介
 - stand.fmのエンジニア (2021.1〜) 
 - React Native, Firebaseで複数のアプリを開発 
 - 2020 Firebase ハッカソン 最優秀賞 
 - UdemyでReact Native x Firebaseのコース 
 和田 崇彦 @takahi5
 2
3. 今日話すこと
 React Native x Firebaseの
 メリットとTips
 3
4. メリット
 JavaScript (TypeScript) で全部書ける！ 
 Function
 管理画面
 Web版
 アプリ
 React Native React React Native for Web 4
5. Tips
 • Firebaseのライブラリについて
 • モノレポで型を共有
 • Functionでバックエンドと適切に役割分担 
 • onSnapShotは更新頻度に注意
 • Firebaseに関わる層を分ける
 5
6. 1. Firebaseのライブラリについて 
 Firebase JavaScript SDK react-native-firebase Firebase JavaScript SDK Expoあり Expo - Managed workflow Expoなし Vanilla React Native Expo - Bare workflow 参考: Expoあるなしについて 
 https://speakerdeck.com/takahi5/bu-kunaiexpo-eject-tech-stand-number-2?slide=5 
 6
7. 1. Firebaseのライブラリについて 
 Firebase JavaScript SDK react-native-firebase Firebase JavaScript SDK Expoあり Expo - Managed workflow Expoなし Vanilla React Native Expo - Bare workflow https://firebase.google.com/support/guides/environments_js-sdk
 Expoではこれのみ 使える機能が限られる expo-firebase-analytics使える 
 7
8. 1. Firebaseのライブラリについて 
 Firebase JavaScript SDK react-native-firebase Firebase JavaScript SDK Expoあり Expo - Managed workflow Expoなし Vanilla React Native Expo - Bare workflow Firebaseのフル機能 ネイティブ実装でパフォーマンス◎ 8
9. JSスレッドとNativeスレッド
 Main (Native) Thread JavaScript Thread Bridge UI ビジネス ロジック 9
10. 1. Firebaseのライブラリについて 
 Firebase JavaScript SDK react-native-firebase Firebase JavaScript SDK Expoあり Expo - Managed workflow Expoなし Vanilla React Native Expo - Bare workflow React Native for Webで そのまま使えるメリット 10
11. 2. モノレポで型を共有
 TypeScriptの型
 
 モノレポにして
 シンボリックリンクで共有が楽
 app admin functions types types types アプリ
 管理画面
 Cloud Functions
 11
12. 3. Functionでバックエンドと適切に役割分担 
 サーバーレス　≠　フロントだけ書けば良い 
 バックエンド(Cloud Function)と役割分担を 
 
 
 React Native 12
13. バックエンド側でやったほうがよい処理 
 - 非同期でも構わない処理
 - 複雑で時間がかかる処理
 13
14. 例: 画像のリサイズ
 - Cloud Storageの保存トリガー
 - 公式のエクステンションがある
 Storage Function Cloud Storage Trigger 14
15. 例: データの抽出が複雑&更新頻度が少ない処理 
 - 例: ニュースアプリの人気記事リスト 
 collections(“articles”) .where(“like”, “>”, “10”) .where(“view” “>” “50”) …. フロントの検索条件で頑張る 
 articles popularArticles Firestore Functions 6:00 予め人気記事のコレクションを作っておく 
 15
16. 4. onSnapShotは更新頻度に注意 
 ユーザー増で予想外のstate更新頻度↑ 
 
 レンダリング負荷でパフォーマンス低下 
 Firestore onSnapShot リアルタイム更新 16
17. onSnapShotの更新頻度が高すぎる場合 - 改善アイデア 
 一定時間ごとに取得
 レンダリングの最適化
 不要な部分のレンダリング防ぐ
 React.memoの利用
 Firestore ポーリング 適当に 散らして表示 17
18. 5. Firebaseに関わる層を分ける
 - なるべくFireStoreのオブジェクトを隠蔽する 
 - アプリケーション内ではdocument.data()を展 開したものを扱う
 const snapshot = await firebase .firestore() .collection("articles") .get(); return snapshot.docs.map( (doc) => ( { ...doc.data(), id: doc.id } as Article) ); firebase.js 18
19. まとめ
 - React NativeとFirebaseの相性よい！ 
 - Tips
 - Firebaseのライブラリについて 
 - モノレポで型を共有
 - Functionでバックエンドと適切に役割分担 
 - onSnapShotは更新頻度に注意 
 - Firebaseに関わる層を分ける 
 19