Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native x Firebaseの メリットとTips5選
Search
takahi5
February 02, 2021
Programming
1
1.8k
React Native x Firebaseの メリットとTips5選
2020/2/2開催「PORT Firebase × React Native」の発表資料です。
takahi5
February 02, 2021
Tweet
Share
More Decks by takahi5
See All by takahi5
仮説検証フェーズの開発 with React Native
takahi5
0
79
React Nativeでアニメーションを頑張る- React Native Meetup #11
takahi5
4
1.2k
怖くないexpo eject - TECH STAND #2
takahi5
0
1.7k
React Native パフォーマンス最適化 - 2020-10-15 RN Tech Blog
takahi5
1
82
リリースから1年経った React Nativeアプリの リファクタリング
takahi5
0
520
リモートワーク×副業 が中心のチームづくり
takahi5
0
1k
React Native + Expoなアプリを リリースして1年を”5分”で振り返る
takahi5
1
250
Other Decks in Programming
See All in Programming
C# 大統一理論推進委員会 会員のための Unity Package Manager プロジェクト構成案
monry
PRO
0
580
Enhancing Applications with Accessibility API
kishikawakatsumi
3
1k
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
140
Dockerで始めるAWS Lambda開発
stutkhd0709
14
2.5k
Honoとhtmx
yusukebe
6
1.2k
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
Material 3で Material 2ぽい見た目にする
numeroanddev
2
250
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
9
6.5k
複雑なドメインを扱うプロダクトの探索フェーズではいつどのようにテストをするのか / How to testing during exploratory phase
boykush
2
150
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
25
15k
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
3.4k
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
380
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
43
9.6k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
GraphQLとの向き合い方2022年版
quramy
28
12k
Scaling GitHub
holman
456
140k
Building Adaptive Systems
keathley
29
1.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
How to Ace a Technical Interview
jacobian
272
22k
A better future with KSS
kneath
230
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Transcript
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
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
1. Firebaseのライブラリについて Firebase JavaScript SDK react-native-firebase Firebase JavaScript SDK
Expoあり Expo - Managed workflow Expoなし Vanilla React Native Expo - Bare workflow Firebaseのフル機能 ネイティブ実装でパフォーマンス◎ 8
JSスレッドとNativeスレッド Main (Native) Thread JavaScript Thread Bridge UI ビジネス ロジック
9
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
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