web-dev-qa-db-ja.com

ハイブリッドアプリ-Ionic vs NativeScript

私はかなり長い間モバイルの世界にいて、ネイティブAndroidとiOSアプリをすでに持っています。現在、当社はモバイルサイトを強化する計画を立てており、チームはAngular 2 + TypeScript + Ionic 2.非常に困難なことで、Ionic + Angularで登録フォームの開発を完了しました。 WebViewなしでハイブリッドアプリを開発するNativeScriptと、ネイティブUIコンポーネントを使用するため、人々はアプリのルックアンドフィールとパフォーマンスが良好になると言っています。

1つを選択するのは少し混乱しています。Angular + TypeScript + Ionic(html、js、css)または2. Angular + TypeScript + NativeScript(xml、js、css)

また、当社の長期計画は、iOSの単一のソース、AndroidとMobile Site

私を助けてください。

ありがとう

45
Mano

これは、あなたがやりたい仕事の量に依存するため、本当に主観的な質問/回答です。 :-)

まず、Ionic/Angularアプリでは、基本的に同じWebバージョンを同時に作成しています(つまり、ハイブリッドアプリ)。パフォーマンスcanは、実行している内容によっては深刻な問題になります。それほど単純ではない画面。多くのデータは、はるかに大きなパフォーマンスの問題を引き起こします。さらに、基本的に、すべてのデバイスとそれが実行されているOSに基づいてまったく異なる画面解像度を持つ小さなWebブラウザーにコーディングしているため、画面レイアウトはおそらく最も多くの問題を引き起こします。ネイティブのパフォーマンスに近づける必要がある場合; Ionicを高速化するためにできること(CrossWalkを使用するなど)があり、全体としてIonicで適切なWeb /ハイブリッドアプリを生成できます。

しかし、オッズは、ハイブリッドがネイティブのパフォーマンスに近いものになることはなく、実際にはネイティブアプリのように動作しようとするブラウザーで実行されるWebアプリであるため、実際にはネイティブアプリのように動作する可能性が非常に高いです。

現在、ネイティブのパフォーマンスやデバイス上でネイティブに実行できる機能を探している場合は、NativeScriptを使用することをお勧めします。ネイティブのパフォーマンスが得られ、すべてのネイティブコントロール(つまり、スローダウンなしで数千の複雑なアイテムを処理できる実際のListViewなど)にアクセスできますが、コストは2つの個別の画面と個別のcssを作成する必要があることですアプリ。

AngularまたはVueJSを使用する場合;実際のロジックは、NativeScriptとWebアプリの両方で共有できます。そして、これを行うには xPlat (Angular code sharing platform)のようないくつかの優れた方法があります。しかし、それらのすべてで、画面生成はまだ異なります。そのため、Webコンポーネント/画面には、Web mycomponent.html-> <div>{{somevalue}}</div>とNativeScript Angular mycomponent.html-> <Label text="{{somevalue}}"></Label>があります。そのため、2つの個別のスクリーンレイアウトファイルを作成する必要があるため、NativeScriptでより先行作業が必要になります。これは問題のように思えるかもしれません。しかし、実際には、これにより、携帯電話やタブレットの画面向けにネイティブモバイルバージョンをより適切にレイアウトできます。また、NativeScriptレイアウトでのカメラへのリアルタイムアクセスや、HTMLバージョンでの画像ファイルのアップロードボタンなどの追加オプションも開きます。

両方の技術を使用した人として、私はすべての新しいプロジェクトのためにNativeScriptキャンプにしっかりといます。しかし、一部の人々にとっては、Ionic/Phonegap/Cordovaを使用する有効なユースケースがまだいくつかあります。アプリが既にWebベースである場合、および/または実際に複雑なビューや大量のデータを表示する必要がない場合。実際、nStudioが提供するオープンソース xPlat プラットフォームは、IonicおよびNativeScriptターゲットの両方をサポートしています。これにより、サポートされているすべてのプラットフォーム間でコードを共有し、すべての時点で会社にとって最適な選択を行うことができます。

例えば; Ionic/Webビルドから始めます。全体的には基本的に同じものだからです。 xPlatコード共有を使用して、最終的に余分な人手/時間がある場合、および/またはより良いパフォーマンスが必要になった場合、アプリのモバイル部分をNativescriptに簡単にフェーズできます。

