はじめに

キッチハイクのエンジニアメンバーで React Native の気になるニュースを持ち寄ってみました！

はじめに
React Summit Remote Edition まとめ(前編)
React.memoについて調べてみた
React Native Apps がリニューアル
あなたが知るべき4つのJavaScript デザインパターン
RNに対応したライブストリーミングSDK bambuser
Shopifyの技術選定
RNのライブラリのScaffoldを作成するCLI 'bob'
What's coming up in React Native 0.63
TikTok, Spotify などFBSDK を使っているiOS アプリが一斉にクラッシュ
- facebook/facebook-ios-sdk のリポジトリに作成されたIssue
- 余談: Facebook と Firebaseの Analytics のちがい
さいごに
We're Hiring

React Summit Remote Edition まとめ(前編)

https://blog.naturalclar.dev/react-summit-remote-summary-part-1/

コメント

「react-native-communityで活躍されている @Naturalclar さんがまとめを書いてくれていた」
「React Summit見たよ、サイトも動画と同時にタイムラインが動くようになっててかなり凝ってたな」
「React Native が0.xxだからって安定してないわけではない、って発表はよかった」
「React Conference のYoutubeチャンネルで今までのReact Conferenceの動画が閲覧できるみたい」

React.memoについて調べてみた

React Performance Optimization with React.memo() | Felix Gerschau

React v16.6.0 から追加されたAPI
- https://ja.reactjs.org/blog/2018/10/23/react-v-16-6.html
React Native では v0.57.4 で採用 16.6.0-alpha.8af6728
同時期にReact.lazy、React.Suspenceが追加されている
関数コンポーネントのPureComponent化を提供する

React のパフォーマンスチューニングの基本戦略

無駄な計算を抑え、再レンダリングをできるだけ抑える

ClassComponent では shouldComponentUpdate メソッドをオーバーライドし boolean を返すことで再レンダリングをコントロールしていた

PureComponentの登場

自動 ShallowEqual 機能により簡潔にパフォーマンスチューニングが可能に

Function Componentの課題を解決する React.memo

PureComponentなどの機能が無く、必ず再レンダリングされてしまっていた React v16.6で発表された React.memo によりFunction Componentでも shouldComponentUpdate と同じことができるようになった

Hooks以降のチューニング

Hooks時代のReactパフォーマンスチューニング - HRBrain Blog

useMemo
React.memo + useCallback

コメント
「React v16.6 は2018年10月ごろにリリースされてる」
「Reactの思想、関数型パラダイムの理解は深めていきたいですね」
「Function Componentにしておけばいいみたいに思ってたなあ」
「Function Component + Memoを使うのってかなりカリカリにチューニングする時なのでは」
「実際に使わないとノウハウがたまらないのでどんどんトライしていきたいね」

React Native Apps がリニューアル

https://github.com/ReactNativeNews/React-Native-Apps

f:id:ariiyu:20200511200433p:plain

OSSで開発されているReact Nativeアプリのカタログサイト
テーブル形式になって見やすくなった
React Nativeのバージョンや最新コミット、GitHub Star数が一覧できる

コメント
「神PRが来てめっちゃ見やすくなった！」
「最近issueとかPRとかがどんどん来ているのをウォッチしてました」
「RNのバージョンがわかるのはありがたい」
「バージョンのバッジが統一されていないのはなんでなんだろ」

あなたが知るべき4つのJavaScript デザインパターン

4 Useful JavaScript Design Patterns You Should Know

Strategy Pattern
Publish–Subscribe Pattern
Decorator Pattern
Chain of Responsibility Pattern

コメント
「こういうデザインパターンのような基礎はちゃんと勉強しないとね」
「Decorator Patternは Railsで使っているから馴染みがあります」
「Publish−Subscribe Pattern は iOSのNotificationパターンを思い出しました」

RNに対応したライブストリーミングSDK bambuser

一瞬でライブ配信を実装できるbambuserを試してみた

bambuserとは、2007年に創業したスウェーデンの企業で、ライブコマースなどのユースケースを想定したライブ配信ソリューションを提供している。
ユースケースの例: https://bambuser.com/articles/live-video-shopping-at-new-york-fashion-week
Live Streaming SDK も提供している
Android や iOS 以外にも React Native や Cordova/Ionic にも対応

f:id:ariiyu:20200511200455g:plain

ライブストリーミング機能をフルスクラッチで実装するとコストがかかるが、この SDK によってローコストでの導入が可能になる。コロナの影響もあり、今後注目されるかも？

コメント
「React Nativeの0.60以上で対応している」
「現段階では遅延などがあって一対一のコミュニケーションが難しいらしい」

Shopifyの技術選定

React Nativeを採用すべきか〜Shopifyに学ぶ

Shopifyの技術投資哲学

