「イベント」タグの投稿1件

先週、Zyngaのサンフランシスコオフィスで開催されたReact Nativeミートアップに参加する機会がありました。約200人が参加し、React Nativeに興味のある近くの他の開発者と会うのに最適な場所となりました。

私は特に、Zynga、Netflix、Airbnbなどの企業でReactとReact Nativeがどのように使用されているかについて詳しく知りたいと思っていました。夜の議題は以下の通りです。

• Reactでの迅速なプロトタイピング
• React Native用APIの設計
• ギャップを埋める: 既存のコードベースでReact Nativeを使用する

しかし、まずイベントは簡単な紹介と最近のニュースの簡単な要約から始まりました。

• React Nativeが現在、GitHubで最も人気のあるJavaリポジトリであることをご存知ですか？
• rnpmはReact Nativeコアの一部になりました！ネイティブ依存関係を持つライブラリをインストールするために、rnpm linkの代わりにreact-native linkを使用できるようになりました。
• React Nativeミートアップコミュニティは急速に成長しています！現在、世界中のさまざまなReact Nativeミートアップグループに4,800人以上の開発者がいます。

お近くにこれらのミートアップの1つが開催されている場合は、参加することを強くお勧めします！

ZyngaでのReactの迅速なプロトタイピング​

最初のニュースの後、夜のホストであるZyngaによる簡単な紹介がありました。Abhishek Chadhaは、Reactを使用してモバイルで新しいエクスペリエンスを迅速にプロトタイピングする方法について語り、Draw Somethingのようなアプリの簡単なプロトタイプをデモしました。彼らはReact Nativeと同様のアプローチを使用して、ブリッジを介してネイティブAPIへのアクセスを提供しています。これは、Abhishekがデバイスのカメラを使用して聴衆の写真を撮り、誰かの頭に帽子を描いたときに実証されました。

NetflixでのReact Native用APIの設計​

次は、夜の最初の特集講演です。NetflixのシニアソフトウェアエンジニアであるClarence Leungは、React Native用APIの設計に関する講演を行いました。最初に、作業する可能性のある2つの主要なタイプのライブラリ、つまりタブバーや日付ピッカーなどのコンポーネント、カメラロールやアプリ内決済などのネイティブサービスへのアクセスを提供するライブラリに言及しました。React Nativeで使用するためのライブラリを構築する際には、2つのアプローチ方法があります。

• プラットフォーム固有のコンポーネントを提供する
• AndroidとiOSの両方で同様のAPIを備えたクロスプラットフォームライブラリ

それぞれのアプローチにはそれぞれ考慮事項があり、ニーズに最適なものを決定するのはあなた次第です。

アプローチ＃1

プラットフォーム固有のコンポーネントの例として、ClarenceはコアReact NativeのDatePickerIOSとDatePickerAndroidについて話しました。iOSでは、日付ピッカーはUIの一部としてレンダリングされ、既存のビューに簡単に埋め込むことができますが、Androidの日付ピッカーはモーダル形式で表示されます。この場合は、個別のコンポーネントを提供するのが理にかなっています。

アプローチ＃2

一方、写真ピッカーは、AndroidとiOSで同様に扱われます。わずかな違いはありますが（たとえば、AndroidはiOSのようにSelfiesなどのフォルダーに写真をグループ化しません）、ifステートメントとPlatformコンポーネントを使用して簡単に処理できます。

どちらのアプローチを選択する場合でも、APIサーフェスを最小限に抑え、アプリ固有のライブラリを構築することをお勧めします。たとえば、iOSのアプリ内購入フレームワークは、1回限りの消費可能な購入と更新可能なサブスクリプションをサポートしています。アプリが消費可能な購入のみをサポートする必要がある場合は、クロスプラットフォームライブラリでのサブスクリプションのサポートを削除しても問題ありません。

Clarenceの講演の最後に簡単な質疑応答セッションがありました。そこから出てきた興味深い情報の1つは、Netflixでこれらのライブラリ用に記述されたReact Nativeコードの約80％がAndroidとiOSの両方で共有されているということです。

ギャップを埋める、既存のコードベースでReact Nativeを使用する​

夜の最後の講演は、AirbnbのLeland Richardsonによるものでした。講演は、既存のコードベースでのReact Nativeの使用に焦点を当てていました。React Nativeを使用してゼロから新しいアプリを記述するのがどれほど簡単かはすでにわかっているので、Airbnbが既存のネイティブアプリでReact Nativeを採用した経験について聞くことに非常に興味がありました。

Lelandは、グリーンフィールドアプリとブラウンフィールドアプリについて話すことから始めました。グリーンフィールドとは、以前の作業を考慮する必要なくプロジェクトを開始することを意味します。これは、既存のプロジェクトの要件、開発プロセス、およびすべてのチームのさまざまなニーズを考慮する必要があるブラウンフィールドプロジェクトとは対照的です。

グリーンフィールドアプリで作業している場合、React Native CLIはAndroidとiOSの両方の単一のリポジトリを設定し、すべてが正常に機能します。AirbnbでReact Nativeを使用する際の最初の課題は、AndroidアプリとiOSアプリにそれぞれ独自のリポジトリがあることでした。マルチリポジトリ企業は、React Nativeを採用する前に克服すべきいくつかのハードルがあります。

