Flutter vs. React Native – 2023 年に最適なモバイル アプリケーションは?

公開: 2022-09-23

モバイル開発は絶え間なく成長している分野であるため、市場が加速する中、モバイルアプリ所有者の多様なニーズを満たす堅牢なフレームワークが必要です。 特に世界中のモバイル ユーザーからの需要が加速していることから、市場規模は 2014 年の 977 億ドルから 2018 年には 3,650 億ドルに膨れ上がり、約 38 億人と推定されています。この時価総額は、さらに 9,350 億ドルに成長すると予測されています。そのため、企業は単一のコードベースを使用して複数のプラットフォームに簡単に展開できるサービスを拡張しています。 これは、ネイティブ開発の問題、つまり同じアプリを同じプラットフォームでそれぞれのネイティブ技術を使用して開発することは、時間と予算を浪費するという問題を解決するクロスプラットフォーム開発技術です。 さまざまなオペレーティング システムのさまざまなバリアントに対して、2 つ以上の異なる開発チームを同時に雇って、同じアプリケーションを構築することを想像してみてください。 不必要に複雑に聞こえますよね?

したがって、現在、企業は 2 つの主に支配的なオペレーティング システムに重点を置いています。71.93% の市場シェアを持つ Android と、27.47% の市場シェアを獲得する iOS です。 Codename One、Native Script、Kotlin、React Native、Flutter など、アプリケーションを開発するためのソフトウェアは数多くあります。 後者は最も人気のあるものです。

このブログでは、企業がクロスプラットフォーム アプリケーションを開発するために最適に活用できる、両方によって提供される機能の属性を推定しようとします。

Flutter vs. React Native vs. Native: 2023 年にはどちらのモバイル アプリケーションが優れているか?

研究の背後にあるインスピレーション

Element8では、テクノロジー主導型ソリューションの進行中のトレンドを掘り下げて、クロスプラットフォーム モバイル アプリ開発に最適なモバイル アプリケーション Flutter または React Native (または Native) を見つけます。 物議を醸すように、React Native を使用して毎日複数の計算を実行することを否定する人が多いですが、この場合、CPU 負荷の高いタスクは Flutter または Native アプリの方が適切に実行されます。

これが、この投稿で、通常のモバイル アプリ ユーザーに大きな影響を与えている UI のパフォーマンスを分析するために、より深く掘り下げることにした基本的な理由です。

UI パフォーマンスの調整は複雑であるため、すべてのプラットフォームで同様の方法で同じ機能を実装するには、専門家の助けが必要です。 私たちは、その精度が世界的に認められている一連のテスト ツールを選択します。これらのツールの多くは現在も (主に React Native および Native プロジェクトで) 実行されているため、疑いの余地がなく、完全に客観的な状態を維持できることを保証します。

UI アニメーションは、さまざまなプラットフォームでさまざまなツールを使用して行われるため、便宜上、すべてを各プラットフォームがサポートするライブラリに分類して合理化しました。 テスト結果は、実装するために採用されたアプローチによって変化する可能性があります。 それでは事例を見ていきましょう。

ハードウェア情報:

テスト目的で、Samsung Note 7 と iPhone 6s を使用しました。

レポリンク:

テスト ケース 1 — リスト ビューのベンチマーク

React Native と Flutter を使用して Android と iOS の両方で同様の UI をテストし、Android で RecyclerView.SmoothScroller を使用して自動スクロール速度も使用しました。 iOS と React Native の両方で、タイマーとプログラムによるスクロールによる位置へのアプローチを利用しました。 Flutter では、リストを簡単にスクロールするために ScrollController を使用しました。 ここでは、最終的にリスト ビューで 1000 以上を取得し、最後のリスト要素に到達するのに同様のスクロール時間を取得した各ケースを示します。 また、プラットフォームごとに異なるライブラリで画像キャッシュを利用しました。 詳細はソースコードで明らかにされています。

この場合に使用されるサードパーティ ライブラリ:

アンドロイド

画像の読み込みとキャッシュ — Glide

iOS

画像の読み込みとキャッシュ — Nuke

画像の読み込みとキャッシュ — React-native-fast-image

  1. すべてのテストでまったく同じ FPS が示されました。
  2. Android ネイティブは、Flutter や React Native と比較して、ほぼ半分のメモリを使用します。
  3. シリアライゼーションとデシリアライゼーションでのリソースの浪費を誘発する JS とネイティブ コードの間の JSBridge の適用により、React Native での CPU の活用は比較的大きくなります。
  4. バッテリーの悪用では、Android ネイティブは優れた結果をもたらしますが、React ネイティブは Android と Flutter の両方で大きく遅れをとっています。 アニメーションを連続して実行すると、React Native でより多くのバッテリー電力が消費されます。

iPhone 6s テスト

  1. FPS の結果では、iOS で IoT コンパイルを使用できないため、Flutter と Swift が React Native よりもはるかに優れています。
  2. メモリ消費量では、Flutter とネイティブはほぼ同じですが、それでも CPU に負担がかかります。 このテストでは、React Native は Flutter やネイティブに大きく遅れをとっています。
  3. Flutter は CPU を使用しますが、iOS ネイティブは積極的に GPU を使用します。 それに加えて、Flutter での調整も CPU の負荷を増加させます。