新しいからと言う理由では決して採用しない。実際のEfficiencyやユーザーへ届くアウトプットの品質向上などのオピニオンを持つ
サイドプロジェクトだけで入れるということはせず、全会社のプロジェクトがその技術に移行する
選んだ技術に関して、エコシステムの一員になる

RN採用のねらい(ShopifyでのRN採用の狙いは一般的であり、特別変わった理由はない)

クロスプラットフォームによるコードシェア（Android, iOSでのシェアは95~99%シェアできているとのこと）
デスクトップ、Webエンジニアをアプリエンジニアとしてコンバートできること(learn once, write anywhere) 決め手は、エコシステムの強化。(Facebookの再投資、Microsoftの参画）

RNを辞めたAirbnb、RNを採択したShopify

1. タイミングの違い

Airbnb: FacebookがRNの諸問題を見直し、再投資し、リアーキテクチャリングする前
Shopify: 再投資の後

2. カルチャーの違い

Airbnb: ネイティブエンジニア vs Reactエンジニアという対立
Shopify: React Nativeを学ぶのは、今までのネイティブアプリを作るのよりも楽しい

3. アーキテクチャの違い

Airbnb: Brownfield App
Shopify: Greenfield App

コメント
「『選んだ技術に関して、エコシステムの一員になる』っていうのはかっこいいね」
「ここでいうMicrosoftの参画っていうのはreact-native-for-windowsのことか」
「この前のReact SummitでもShopifyのエンジニアが登壇してましたよね」
「キッチハイクの場合はGreenfieldってことかあ」
「Airbnbは自分でフレームワークを作れるレベルの開発チームがあるので、React Nativeである必要はなかったのかもですね」

RNのライブラリのScaffoldを作成するCLI 'bob'

https://github.com/react-native-community/bob

React Nativeのライブラリを作成するためのCLIライブラリ
react-native-community 公式
CircleCIも導入済み

コメント
「ライブラリが簡単に作れるみたいですね」
「何でBobなんだろうね、Jenkinsみたいなことなのかな？」

What's coming up in React Native 0.63

https://qiita.com/Naturalclar/items/af43d842c5268720ef69

React Native 0.63 新機能
- LogBox
  - React Native 0.62 で試験的に導入された新しいエラー画面
  - 0.62 ではオプトインだったが、次のバージョンからはデフォルトで入るようになる
- Pressable
  - 「押された状態」を持つコンポーネント
  - 子 Component に pressed の状態をもたせ、押された状態と押されていない状態で見た目を変更するなどが行えるようになる
- PlatformColor
  - 端末で設定されている基本色を取得するAPI
  - Dark Mode 対応などに役立ちそう
- DynamicColorIOS
  - Appearance に合わせた色を取得できる iOS専用の新しい API
- その他の変更点
  - iOS 9 のサポート切り
  - Node.js 8 のサポート切り
  - Hermes 0.5.0

コメント
「こちらもreact-native-communityで活躍されている @Naturalclar さんの記事」
「Pressable便利ですね！今まではonTouchStart, onTouchEndを使って実装する必要があったみたいです」
「onTouchStart, onTouchEndはドキュメントに記載されていないの？」
「このIssueが作られたけどドキュメントのリポジトリで議論してねって言われてクローズされてる」
「これはPRのチャンスか」

TikTok, Spotify などFBSDK を使っているiOS アプリが一斉にクラッシュ

Facebook SDKの問題で「TikTok」「Spotify」など人気iOSアプリがクラッシュ - CNET Japan

FBSDK はFacebook ログインなどをサポートするためにアプリに組み込むライブラリ
iOS用Facebook SDK はアプリ起動のたびにFacabook のサーバーと通信する
クラッシュの原因は、Facebook のサーバーのレスポンスが適切でなかったこと

facebook/facebook-ios-sdk のリポジトリに作成されたIssue

Crash in FBSDKRestrictiveDataFilterManager.m line 80 Issue #1374 · facebook/facebook-ios-sdk - Analytics のためか、実行環境の基本的な情報について graph.facebook.com とアプリが通信しているというコメントがある - サーバーからのレスポンス内容に関わらずSDK がクラッシュしないようにする提案と、なぜ通信していて何の情報を共有しているのかの透明性を確保することについてのコメントがある - 該当Issue はコミッターによってclose された

コメント
「日本ではあんまり話題になってなかったですね。日本時間だと午後8時ごろなのでゴールデンタイムのはず」
「アプリ起動時にクラッシュしちゃうのか...悲惨だな...」
「アナリティクスとか使っている一部のアプリだけなのかも」

余談: Facebook と Firebaseの Analytics のちがい

Facebook のAnalytics だとデバイス情報がFirebase / Google Analytics よりも細かく分かる。 Firebase は大雑把で、端末の種類のiPhone 11 Pro やiPhone 11 Pro のあたりがよく分からない。。(デバイスモデル毎のユーザー数は分かる)