この問題を回避するために、AirbnbはまずReact Nativeコードベース用の新しいリポジトリをセットアップしました。彼らは継続的インテグレーションサーバーを使用して、AndroidとiOSのリポジトリをこの新しいリポジトリにミラーリングしました。テストが実行され、バンドルがビルドされた後、ビルドアーティファクトはAndroidとiOSのリポジトリに同期されます。これにより、モバイルエンジニアは開発環境を変更することなく、ネイティブコードで作業できます。モバイルエンジニアは、npmをインストールしたり、パッケージャーを実行したり、JavaScriptバンドルをビルドすることを覚えておく必要はありません。React Nativeコードを実際に記述するエンジニアは、React Nativeリポジトリで直接作業するため、AndroidとiOS間でコードを同期する心配がありません。

これにはいくつかの欠点があり、主にアトミックアップデートを出荷できませんでした。ネイティブコードとJavaScriptコードの組み合わせが必要な変更には、3つの個別のプルリクエストが必要であり、すべて慎重に適用する必要がありました。競合を回避するために、ビルドの開始以降にマスターが変更された場合、CIはAndroidおよびiOSリポジトリへの変更の適用に失敗します。これは、コミット頻度が高い日（新しいリリースがカットされる場合など）に長い遅延を引き起こします。

Airbnbはそれ以来、モノレポのアプローチに移行しました。幸いなことに、これはすでに検討中であり、AndroidとiOSチームがReact Nativeの使用に慣れたため、モノレポへの移行を加速させることができました。

これにより、分割リポジトアプローチで発生したほとんどの問題が解決されました。Lelandは、これによりバージョン管理サーバーへの負担が大きくなり、小規模な企業にとっては問題となる可能性があると指摘しました。

ナビゲーションの問題​

Lelandの講演の後半は、私にとって重要なトピックであるReact Nativeのナビゲーション問題に焦点を当てました。彼は、React Nativeにファーストパーティとサードパーティの両方のナビゲーションライブラリが豊富にあることについて話しました。NavigationExperimentalは有望なものとして言及されましたが、最終的には彼らのユースケースには適していませんでした。

実際、既存のナビゲーションライブラリのどれも、ブラウンフィールドアプリにはうまく機能しないようです。ブラウンフィールドアプリでは、ナビゲーションの状態がネイティブアプリによって完全に所有されている必要があります。たとえば、React Nativeビューが表示されている間にユーザーのセッションが期限切れになった場合、ネイティブアプリは必要に応じてログイン画面を引き継いで表示できる必要があります。

Airbnbはまた、移行の一環としてネイティブナビゲーションバーをJavaScriptバージョンに置き換えることを避けたいと考えていました。なぜなら、その効果は不快なものになる可能性があるからです。当初、彼らはモーダル表示のビューに限定していましたが、これは明らかにアプリ内でReact Nativeをより広く採用する際に問題を引き起こしました。

彼らは独自のライブラリが必要だと判断しました。ライブラリは `airbnb-navigation` と呼ばれます。このライブラリはまだAirbnbのコードベースと強く結びついているためオープンソース化されていませんが、年末までにリリースしたいと考えています。

ライブラリのAPIについては詳しく説明しませんが、重要なポイントをいくつか紹介します。

• シーンは事前に登録する必要があります。
• 各シーンは独自の `RCTRootView` 内に表示されます。それらは各プラットフォームでネイティブに表示されます（たとえば、iOSでは `UINavigationController` が使用されます）。
• シーンのメイン `ScrollView` は `ScrollScene` コンポーネントでラップする必要があります。これにより、iOSでステータスバーをタップしてトップにスクロールするなどのネイティブの動作を利用できます。
• シーン間の遷移はネイティブで処理されるため、パフォーマンスについて心配する必要はありません。
• Androidの戻るボタンは自動的にサポートされます。
• Navigator.Config UIレスコンポーネントを介して、View Controllerベースのナビゲーションバーのスタイリングを利用できます。

また、いくつかの考慮事項があります。

• ナビゲーションバーはネイティブコンポーネントであるため、JavaScriptで簡単にカスタマイズできません。これは意図的なものであり、ネイティブナビゲーションバーを使用することは、このタイプのライブラリの必須要件です。
• ScreenPropsはブリッジを介して送信されるたびにシリアル化/逆シリアル化する必要があるため、ここで送信するデータが多すぎる場合は注意が必要です。
• ナビゲーションの状態はネイティブアプリによって所有されているため（これもライブラリの必須要件です）、Reduxなどはナビゲーションの状態を操作できません。

Lelandの講演の後には、Q&Aセッションも行われました。全体的に、AirbnbはReact Nativeに満足しています。彼らは、App Storeを経由せずにCode Pushを使用して問題を修正することに関心を持っており、エンジニアは、小さな変更のたびにネイティブアプリをリビルドする必要がないため、Live Reloadを気に入っています。

結びの言葉​

イベントは、React Nativeに関する追加のニュースで終了しました。

• DecoはReact Native Showcaseを発表し、全員にアプリをリストに追加するよう招待しました。
• 最近のドキュメントのオーバーホールが話題になりました！
• Deco IDEの作成者の1人であるDevin Abbottが、入門React Nativeコースを教えます。

ミートアップは、コミュニティの他の開発者と出会い、学ぶための良い機会を提供します。今後、さらに多くのReact Nativeミートアップに参加することを楽しみにしています。これらのいずれかに参加する場合は、私を探して、React Nativeをより効果的に活用する方法をお知らせください。