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
2k
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
110
React Nativeでアニメーションを頑張る- React Native Meetup #11
takahi5
4
1.4k
怖くないexpo eject - TECH STAND #2
takahi5
0
2k
React Native パフォーマンス最適化 - 2020-10-15 RN Tech Blog
takahi5
1
93
リリースから1年経った React Nativeアプリの リファクタリング
takahi5
0
660
リモートワーク×副業 が中心のチームづくり
takahi5
0
1.2k
React Native + Expoなアプリを リリースして1年を”5分”で振り返る
takahi5
1
290
Other Decks in Programming
See All in Programming
Introduction to kotlinx.rpc
arawn
0
770
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
ML.NETで始める機械学習
ymd65536
0
240
楽しく向き合う例外対応
okutsu
0
710
はじめての Go * WASM *OCR
sgash708
1
110
GoとPHPのインターフェイスの違い
shimabox
2
210
CloudNativePGを布教したい
nnaka2992
0
120
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
55
19k
Rubyと自由とAIと
yotii23
6
1.8k
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
Domain-Driven Design (Tutorial)
hschwentner
13
22k
Jakarta EE meets AI
ivargrimstad
0
570
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Become a Pro
speakerdeck
PRO
26
5.2k
Thoughts on Productivity
jonyablonski
69
4.5k
Documentation Writing (for coders)
carmenintech
68
4.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Navigating Team Friction
lara
183
15k
Adopting Sorbet at Scale
ufuk
75
9.2k
Docker and Python
trallard
44
3.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
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