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

React Native x FirebaseのメリットとTips5選 stand.fm  和田崇彦 (@takahi5)  React Native
Firebase

自己紹介  - stand.fmのエンジニア (2021.1〜)   - React Native, Firebaseで複数のアプリを開発  
- 2020 Firebase ハッカソン最優秀賞   - UdemyでReact Native x Firebaseのコース   和田崇彦 @takahi5  2

今日話すこと  React Native x Firebaseの  メリットとTips  3

メリット  JavaScript (TypeScript) で全部書ける！   Function  管理画面  Web版  アプリ  React
Native React React Native for Web 4

Tips  • Firebaseのライブラリについて  • モノレポで型を共有  • Functionでバックエンドと適切に役割分担   • onSnapShotは更新頻度に注意 
• Firebaseに関わる層を分ける  5

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

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

Expoあり Expo - Managed workflow Expoなし Vanilla React Native Expo - Bare workflow Firebaseのフル機能ネイティブ実装でパフォーマンス◎ 8

JSスレッドとNativeスレッド  Main (Native) Thread JavaScript Thread Bridge UI ビジネスロジック
9

Expoあり Expo - Managed workflow Expoなし Vanilla React Native Expo - Bare workflow React Native for Webでそのまま使えるメリット 10

2. モノレポで型を共有  TypeScriptの型    モノレポにして  シンボリックリンクで共有が楽  app admin functions types
types types アプリ  管理画面  Cloud Functions  11

3. Functionでバックエンドと適切に役割分担   サーバーレス　≠　フロントだけ書けば良い   バックエンド(Cloud Function)と役割分担を      
React Native 12

バックエンド側でやったほうがよい処理   - 非同期でも構わない処理  - 複雑で時間がかかる処理  13

例: 画像のリサイズ  - Cloud Storageの保存トリガー  - 公式のエクステンションがある  Storage Function Cloud
Storage Trigger 14

例: データの抽出が複雑&更新頻度が少ない処理   - 例: ニュースアプリの人気記事リスト   collections(“articles”) .where(“like”, “>”,
“10”) .where(“view” “>” “50”) …. フロントの検索条件で頑張る   articles popularArticles Firestore Functions 6:00 予め人気記事のコレクションを作っておく   15

4. onSnapShotは更新頻度に注意   ユーザー増で予想外のstate更新頻度↑     レンダリング負荷でパフォーマンス低下   Firestore onSnapShot
リアルタイム更新 16

onSnapShotの更新頻度が高すぎる場合 - 改善アイデア   一定時間ごとに取得  レンダリングの最適化  不要な部分のレンダリング防ぐ  React.memoの利用  Firestore ポーリング
適当に散らして表示 17

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

まとめ  - React NativeとFirebaseの相性よい！   - Tips  - Firebaseのライブラリについて  
- モノレポで型を共有  - Functionでバックエンドと適切に役割分担   - onSnapShotは更新頻度に注意   - Firebaseに関わる層を分ける   19

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

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

takahi5

More Decks by takahi5

Other Decks in Programming

Featured

Transcript