ReactNative、Xamarin、PhoneGap、およびQtアーキテクチャ。 パート1

親愛なる友人、人気のあるクロスプラットフォームモバイルフレームワークのアーキテクチャについてさらに学習する準備ができている場合、この記事ではそれらを比較し、このツールまたはそのツールが適切なタスクまたはチームのクラスを決定します。 最初の部分では、クロスプラットフォームフレームワークの一般的なアーキテクチャパターンと、PhoneGapおよびReactNativeアーキテクチャについて説明します。 2番目の部分では、XamarinおよびQtフレームワーク。

この記事は、マニュアルの要約版であり、リンクの最後にあります。

私は床をヴャチェスラフ・チェルニコフに渡します。

はじめに

現在、多くのフレームワーク自体がありますが、アーキテクチャの観点から見ると、基本的にPhoneGap、ReactNative、およびXamarinに似ているため、この3つのリーダーに焦点を当てます。 Qtをレビューに追加しました。アクティブなQt開発者または以前にQt開発者と協力し、iOSおよびAndroidのサポートについて聞いたことがある人からよく聞かれます。

ターゲットプラットフォームとして、iOS、Android、およびWindows UWPに焦点を当てます。

ネイティブおよびクロスプラットフォーム開発ツール

歴史的に、コンピューター市場では常に競争があり、各メーカーはオペレーティングシステムとデバイスのアプリケーションを開発するための最適なセットのいわゆる「ネイティブ」（ネイティブ）ツールを提供してきました。 ネイティブ開発ツールは、最適なパフォーマンスとオペレーティングシステム機能へのアクセスを提供します。

ただし、これらのツールは、開発言語のレベル、受け入れられている規則とアーキテクチャだけでなく、オペレーティングシステムとライブラリを操作するメカニズムのレベルでも互いに互換性がないことがしばしば判明しました。 その結果、同じアルゴリズム、ユーザーまたはビジネスシナリオを実装するには、異なるプログラミング言語で複数の環境用のアプリケーションを作成する必要がありました。 たとえば、2つのプラットフォームをサポートする必要がある場合、人件費とチームを2倍に増やす必要があります。 さらに、サポートと開発のための2倍の予算。 多くの企業がすでに大きなコードベースを蓄積していることを付け加えることができます。これも新しいソリューションに継承したいと思います。

2番目の重要なポイントは、チーム内で必要なコンピテンシー（知識と経験）を利用できるかどうかです。チームにいない場合は、トレーニングに時間がかかります。

これらの問題の両方を解決するために、クロスプラットフォーム開発ツールが市場に登場し、以下を提供しました。

-製品の開発と保守が容易になるように、単一のプログラミング言語で全体的なコードベースを最大化します。

-既存の能力と専門家を使用して、新しいプラットフォームにアプリケーションを実装します。

現在、多くのプログラミング言語（および環境）（およびこれらの言語を知っている専門家）があるため、クロスプラットフォーム開発用のツールがかなりあります。 この本では、モバイルビジネスアプリケーションを作成するためのツールのみに関心があるため、次の章では、それらがどのように機能するかについてさらに詳しく説明します。 それまでの間、クロスプラットフォーム開発の各利点についてもう少し詳しく説明します。

共通のコードベース。 開発者は、選択したツールに応じて、プラットフォーム間（アプリケーションリソース（画像、フォント、その他のファイル）、データ操作ロジック、ビジネスロジック、インターフェイスの説明）を簡単に探ることができます。 また、リソースとロジック（データ処理とビジネス）がすべて非常に単純な場合は、各プラットフォームに独自の推奨事項と要件があるため、インターフェイスに注意する必要があります。

既存のコンピテンシーとチームを使用します。 プログラミング言語だけでなく、iOS / Android / Windowsオペレーティングシステムの動作メカニズム、および追加のライブラリと開発ツールのセットについても理解する価値があります。

したがって、「ネイティブ」ツールはエコシステムの所有者自身によって提供され、ターゲットオペレーティングシステムの機能を最大限に活用し、ネイティブAPIへのフルアクセス、最適なパフォーマンス、およびプラットフォームごとに個別の開発チームが必要になります。

クロスプラットフォームフレームワークは、複数のプラットフォームを同時にサポートする必要があり、必要な能力がある（または開発中）場合に、人件費を削減し、アプリケーションのリリースを加速できます。 長い目で見れば、クロスプラットフォームソリューションはかなりの工数を節約するのに役立ちますが、このためには、選択したツールの機能を検討する価値があります。

IOS / AndroidアーキテクチャとネイティブAPI

クロスプラットフォームソリューションの基礎となる主な原則は、コードを2つの部分に分けることです。

