一般的に使用されるいくつかのハイブリッド アプリ フレームワーク ソリューション

モバイル オペレーティング システムが神の混戦を経験した後、BlackBerry OS、Symbian OS、Windows Phone などの初期のモバイル オペレーティング システムは競争力の低下により徐々に撤退しました。現在、市場には Android と iOS の 2 つの陣営しか残っていないため、iOS と Android のエンジニアは人気の人材となっています。しかし、2 つのシステムの違いにより、同じアプリケーションを開発するには 2 倍の工数がかかり、人件費が増加するだけでなく、開発チームが異なるため詳細な実装やアプリケーションの一貫性にも問題があります。

したがって、一度開発すれば 2 つのプラットフォームで実行できる技術ソリューションが緊急に必要とされています。ハイブリッド アプリは、ネイティブ アプリケーション環境と Web ブラウザーの両方で実行できるアプリケーションとして、必然的に誕生しました。今回は主流のハイブリッドフレームを5つご紹介しますので参考にしてください。

ここに画像の説明を挿入

次の主流のハイブリッド アプリ フレームワークについて簡単に説明します。

React Native: Facebook によって開発され、JavaScript と React を使用してネイティブ モバイル アプリケーションを構築します。これにより、開発者は同じコードベースを使用して iOS アプリと Android アプリを開発できると同時に、ネイティブに近いパフォーマンスのエクスペリエンスを提供できます。

Flutter: Dart 言語を使用して Google によって開発されました。Flutter は独自のレンダリング エンジンを使用して、自然なアニメーションを備えた高性能で美しいクロスプラットフォーム アプリケーションを作成します。

ここに画像の説明を挿入

Ionic: Web テクノロジー (HTML、CSS、JavaScript) に基づいており、Angular フレームワークを使用します。Ionic は、開発者がクロスプラットフォームのモバイル アプリケーションを構築できるようにする UI コンポーネントとツールのセットを提供します。

Xamarin: C# 言語を使用して Microsoft によって起動されました。Xamarin を使用すると、開発者は共有 C# コード ベースを使用して iOS および Android アプリケーションを開発し、ネイティブ アプリケーションと同様のパフォーマンスを提供できます。

PhoneGap/Cordova: Adob​​e がスポンサーとなっている Apache プロジェクトでは、HTML、CSS、および JavaScript を使用します。PhoneGap は Cordova の商用バージョンであり、どちらのフレームワークも Web テクノロジーを使用してクロスプラットフォーム アプリケーションを構築し、WebView を通じて Web アプリケーションをネイティブ アプリケーションとしてカプセル化します。

FinClip: 最後のサービスは国内の技術チームによって開発され、主に小規模プログラム コンテナ技術とそれをサポートする小規模プログラム アプリケーション管理プラットフォームを提供します。APP をこのコンポーネントに組み込むことで、小規模プログラムの操作とシェルフ管理機能を取得できます。プログラム コンテナは、Hybrid+ アプレットの開発計画を実現するために使用される数少ない商用プログラムの 1 つです。

さまざまなフレームワークにはそれぞれ長所と短所があり、適用できるソリューションも異なります。以下に、5 つの主流のハイブリッド ソリューションを示します。

ネイティブ + WebView ソリューション

これは、最も一般的なハイブリッド シナリオの 1 つです。アプリケーションの主要なフレームワークはネイティブ コードによって構築され、WebView コンポーネントは Web ページの表示や Web アプリケーションの読み込みのためにアプリケーションの一部に埋め込まれています。Web ページは WebView を通じて実行され、ネイティブ コードと通信できます。このようにして、開発者は Web テクノロジ (HTML、CSS、JavaScript など) を使用してアプリケーションの一部を構築しながら、ネイティブ コードを使用してアプリケーションのコア機能とパフォーマンス要件を処理できます。

ただし、Webview には欠点もあり、Web アプリケーションのエクスペリエンスはネイティブ アプリケーションのエクスペリエンスには達しません。ただし、開発効率は高く、コア以外のビジネス ページを実行するために多くのアプリで使用されています。

