Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

3aae47c11fab74b1db6ec80cd6f49058?s=47 takahi5
February 02, 2021

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

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

3aae47c11fab74b1db6ec80cd6f49058?s=128

takahi5

February 02, 2021
Tweet

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