KitchHike Tech Blog

KitchHike Product, Design and Engineering Teams

RN Features 2020年3月号 - React Native v0.62 注目機能Flipper, Re-architecture, Discord のパフォーマンス改善

ReactNative RNFeatures

はじめに

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

ガワネイティブアプリ(Creator)を、React Nativeで置き換えてみての一年間戦いの記録 - BASE開発チームブログ

https://devblog.thebase.in/entry/2020/02/19/110000

  • RN とFlutter を検討してRN を採用した
    • 既存技術を流用出来るか(社内、一般的なNative/Web技術含め)
  • TypeScript 3.7, Redux/Redux-Saga, React Hooks, TS Compiler API を導入
  • Expoの"Managed workflow"と"Bare worflow"を共存させる試み
「Expo を入れようとしたのは後？」
「いま始めたらこういう構成にしたいな」
「Hooks 早く入れたいですね」
「Hooks 誰が入れるんですか？」
「...」

Flutter vs Native vs React-Native: Examining performance

https://medium.com/swlh/flutter-vs-native-vs-react-native-examining-performance-31338f081980

  • Flutter はReact Native より高速、検証対象のアルゴリズムによってはSwift より速い
    • Flutter だと速く動くかもしれないが、Dart で書かないといけない。
      • RN はJS/TS で書けるのでWEB 開発と親和性が高い
    • 計算速度が重要な処理だったらJS で実行するのではなくネイティブコードを使うべきなので、RN からネイティブブリッジ経由でObjective-C なりSwift を実行した場合のパフォーマンス比較も見てみたい
「iPhone 6s なのが気になるなあ〜」
「最新機種だとどうなるんだろう」
「Swift よりFlutter の方が速い？？」
「React Native からネイティブを叩いたやつの数宇も欲しいな」

Discord のパフォーマンス改善

How Discord achieves native iOS performance with React Native

  • React Native で実装している iOS アプリのパフォーマンスを改善した話
  • コンポーネントの最適化
    • アプリ起動時に発生していた3つのコミットパスをDimensionsモジュールの導入で解決
    • ダイレクトメッセージ一覧の並び替えを最適化した
      • Before: レンダリングしてから並び替えをしていたため処理がループしていた
      • After: 並び替えが終わったリストを保持する仕組みを使って効率化した
    • props や state が変化がないのに再レンダリングしてしまう問題を PureComponent で解決
    • List のレンダリングを高速化した話
      • ScrollView の機能により、大規模な Discord サーバだと2000 view をマウントしていた
      • react-native-largelist を使ったことでレンダリング時間は大幅に削減された
        • しかし、100,000行を超えるリストの場合だとCPUがロックされてしまう
      • recyclerlistview を使ったところレンダリング時間が react-native-largelist 以上に削減された
        • スクロール位置やスティッキーヘッダーの実装とコンフリクトを起こしてしまう
      • オープンソースに頼れなくなったので独自のソリューションを生み出した
        • FastList というコンポーネントを作成し、今後オープンソースとしてリリース予定
「Discord はWEB でReact 使ってるチーム」
「PureComponent って、解決しようとするライブラリがあって、それがReact Native 本家に取り込まれた」
「mizchi さんの『俺が考えた最強の Reactのステートレスコンポーネントの書き方』って記事を」
「recompose/compose」
「shouldComponentUpdate のチューニングは我々もいずれやらないとね」
「PureComponent はReact 15.3 から取り込まれた」
「それまではみんなrecompose を使っていたのでは」
「いまは使っている人そんなにいないのかな」
「React のここ2年くらいの流れとしては、良いライブラリで出来ることを本家に採り入れる」
「歴史、背景知っていきたいな〜」

Flipper で React Native アプリの DX を改善しよう

React Native development experience improves with Flipper | React Native Jobs

Flipper の主な機能の紹介

  • Layout Inspector
    • デバッグに使えそう。各ViewのプロパティからNative Elementまで把握できる。
  • Network
    • ネットワークのデバッグができる。
  • React Devtools
  • Shared Preferences
    • Shared Preferences と NSUserDefaults の inspector
  • Native Crash Reporter

Getting Started · Flipper をざっと見た感じ、セットアップはそこそこ大変そう。iOSは CocoaPods, AppDelegate に import と initialize 処理を記述。 Android は android/gradle.properties, android/app/build.gradle, onCreate メソッドに追記が必要。

↑のセットアップ作業が React Native 0.62 RC2 から不必要になりそう。

0.62-stable のRNTester の Podfile には FlipperKit が入っていた。

Flipper for React Native 0.62 の修正から、これまでよりも導入が簡単になるらしい。ネイティブ側の修正がいらなくなる感じか。

「React Devtools が統合されたFlipper がReact Native で統合される話」
「へえ〜」 
「Shared Preferences」
「AsyncStorage のデータは見れないんだ」
「そっちが見たいのに！」
「クラッシュレポートもある」
「一つのツールで色々見れるのはいいな」
「React Native v0.62 でこれまでより簡単に導入できるようになるっぽい」
「Chrome のDeveloper Tool 以上のことはできるのかな」
「v0.62 の目玉機能」
「Xcode やAndroid Studio 的なIDE を作っていってるのかも」
「ネイティブレイヤーの情報も取れるようになったら便利」
「react-native-community/releases のレポジトリを見ているとこういう話が出てくるので面白い」
「注目レポジトリじゃん」

React Nativeの Re-architectureについて

React Nativeの Re-architecture について。 - Qiita @Naturalclar さん

ロードマップ

  • ✅ 1 . JSI (JavaScript Interface)
    • JSエンジンを選べるようにする (v8, Hermes)
  • 2 . TurboModule (Native Moduleの改善)
  • 3 . React Native Fabric (View Renderの改善)
  • 4 . CodeGen (JS の型情報から C++ の型情報を作成する)
  • 5 . Removal of Bridge
 「JS エンジンの変更はただ速くする以上の意味があった」
 「JSI ってHermes と同時に入るの？」
 「JSI はJavaScript Interface 、JS エンジンとは異なるレイヤー」
 「JSI がラップしているから、エンジンは何でもいい」
 「抽象化がすばらしい」

さいごに

これからも社内で持ち寄った技術ネタを共有します！

We're Hiring

キッチハイクでは、React Native アプリエンジニアを募集中です！

www.wantedly.com www.wantedly.com