NativeScript w/Angularはコード共有を許可します。さらに、VueJSの大ファンであれば、NativeScript w/VueJSでもコードを共有できます。したがって、モバイルアプリケーションのネイティブパフォーマンスを維持しながら、会社が既に使用しているものに応じて、WebサイトとNativeScriptアプリ間でコードを共有する2つの優れた方法があります。

41
Nathanael

簡潔な答え

Ionicを使用すると、ハイブリッドアプリまたはプログレッシブWebアプリ。アプリの構造はHTMLで記述され、ビルドされたアプリは WebViews (アプリ内のWebサイトのようなもの)を使用しています。

NativeScriptを使用すると、本当にネイティブアプリを構築できますHTML DOMを使用しないでください、ターゲットとするプラットフォームのUIコンポーネントを学習する必要があります(例:iOS /Android)。ただし、ネイティブアプリは通常、ハイブリッドアプリよりも高速であり、カメラ、タッチ、カレンダー、通話などのハードウェア機能にすべてTypeScriptでアクセスできます/ JavaScriptコード。


長い答え

以下は、Danyal Ziaによる ブログ投稿 の抜粋です。完全なものを読むことをお勧めします。

イオン(2)

Ionic 2はハイブリッドモバイル開発フレームワークです...わかりました。では、ハイブリッド開発とはどういう意味ですか?ハイブリッドアプリは、アプリストアで見つけることができる他のアプリのように、同じ方法で(ダウンロードしてインストールすることで)実行され、ユーザーの操作は似ています。実際、ほとんどのユーザーはネイティブアプリとハイブリッドの違いをほとんど認識していませんアプリ。

ハイブリッドアプリの興味深い点は、WebViewを使用するネイティブアプリケーション内でホストされることです。これは、ブラウザーレスWebページローダーの一種です。 HTML、XML、CSSなどのウェブサイト言語を介して、カメラ、連絡先、ジャイロスコープなどのモバイル機能にアクセスできます。

Ionic 2はまだWebViewを使用します(前のIonicバージョン)と同じように、HTMLコードを= Androidactivities、したがって、ReactNativeおよびNativeScript(これについては後で説明します。)Ionic = 2ですが、ネイティブコンテナ内のWebViewでまだレンダリングされているため、技術的にネイティブではありません。

長所

  • ハイブリッドWeb開発のサポート。同じコードベースを使用して、Android、iOS、Windows Phone、およびWeb用のアプリケーションを開発できます。
  • 非常に高速な開発テストサイクル。コードを記述してブラウザでテストするので、エミュレータを大量にロードする必要はありません。
  • TypeScriptでコードを記述して、Angular 2からの移行を非常に簡単にします。
  • 同じ言語(TypeScript)を使用して、すべてのプラットフォームのアプリケーションを開発できます。
  • そのプラグインシステムにより、あらゆる種類のデバイスのネイティブ機能を使用できます。

短所

  • ネイティブコードに多くのコールバックを使用する必要がある場合、パフォーマンスの問題が発生する可能性があります。
  • すべてのデバイスで同じUIの外観は、ネイティブUIの外観を好む人にとっては大きな障害になる可能性があります。
  • 非常に高度なグラフィックスや高度にインタラクティブなトランジションの開発は、複雑な仕事になる可能性があります。

NativeScript

Telerikによって開発されたNativeScriptでは、開発にJavaScriptまたはTypeScriptを使用できるため、Angular 2より早い段階で、移行が簡単になりますTelerik以前に開発されたKendo UIで、タイトなAngularハイブリッドの統合アプリが、彼らは後で気づいた、真のクロスプラットフォームのネイティブ体験を提供してみませんか?

TypeScriptとAngular 2を使用すると、宣言型のスタイルを使用してモバイルアプリのコンポーネントを非常に簡単に作成できます。「一度書いて、どこでも実行」をサポートすると主張し、同じAngular 2コードは、ターゲットとするすべてのプラットフォームのUIに利用できますNativeScriptは、真のクロスプラットフォームです。つまり、100%ネイティブAPIアクセスであり、その使命は、同じコードベースを使用できるようにすることですすべてのプラットフォーム。

