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.9k
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
92
React Nativeでアニメーションを頑張る- React Native Meetup #11
takahi5
4
1.3k
怖くないexpo eject - TECH STAND #2
takahi5
0
1.9k
React Native パフォーマンス最適化 - 2020-10-15 RN Tech Blog
takahi5
1
90
リリースから1年経った React Nativeアプリの リファクタリング
takahi5
0
600
リモートワーク×副業 が中心のチームづくり
takahi5
0
1.1k
React Native + Expoなアプリを リリースして1年を”5分”で振り返る
takahi5
1
260
Other Decks in Programming
See All in Programming
Modern Functional Fluent CFML REST by Luis Majano
ortus24
0
160
組織に自動テストを書く文化を根付かせる戦略(2024秋版) / Building Automated Test Culture 2024 Autumn Edition
twada
PRO
8
3.3k
Subclassing, Composition, Python, and You
hynek
3
190
Vue :: Better Testing 2024
up1
1
420
Serverless renderování Webových komponent
rarous
PRO
0
130
Going Staff - Keynote edition
pragtob
0
340
画像でわかる北島直樹
naoki0917
0
100
Scan with Decoupled Look-back and Onesweep Radix Sort
shocker_0x15
0
150
Програмиране с Rust, ФМИ, 2024
nikolads
0
120
DevFest Android in Korea 2024 - 안드로이드의 문단속 : 앱을 지키는 암호화 이야기
mdb1217
1
170
20241004 モノタロウ式~ドメインモデリングとリアーキテクチャ
monotaro
PRO
2
650
GrafanaのHTTP API を眺めてみよう
rinchoku
0
450
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Testing 201, or: Great Expectations
jmmastey
38
7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
330
How STYLIGHT went responsive
nonsquared
95
5.1k
Code Reviewing Like a Champion
maltzj
519
39k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
How to Ace a Technical Interview
jacobian
275
23k
Writing Fast Ruby
sferik
626
60k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.8k
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