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

by takahi5

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

1. Firebaseのライブラリについて   Firebase JavaScript SDK react-native-firebase Firebase JavaScript SDK Expoあり Expo - Managed workflow Expoなし Vanilla React Native Expo - Bare workflow Firebaseのフル機能ネイティブ実装でパフォーマンス◎ 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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