純粋な WebView ソリューション

このシナリオでは、アプリケーションは、ネイティブ コードをあまり使用せず、ほぼ完全に Web テクノロジを使用して構築されます。アプリケーション全体は基本的に、WebView に埋め込まれた Web アプリケーションです。このソリューションの利点は、Web テクノロジーを使用してクロスプラットフォーム アプリケーションを迅速に開発できることですが、欠点は、WebView のパフォーマンスと機能によって制限される可能性があり、ネイティブ アプリケーションの利点を十分に活用できないことです。

初期のフォンギャップなどの一般的なフレームワークは主に Web 開発であり、カメラ、アドレス帳、位置情報、ストレージ、その他の機能などのネイティブ機能をネイティブ プラグインを通じて提供します。現在、開発用に angular、react、および vue フレームワークをサポートする ionic フレームワークが一般的に使用されています。

ネイティブ + アプレット ソリューション

ミニ プログラム ソリューションは WeChat によって最初にリリースされ、大規模に使用される必要があります。このソリューションは、ネイティブ アプリとアプレット (WeChat アプレット、Alipay アプレットなど) を組み合わせたものです。アプレットは、特定のプラットフォームで実行できる Web テクノロジーに基づく軽量のアプリケーションです。ネイティブ アプリケーションでは、アプレットのインターフェイスを埋め込むことができ、ネイティブとアプレット間の対話は通信ブリッジを介して実現できます。これにより、開発者はアプレットの開発速度とネイティブ アプリケーションの機能とパフォーマンスを最大限に活用できます。

WeChat ミニプログラム ソリューションが徐々に成熟するにつれて、Alipay ミニ プログラム、Baidu ミニ プログラム、Toutiao ミニ プログラムなどの主要な国内メーカーのアプリもこのソリューションを適用しています。しかし、大手メーカーの小型プログラムコンテナは現状では自社開発であり、外部利用は公開されていない。

Web テクノロジー変換ネイティブ コンポーネント

このシナリオでは、開発者は Web テクノロジー (React Native、NativeScript など) を使用して、ネイティブ アプリケーションで使用できるネイティブ コンポーネントを構築します。このようにして、開発者は使い慣れた Web テクノロジーを活用してインターフェイスと特定の機能を構築し、それらをネイティブ コンポーネントに変換してパフォーマンスとエクスペリエンスを向上させることができます。

React Native は、ネイティブ アプリケーションと混合して開発することも、React Native のみで開発することもできます。今後、多くのアプリでも RN ハイブリッド ソリューションが使用されますが、Web ビュー ページの数は少数になります。

Flutter セルフペイント エンジン

React Native は完璧なソリューションではありません。JS を使用して UI インターフェイスを記述し、レンダリング時に JS をネイティブ UI に変換するため、複雑な計算、大量のデータ、またはアニメーションを実行すると、特定のパフォーマンスの問題、アプリケーションの消費電力の増加が発生します。またはページのフリーズやその他の問題。

Flutter の出現により、このすべてが覆され、js を使用してネイティブ コンポーネントを変換する代わりに、Google の dart 言語と独自の Skia レンダリング エンジンを使用して UI インターフェイスを開発します。これはブラウザの開発に相当し、uiコンポーネントを開発するための言語(dart)やAPIも全て独自に規定されているため、パフォーマンスの高さが最大のメリットとなり、ネイティブ開発とほぼ同等の開発が可能です。経験。

Flutter は当初、Android と iOS の 2 つのプラットフォームのみをサポートしていましたが、現在では Web プラットフォーム、デスクトップ Windows、macOS、Linux アプリケーションだけでなく、スマート デバイス、ウェアラブル デバイス、車載デバイスなどの組み込みアプリケーションも追加されています。世界を制覇するパターンは結構ありますが、こういう製品を作れるのは Google だけなのではないかと思います。

おすすめ

転載: blog.csdn.net/POHOU23/article/details/132044922