横方向のAndroid、iOSの、Webおよびクロスプラットフォームのフレームワークとは対照的に、ネイティブ自体は、モバイルプラットフォームの比較的新しいと速い展開で反応します。2年後、我々は革命的な多くの方法でネイティブに反応確信を持って言うことができます。これは、モバイルデバイスの変更の一例であり、我々は多くの恩恵を受けることができます。しかし、明らかに痛みのポイントがあり、それだけでこれらの利点はありません
利点
クロスプラットフォームの
ネイティブを反応させるの
主な利点は、あなたがAndroidとiOS上でネイティブに実行できるコードを書くということです。共有コードの95から100パーセントを達成することができるほとんどの機能の、ファイルの0.2％は、プラットフォーム固有の（android.js / ios.js）されているネイティブの使用を反応させます。
統一デザイン言語システム（DLS）
私たちは、DLSと呼ばれるクロスプラットフォームのデザイン言語を開発しました。私たちは、Androidの、iOSのWebバージョンを持っているネイティブと各コンポーネントを反応します。それは組み立て、デザインを意味し、異なるプラットフォーム上のスクリーン名が同じであるので、私たちは、クロスプラットフォームの機能を書くことができます統一デザイン言語を持っています。しかし、我々はまだ該当する場合、適切なプラットフォームで意思決定を行うことができます。たとえば、私たちは、Android上でのiOSのネイティブツールバーとUINavigationBarを使用して、我々は、彼らが設計ガイドラインを満たしていないので、アンドロイド、Androidプラットフォーム上の隠された指標を開示することを選択しました。
より信頼性が高く、個々のプラットフォームに適したプラットフォームAPIの生産は変化に適切なメンテナンスのオーバーヘッドAndroidとiOSエンジニアでネイティブにどのように反応するか知らないかもしれないテストを減らすので、我々は、機械部品ではなく、パッケージング成分を上書きすることを選択しました。断片化は、同じコンポーネントおよびプラットフォームのネイティブバージョンとの間で発生する同期のネイティブ版を反応させるためにしかし、それはリードを行います。
REACT
REACTは、最も人気のWebフレームワークです。それはシンプルだが強力で、大規模なコードベースにも拡張することができます。私たちは、特にその特徴を言っています：
- コンポーネント：明確に懸念の義務的な分離を定義した小道具や状態によってアセンブリを反応します。これは、スケーラビリティを反応させる主な要因です。
- 簡素化されたライフサイクル：Androidとより少ない程度に、iOSの非常に複雑なライフサイクル。学習はネイティブAndroidまたはiOSを反応させるよりも、はるかに簡単に学習するために、基本的にこの問題に対する成分の反応性官能ソリューションを反応させます。
- 免責事項：私たちのUIの基本的な自然状態の宣言でヘルプキープペースを反応させます。
反復速度は
ネイティブに反応を開発するとき、我々は確実にAndroidとiOSのテストの変化にリロードする1秒か2秒で熱を使用することができます。パフォーマンスの建設は、私たちのネイティブアプリケーションの最優先事項であるが、それは近くにやったことがなかったが、我々は、反復速度を使用して、ネイティブが達成反応します。最高の状態で、15秒のこのコンパイルマシンの時刻が、フルバージョンは20分までであり得ます。
基本的な環境構築にコスト
我々の開発は、地域のインフラとの広範な統合です。（例えば、ネットワーク、国際、テスト、共有変換コンポーネント、機器情報、アカウント情報など）すべてのコア部分は、ネイティブAPIを反応させるに含まれています。我々は一貫して反応の規範に既存のAndroidとiOSのAPIをパッケージ化するため、これらの橋は、より複雑な橋の一部です。反復して、新しいインフラの急速な発展により、現在までにこれらのブリッジを構成するためには、がキャッチアップの一定のゲームですが、インフラへの投資は、製品開発チームは、より簡単に仕事をするために。
我々は重く基盤環境を投資していない場合は、ReactNativeは減少し、開発者とユーザーエクスペリエンスになります。したがって、我々は、ネイティブは、単に継続的な投資があまりなく、既存のアプリケーションに追加することができリアクト信じていません。
パフォーマンス
の最大の懸念の1つは、ネイティブはその性能で反応します。しかし、実際には、発生回数はまだ比較的小さいです。私たちのほとんどは、私たちのネイティブスクリーンとして滑らかなどのネイティブの画面を反応します。性能は、一般に、単一の次元であると考えられています。私たちはしばしば、モバイルエンジニアがJSを見ていることがわかり、「Javaのより遅いです。」しかし、メインスレッドモバイルビジネスロジックとレイアウトから、多くのケースでは、実際にパフォーマンスをレンダリングが向上します。
我々はパフォーマンスの問題を参照して行うと、それらの効果的な使用は、通常はshouldComponentUpdate、removeClippedSubviewsを軽減し、より有効に活用アルティメットエディションを作るために、過剰なレンダリングによって引き起こされます。
しかし、初めての初期化と（後述のように）レンダリング時間を作る深い側面を連結する、起動画面でネイティブパフォーマンスの低下に反応し、画面間をナビゲートTTI時間を増加させます。また、デバッグハードスクリーンフレーム損失は、ヨガは、ビューとネイティブコンポーネント間のネイティブ遷移に反応するからです。
Reduxの
私たちは、Reduxの状態管理を使用して、我々はそれが効果的な発見したと防止UIは、画面上の状態、および簡単に共有データと同期されていません。しかし、学習曲線が比較的困難です。私たちは、共通のテンプレートのための発電機を提供しますが、ネイティブに反応使用した場合、それはまだソースと挑戦の最も混乱の部分の一つです。これは、これらの課題が反応ネイティブに固有ではないことは注目に値します。
ネイティブでサポートされている
すべてのコンテンツは、例えば、我々は最終的に多くのものを構築することができるようにネイティブは、我々が最初に確認されていません、ネイティブコードによってブリッジすることができます反応するので：
- 変換共用要素：我々は共有の要素をサポートするために、<SharedElement>組立機械AndroidとiOSのコードでを構築しました。それも、ネイティブおよびネイティブ画面を反応させるの間で使用することができます。
- Lottie：Lottieでネイティブに反応してAndroidとiOS上の既存のライブラリをラップすることにより、私たちは仕事をすることができます。
- マシンのネットワークスタックは：両方のプラットフォーム上で、当社の既存のネイティブネットワークスタックとキャッシュを使用するネイティブ反応します。
- 他のコアの基本は：ネットワークのように、私たちは、このような国際化など、実験、など既存の地域のインフラ、残りを詰め、それがシームレスに実行することをネイティブでは反応します。
アニメーション
ネイティブが反応感謝アニメーションライブラリを、私たちは、このような視差スクロールなどジッタのないアニメーション、さらにはインタラクティブな被駆動アニメーションを、達成することができます。
JS /オープンソースに反応
、実際に実行するので、我々は、このようなReduxの、再選択、冗談などとしてjavascriptの大きなプロジェクトを、使用することができますので、ネイティブとJavaScriptに反応反応します。
フレキシボックスは、
ネイティブ使用リアクトヨガによって、クロスプラットフォームのCライブラリであるプロセスレイアウトを、フレキシボックスAPIの算出処理のレイアウト。初期の段階で、我々は、このようなアスペクト比の欠如として、ヨガの制限の影響を受けているが、彼らは、その後のアップデートで追加されました。また、それは、次のような興味深いチュートリアル、あるフレキシボックスカエルのメイクエントリもっと楽しく。
ウェブとのコラボレーションで
後半ネイティブ探査を反応させるのでは、我々はすぐに、Web用のiOSとAndroidを構築するために始めました。また、Reduxのを使用するWebのビューでは、我々は多くのコードを変更することなく、Webとネイティブプラットフォーム間で共有することができました。
短所
ネイティブが反応
REACTは、ネイティブAndroidまたはiOS成熟に優れています。これは、高速移動し、より新しく、より野心的です。ネイティブは、ほとんどのケースでも実行できますが反応するが、いくつかのケースでは、それが解決し、ローカルデバッグバグの一部で明らかに未熟することは非常に困難です。残念ながら、これらの例は、予測困難な解決に数日に数時間かかることがあります。
ネイティブメンテナンスブランチが反応
によるネイティブ未熟反応し、時には修復する必要があり、我々は、ネイティブソースを反応させます。ネイティブさらに反応し、フィードバックに加えて、我々はまた、我々はすぐに変更を組み込むことができ、私たちのバージョンを破るために、フォークを維持しなければなりません。この2年間で、我々は以上のネイティブに反応提出50について追加する必要があります。これは、アップグレードのプロセスは、ネイティブは非常に苦痛であるリアクトます。
JavaScriptのツール
JavaScriptは型なし言語です。型の安全性の欠如は、拡大することは困難である彼らは、言語入力に慣れているので、論争モバイルエンジニアの焦点となっている学習に興味がある可能性がありネイティブに反応します。私たちは、採用プロセスを調査したが、不可解なエラーメッセージがイライラする開発者の経験につながります。また、活字体調べたが、そのような問題があることが判明したバベルや地下鉄バンドラ、として、当社の既存のインフラストラクチャに統合します。しかし、我々は積極的にネットワーク上の活字体を続けています。
復興
副作用を解決することはできませんJavaScriptが再構築し、エラーが発生しやすいことは非常に困難です。リネーム小道具、特に、onClickのような一般的な名前の小道具、又は正確な再構成の悪夢である成分の小道具、複数のを通して送信されます。さらに悪いことに、それが生産に再構築ではなく、コンパイル時に中断し、適切な静的解析を追加することは困難です。
JavaScriptCoreにおける矛盾は、
それがであるため、ネイティブが繊細かつ困難な側面であるリアクトJavaScriptCoreにおける環境実行。以下は、私たちの出会いの結果、次のとおりです。
- iOSのは、独自提供のボックスのうち、JavaScriptCoreにおけるを使用する準備ができて。この手段は、iOSの大半は問題が私たちのために存在しない、同じであること。
- Androidのは、そのため、独自にバンドルネイティブ反応して、独自のJavaScriptCoreにおけるを提供していません。ただし、デフォルトを取得する前に。その結果、私たちはバンドルするためにあらゆる努力加える必要があり、日付を
- デバッグ時に、ネイティブにはクロームデベロッパーツールインスタンスに追加反応します。それは強力なデバッガですので、これは素晴らしいです。デバッガがアタッチされた後しかし、すべてのJavaScriptは、ChromeのV8エンジンで実行されます。非常によく、時間の99.9％。デバッグする場合にのみ、しかし、一つの例では、我々は、iOS上のtoLocaleStringの仕事を得たが、時にアンドロイドに適用されます。これは、AndroidのJSCは、それは静かにあなたがデバッグしている場合を除き、この場合には、それはV8を使用して、失敗することが含まれていない、判明します。で技術的な詳細を知らない、それは痛みの経験豊富な製品エンジニアが数日をデバッグすることがあります。
ネイティブのオープンソースライブラリの反応
学習プラットフォーム難しく、時間がかかります。ほとんどの人は、1つのまたは2つのプラットフォームを知っています。ネイティブライブラリが（などのマップ、ビデオ、など）ローカルブリッジを持って反応し、成功の3つのプラットフォームすべてに同じ知識を必要としています。私たちは、ほとんどがネイティブのオープンソースプロジェクトは、1つまたは2つの経験豊富な人の書き込みからのものに反応することがわかりました。AndroidまたはiOS上の矛盾や予期しないエラーにこのリード。
Androidでは、多くのネイティブライブラリはまた、あなたが相対パスのnode_modulesを使用する必要が反応して、というより公開と社会矛盾Mavenの成果物を希望。
パラレルインフラストラクチャおよび機能的なワーク
私たちは、AndroidとiOSの主要インフラの年を蓄積してきました。しかし、ネイティブは、我々はすべてのブリッジ既存のインフラストラクチャを書くか、または作成する必要があり、空白のタブレットからスタート反応します。この手段は、製品エンジニアは時々いくつかの機能がまだ存在していない必要があること。彼らはどちらか、その時点で彼らはプラットフォームに精通していなかった上の仕事に持っている、またはそのプロジェクトのスコープを構築、またはそれを作成することが可能になるまでブロックされます。
APPのクラッシュ監視
我々が使用Bugsnagを AndroidとiOSのクラッシュレポートのために。我々はBugsnagは、両方のプラットフォーム上で動作することができますすることができますが、その信頼性は低いが、他のプラットフォームよりも多くの作業する必要があります。私たちは、内部で、このようなアップロードソースマッピングなどのインフラの多くを、構築する必要があり、かつフィルタリングクラッシュや他のものを実行することを可能にするために、Bugsnagで作業しなければならないので、業界は、比較的新しく、稀であるため、ネイティブに反応します。ネイティブ反応。
数のカスタム周りのネイティブインフラを反応するため、我々は時折クラッシュを報告したり、ソースマップが正しくないアップロードしていない深刻な問題が発生しました。
問題は全体のデバッグ、ネイティブおよびネイティブコードを反応させるのならば、スタックトレースが反応でネイティブとネイティブのジャンプの間ではありませんので、最後に、ネイティブ崩壊は通常より挑戦されて反応します。
ブリッジは、
ネイティブがいるリアクトAPIを橋渡しこのユニットの間の通信のために、ネイティブに反応します。期待どおりに動作しますが、書き込みは非常に面倒ですが。まず、それが適切にすべての3つの開発環境をセットアップする必要があります。JavaScriptのタイプは予想外であるから、我々はまた、多くの問題に遭遇しました。問題は、ブリッジを介して達成されるまで、例えば、整数は、通常、文字列で巻かれます。さらに悪いことに、時々のiOSは黙ってAndroidのクラッシュを失敗します。私たちは、自動的に活字体は、2017年の終わりからコードを橋渡し定義されて生成し始める勉強し始めたが、それは遅すぎました。
初期化時間
前にネイティブが初めて提示リアクトは、それが実行時に初期化する必要があります。残念ながら、でも我々のアプリケーションのために、それも数秒かかるハイエンド・デバイス、上。これは、使用が起動画面用のネイティブに反応作ることはほとんど不可能です。私たちは、最初のレンダリング時間をネイティブに反応最小限でアプリ-打ち上げにそれを初期化します。
最初のレンダリング時間
異なるネイティブ画面では、レンダリングがネイティブには少なくとも一つの完全なメインスレッドを必要とリアクト- > JS - >ヨガレイアウトスレッド- >とメインスレッドからは初めてのための画面を描画するのに十分な情報を持っています。私たちは、Android上で440ミリ秒と比較して、280ミリ秒である平均初期のiOS P90のレンダリング時間に参照してください。Androidでは、我々が使用しpostponeEnterTransitionのAPIを、多くの場合、それはこれまでに提示されるまで、表示画面を遅らせるために、変換の共用要素に使用されています。iOSでは、我々が反応先住民問題からの迅速なナビゲーションバーの設定を持っていました。したがって、我々は人工50msのは、コンフィギュレーションのロード後にナビゲーションバーが点滅を防止するために、ネイティブの画面遷移を反応させるのすべての遅延が追加されました。
大きさのアプリケーション
への影響は、ネイティブアプリケーションのサイズを無視することはできません反応します。Androidでは、合計サイズは、各ABIの8メガバイトのためのネイティブ（Javaの+ JS +などヨガ+ Javascriptの実行時のように地元の図書館を、）反応します。1つのAPKでx86およびARM（32ビットのみ）を使用して、それが近い12メガバイトになります。
64
のので、この問題は、我々はまだAndroid上で64 APKを送信することはできません。
ジェスチャー
我々はネイティブが異なるAndroidとiOSのタッチサブシステムとして、画面のための複雑なジェスチャーを伴うので、全体のための統一されたAPIを提案リアクト避けるためには、ネイティブのコミュニティが課題である反応します。しかし、仕事を続けている、と反応するネイティブ・ジェスチャー・ハンドラは、のみ1.0に達しました。
長いリストが
ネイティブのように含めて、この分野でいくつかの進歩を遂げたリアクトFlatListなAライブラリ。しかし、彼らはどこにも近く、Android上であるRecyclerView上またはiOS UICollectionViewの成熟度と柔軟性。スレッドので、非常に困難な多くの制限を克服します。ビューは、高速スクロールで非同期的にレンダリングされるときにビューを見ることができるので、データアクセスアダプタを同期することはできません。iOSのは、セルの予め計算された高さのいくつかの最適化を使用しないように、テキストを同時に測定することはできません。
ネイティブアップグレードを反応させるの
ほとんどは、ネイティブのアップグレードを反応させながら些細ですが、いくつかの痛みを伴うがあります。それの用途は、16アルファとベータを反応するので、特に、使用することはほぼ不可能は、0.49（2009年2017年4月）（2017年10月）0.43ネイティブ反応します。これは、最も具体的に使用するために設計されたWeb用に反応するのでプレリリースバージョンをサポートしていないライブラリを反応して、非常に大きな問題です。他の半ばにこのアップグレードプロセスのもつれ正しい依存関係は2017年のネイティブインフラ作業が大きな被害をもたらし反応します。
トラブルの崩壊
、我々は解決が困難いくつかの非常に奇妙な大失敗に対処しなければなりませんでした。例えば、我々は現在、@ReactPropコメント経験しているの崩壊を、そしてこれらのデバイスは、同じハードウェアとソフトウェアが野生で崩壊する持っている場合でも、任意のデバイス上で再現することはできません。
状態でのAndroidのインスタンスでプロセスを保存
アンドロイド常にクリーンなバックグラウンドプロセスが、それらに彼らの同期の状態を保存する機会を与えます。しかし、ネイティブリアクトで、唯一それが不可能な同期を完了すること、すべての状態のjsのスレッドにアクセスすることができます。そうでない場合でも、それは非シリアル化されたデータおよび混合の配列が含まれているため、メモリはこの方法互換Reduxのではないと仮定すると、データはsavedInstanceStateパケットはデータの破損を引き起こす可能性以上含有することができます。制作。