• クロスプラットフォーム 、仮想環境に住んでおり、特別なブリッジを介してターゲットプラットフォームの機能へのアクセスが制限されています。
• Nativeは、アプリケーションの初期化、キーオブジェクトのライフサイクル管理、およびシステムAPIへのフルアクセスを提供します。

「ネイティブ」の世界と「クロスプラットフォーム」の世界を接続するには、特別なブリッジを使用する必要があります。 また、第3章で説明するように、クロスプラットフォームフレームワークの機能と制限を決定するのはブリッジです。

ブリッジを使用すると、「世界」間でデータを変換し、API呼び出しとライブラリを変換することにより、常にパフォーマンスに悪影響を及ぼします。 「クロスプラットフォーム」の世界自体は、「ネイティブ」の世界と同等のパフォーマンスを備えています。

そのため、すべてのクロスプラットフォームアプリケーションにはネイティブ部分が必要です。そうでないと、オペレーティングシステムは単にそれらを起動できません。 また、iOS、Android、およびWindows UWP自体が、クロスプラットフォームフレームワークに必要なAPIを提供します。

• WebViewは 、PhoneGapまたは類似物に基づくハイブリッドアプリケーションでアプリケーションを実行するために使用され、実際にはWebアプリケーションのランタイムとして機能します。
• JavaScriptエンジンはReactNativeおよびその類似物で使用され、JSコードを迅速に実行し、ネイティブとJSの間でデータを交換します。
• OpenGL ES（またはDirectX）は 、インターフェイスをレンダリングするためにQt / QMLまたは同等のゲームおよびアプリケーションで使用されます。
• UIサブシステムは、アプリケーションのネイティブユーザーインターフェイスを担当します。これは、ReactNativeおよびXamarinに関連しています。

これらのサブシステムのより詳細な説明は、記事の最後にあるリンクのフルバージョンのマニュアルで、さまざまなオペレーティングシステムで見つけることができます。

クロスプラットフォームフレームワークアーキテクチャ

すべてのオペレーティングシステムには、クロスプラットフォームアプリケーションを起動するための特定の技術機能があります。 技術的な観点から最も簡単なのは、すべてのOSに備わっているWebViewの使用です（PhoneGapに関連）。 2番目のオプションは、OpenGL ESやC / C ++言語などの低レベルのメカニズムを使用することです-これにより、ほとんどのロジックをプロジェクト間（ゲームまたはQt）で共有できますが、Windows UWPでは限られた範囲で機能します（または機能しません）。 最小限のオーバーヘッドで完全にネイティブなユーザーインターフェイスとネイティブなパフォーマンスが必要な場合は、ここでトップレベルのシステムAPIの使用を開始します。このアプローチはXamarinとReactNativeで実装されます。

各フレームワークの機能と制限をよりよく理解するために、それらがどのようにアーキテクチャーとして設計され、どの可能性と制限が続くかを見てみましょう。

Phonegap

PhoneGapベースのソリューションはWebViewを使用し、実装の点では非常に単純です-組み込みのWebブラウザーと単一ページのHTMLを実際に表示するだけの小さなネイティブアプリケーションが作成されます。 ネイティブコントロールやAPIへの直接アクセスはありません。Webページ内のすべてのインターフェイス要素は、単にネイティブ要素としてスタイル設定されます。 システム機能にアクセスするために、Webブラウザ内にJSメソッドを追加し、それらを各プラットフォームのネイティブ実装に関連付ける特別なプラグインが接続されます。

ご覧のとおり、PhoneGapを使用すると、プラットフォーム間でほぼすべてのコードを共有できますが、Objective-CおよびJava（およびWindowsのC＃）でネイティブ部分を実装する必要があります。 アプリケーションのライフサイクル全体がWebView内を通過するため、Web開発者は水中の魚のように感じるでしょう。 プラットフォームの機能が必要になるまで、ここでiOSとAndroidを十分に理解する必要があります。

PhoneGap（別名Apache Cordova）は、人気のあるIonicフレームワークでも使用されています。Ionicフレームワークは、システム機能用の多数の既製のプラグインを提供します。

WebViewベースのアプリケーションのインターフェイスはネイティブではありませんが、HTML / CSSスタイルを使用する場合にのみ似ています。

PhoneGapでアプリケーションを開発するときは、HTML、JavaScript、CSS、Objective-C、Javaの経験、およびネイティブとクロスプラットフォームのパーツを統合するための優れたエンジニアリング知識が必要です。 ユーザーインターフェイスは1ページのHTMLの原則に従って構成されています。複雑なインターフェイスを備えた実際のアプリケーションでは、痙攣や速度低下が発生します（モバイルWebViewの機能は、メーカーによって異なる場合があります）。 ブリッジを介してデータを転送するには、Jsonでシリアル化/非シリアル化する必要があります。 一般に、アプリケーションの寿命全体がWebViewを通過するため、ブリッジはほとんど使用されません。