ReactNativeとは異なり、NativeScriptは、TypeScript/JavaScriptでコードを記述している場合でも、ネイティブUIコード(それぞれのAndroidおよびiOS電話)を使用します!パフォーマンス面を考慮すると、NativeScriptは本当にReactNativeのエッジ。これは、コンポーネントの作成にAngularJS 2構造を使用しているためです。

NativeScriptの最大の利点は、Telerikによって開発されていることです。これにより、プロが支援するため、将来的に新しい更新を受信し続けることが保証されます。世界中の開発者。そのため、商用アプリケーションを使用している場合、ReactNativeはオープンソースフレンドリーであり、ユーザーからの多くの貢献に依存しているため、ReactNativeよりもNativeScriptに依存できます。ただし、NativeScriptはオープンソースでもあります。

NativeScriptもReactNativeと比較して非常に成熟しています。既に2.0バージョンになっていますが、ReactNativeの場合はそうではなく、新しい更新を頻繁に取得しません。 NativeScriptはReactNativeよりも多くのコードを共有できるため、時間を節約できます。

長所

  • 真のクロスプラットフォームサポート。サポートされているすべてのプラットフォームのアプリを開発するための単一のコードベース。
  • 100%ネイティブAPIアクセス。 TypeScript/JavaScriptコードを使用して、カメラ、タッチ、カレンダー、電話などのハードウェア機能にアクセスできます。
  • Angular 2を使用するので、アプリケーションで以前のWebコンポーネントを簡単に転送できます。
  • Telerikからの非常に良いサポート。

短所:

  • 多くのプラグインをコンポーネントごとに個別にダウンロードする必要があります。すべてのプラグインが利用可能または検証されているわけではありません(つまり、徹底的にテストされています)。
  • アプリのサイズはReactNativeよりもはるかに大きく、Ionic 2.ユーザーのインターネット接続が遅い場合は、問題になる可能性があります。
  • NativeScriptではHTMLとDOMはサポートされていないため、アプリケーションのUIを構築するにはさまざまなUIコンポーネントを学習する必要があります。
33
Yulian

Nativescriptはハイブリッドアプリと混同しないでください。ハイブリッドアプリはWebview(Ionicなど)を使用するアプリであるため、Nativescriptはネイティブアプリです。両方のタイプの違いのどれか。

Ionicを使用すると、3つのターゲットすべてのビューが同じであるため、単一のソースを使用できます。

Nativescriptはネイティブ要素を使用するため、ブラウザとモバイル用に2つの異なるビューを実行し、ブラウザのAPIにはないがネイティブ側にある、またはその逆のJavaScriptコード間でいくつかの変更を行う必要があります。

使用の対象がアプリに依存します。

17
Marek Maszay

先ほど述べたように、遅ればせながら上記の優れた回答に追加するには、ビジネスも意思決定プロセスに入力を提供する必要があります。以下は、企業が答えるのに役立ついくつかの主観的な質問です。

  • 開発者リソースへの資金提供/特定はプロジェクトにどのような影響を与えますか?つまり、私たちが持っているもので間に合わせる必要があるのでしょうか?新しい人を獲得しますか?再訓練?ハイブリッドソリューションとネイティブソリューション、および既存のコードの使用が必要かどうかは、重大な影響を及ぼします。ネイティブまたはフロントエンドの開発者が多かれ少なかれ冗長になるソリューションを想像してください...

  • UI/UXがモバイルとWeb /レスポンシブ/ハイブリッド/ PWAで似ている場合と似ていない場合のビジネスへの影響は何ですか?ネイティブとウェブ/レスポンシブ/ハイブリッド/ PWAの間でカメラ、GPS、通知などのネイティブ機能にアクセスする多少異なる機能の影響についてはどうですか?

  • プラットフォーム間でアプリのパフォーマンスが異なる場合の影響は何ですか? (つまり、ネイティブが高速です)
  • 企業は、これらの各ソリューションの寿命と保守コストを評価しましたか?

応答は、レスポンシブ(grid/flexbox/bootstrapなど)、ハイブリッド(Ionicなど)、またはネイティブ(Nativescriptのようなもの、React Native、または純粋なosネイティブ)に移行する主要なドライバーです。

最後に、最終決定は、ビジネスと技術的な要因の組み合わせです。

1
MoMo