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

Transcript

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