ネイティブ部分とWebViewの間で複雑なデータ構造とクラスを転送するには、それらをJSON形式でシリアル化/非シリアル化する必要があります。

最後に、PhoneGapは既に多数の既製のプラグインを備えた非常に成熟したソリューションであることに注意してください。

そのため、PhoneGapは、小規模ユーザー（社内のソリューションなど）またはプロトタイプを使用した単純なアプリケーション（最大15画面）の迅速な開発に推奨できます。

反応的

モバイルアプリケーションのクロスプラットフォーム開発における興味深いソリューションの1つは、Facebookで作成されたReactNativeです。 このフレームワークにより、JavaScriptを使用してネイティブインターフェイスとアプリケーションロジックを記述することができます。 JSエンジン自体は、ネイティブに匹敵するパフォーマンスを提供します。 ただし、ReactNativeアーキテクチャには、プラットフォームの機能とUIの操作速度を低下させるブリッジもあることを忘れないでください。

ReactNativeでアプリケーションを作成するとき、開発者は、JSエンジンとそのJSコードを初期化するObjective-C、Java、またはC＃でネイティブ部分を実装する必要もあります。 次に、JSアプリケーションは制御を独自の手に取​​り、ReactNativeの助けを借りて、ネイティブオブジェクトの作成とJavaScriptからの管理を開始します。 ReactNativeアーキテクチャにより、アプリケーションを再起動することなく（ホットリロード）JSコードを更新できることを追加する価値があります。 これにより、アプリケーションをAppStoreおよびGoogle Playに再公開することなく、クロスプラットフォームパーツを更新できます。 Npmのライブラリと多数のサードパーティプラグインを使用することもできます。

iOSの制限のため（JITを実装する方法はありません）、JavaScriptコードはオンザフライで解釈され、コンパイルされないことに注意してください。 一般に、これは実際のアプリケーションのパフォーマンスに大きな影響を与えることはありませんが、覚えておく価値はあります。

ネイティブ部分とJSエンジン間で複雑なデータ構造とクラスを転送するには、それらをJSON形式でシリアル化/非シリアル化する必要があります。

ReactNativeでアプリケーションを作成する場合、JavaScriptとiOSおよびAndroidの十分な知識が必要です。 公式ドキュメントによれば、ネイティブおよびクロスプラットフォームパーツの統合は簡単です。 ユーザーインターフェイスは完全にネイティブですが、JSコードからスタイリングするときに制限と機能があり、慣れる必要があります。 ブリッジを介してデータを転送するには、Jsonでシリアル化/非シリアル化する必要があります。 さらに、ブリッジはネイティブオブジェクトを制御するために使用され、非効率的に使用されるとパフォーマンスの低下につながる可能性があります（たとえば、手動モードでのアニメーション中にJSコードからネイティブUIオブジェクトのプロパティを変更することがよくあります）。

また、フレームワークの若さも考慮する必要があります-開発中にのみ学習するボトルネックまたはエラーがあります。 そしてほとんどの場合、Objective-CおよびJavaのネイティブ部分の実装が必要です。

そのため、ReactNativeは中程度の複雑さ（最大40画面）のアプリケーションの迅速な開発に推奨できます。チームには経験豊富なJS開発者だけでなく、iOS（ObjC / Swift）とAndroid（Java / Kotlin）の優れた専門家も含める必要があります。

---

GitBookでガイドの完全版を見つけることができます。

10月31日、VyacheslavはXamarin開発者向けのモバイルDevOpsウェビナーでも講演し、 テストと配信をスピードアップします 。 いつものように、参加は無料です。



レビューの第2部では、フレームワークを選択する際の一般的な推奨事項と同様に、XamarinとQtに焦点を当てます。 連絡を取り合い、コメント欄で質問してください！

著者について

Vyacheslav Chernikovは 、 Binwell 、Microsoft MVP、およびXamarin認定開発者の開発責任者です。 過去には、Nokia ChampionおよびQt認定スペシャリストの1人で、現在はXamarinおよびAzureプラットフォームのスペシャリストです。 彼は2005年にモバイル分野に参入し、2008年からモバイルアプリケーションを開発しています。Symbian、Maemo、Meego、Windows Mobileから始め、その後iOS、Android、Windows Phoneに切り替えました。 Mediumブログで Vyacheslavの記事を読むこともできます。



著者による他の記事は、 ＃xamarincolumnコラムにあります。



UPD： 2番目の部分はこちらです。