テスト ケース 2 — 重いアニメーション

最近では、Android および iOS で実行されている携帯電話の大部分に、強力なハードウェアが搭載されています。 ほとんどの場合、通常の業務アプリでは fps の低下は感じられませんでした。 そのため、fps が低下する可能性のある重いアニメーションをテストする準備をしました。 Android、iOS、React Native で Lottie を使用して作成されたベクター アニメーションを利用し、Flutter の Flare で使用する同じアニメーションを大文字にしました。

Flutter のテスト用に、Android、iOS、React Native、Flare 用の Lottie を介してアニメーションを実行します。

アンドロイド

グリッドからアニメーションを 1 つでも削除すると、Flutter で FPS が最大 40% 増加することがわかりました。 Flare は非常に重く、このタイプのタスクには最適ではないという結論に達したため、Flutter で FPS が大幅に低下しました。

これを非難する:

  1. Android と React Native は同様に機能します。 Lottie for React Native がネイティブの手段 (16 ~ 19% の CPU、30 ~ 29 FPS) を利用していることは明らかです。
  2. フラッターは、パフォーマンス中に少しジャグリングしましたが、その結果には驚くべきものでした。 (12% の CPU と 9 FPS)。
  3. Android は最小のメモリ容量 (205 Mb) を必要とします。 React Native には 280 Mb、Flutter には 266 Mb が必要です。
  4. コールドアプリが起動しました。 Indicator は、ここで 4 秒かかる Android Native および React Native と比較して、Flutter を 2 秒リードします。
iOS
  1. このテストでは、iOS と React Native の結果はどちらも最小限のパフォーマンスであり、Lottie for React Native がネイティブの手段を使用しているため、非常に似ているように見えます。
  2. Flare と Flutter は引き続き驚きをもたらしますが、Flare には確実に道があります。
  3. iOS ネイティブは、135 Mb を必要とする React Native と 117 Mb を必要とする Flutter に比べて、比較的少ないメモリ スペース (48 Mb) を使用します。
  4. コールドアプリが起動しました。 iOS と React Native は約 10 秒かかりますが、インジケーターは Flutter をリーダーにします (2 秒)。

注: ここで Flutter を使用してこのケースで使用されたライブラリは、他のものと比較してはるかに重く、より多くのプラットフォームで使用されているため、fps が低下する可能性があります。

テスト ケース 3 — 回転、スケーリング、フェードを使用した、より重いアニメーションのテスト

ここでは、200 枚の画像をアニメーション化するプロセスのパフォーマンスを比較するためにテストしました。 また、スケールの回転とフェードのアニメーションも同時に実行しました。

アンドロイド
  1. Native は、効率的なメモリ消費で最高のパフォーマンスを発揮しました。
  2. Flutter は快適な作業に十分なパフォーマンスを発揮しましたが、Native と比較して 2 倍のメモリを消費しました。
  3. React Native — 低いパフォーマンスを示しました。
iOS
  1. iPhone 6s は、3 つのケースすべてで fps をまったく低下させないほど強力です。
  2. ネイティブはより少ないリソースを使用しましたが、より多くの GPU を使用しました。
  3. Flutter は GPU を使用するのに対し、React Native はレンダリングに高い CPU 容量を使用します。
  4. React Native はもう少し多くのメモリを使用しました。

評決

通常のビジネス アプリは、小さなアニメーションと光沢のある外観を備えており、多くの技術を必要としません。 しかし、いくつかの重いアニメーションを実行する必要がある場合、Native は実際にそれを実行するための実際の機能を提供します.

Flutter と React Native について言えば、CPU を大量に使用する操作で React Native を使用することはお勧めしませんが、Flutter は CPU とメモリの両方の観点からそのようなタスクに最適です。

さらに、選択するツールは、特定の製品とビジネス ケースによって異なります。 単一プラットフォームの MVP を構築しようとしている場合は、ネイティブを優先しますが、Flutter アプリはすべてのプラットフォームと互換性があることを常に覚えておいてください。 今日でも、Flutter は、特に開発予算が限られているにもかかわらず、アプリケーションの適切なパフォーマンスを求めている場合に、ネイティブ開発ツールの深い競争を生み出しています。

各テクノロジーの実装とベンチマークに影響を与えるいくつかの要因があり、特定のプラットフォームの多くの真の専門家は、これらの推奨ツールセットからさらに多くのことを引き出すことができるという事実を意識的に考慮しています. このプロセスを通じて透明性のある結果が得られるように、アプリごとに 1 つの環境を作成してテストし、単一のツール セットを作成してパフォーマンスを最大限の精度と明確さで測定できるように努めてきましたが、結果が気に入っていただければ幸いです。 モバイル チームと Flutter チームは、フィードバックや提案を喜んで受け取り、実行し、対応します。