PWAとFlutter：詳細な比較

公開: 2020-07-10

目次

これらの技術の間で起こっているすべての複雑さで、2つの技術（プログレッシブウェブアプリとフラッター）の違いを学ぼうとすると、最初は少し混乱するかもしれないことは理解できます。 結局のところ、これらは理論的には非常によく似ています。どちらも1つのコードベースを使用して、デバイス間で魅力的なエクスペリエンスを提供するために使用できるからです。

これら2つを区別するために、今日は、これら2つのテクノロジーの動作方法から実際の使用法まで、これら2つのテクノロジーについて詳しく説明します。 すぐに始めましょう：

簡単な概要

プログレッシブウェブアプリとフラッター：概要

PWAとは何ですか？

簡単に言うと、プログレッシブWebアプリは、アプリのように見えるWebサイトです。 このテクノロジーは、Webアプリケーションとネイティブアプリケーションの両方の最高の機能を組み合わせたものです。つまり、PWAを使用するユーザーは、プッシュ通知やジオロケーションなど、これまでネイティブアプリ専用だったすべての機能を引き続き利用できます。 Webからの最高の機能

これは有望な新技術です。 また、最近PWAをWindowsにプッシュしたことで、Microsoftを含むすべての大企業から大量に採用されたことと相まって、今後はPWAがさらに増えることになるでしょう。

Flutterとは何ですか？

開発におけるピクセルパーフェクトな機能で知られるFlutterは、Googleが提供する最新のオープンソースSDK（ソフトウェア開発キット）であり、ネイティブアプリケーションのルックアンドフィールを備えたモバイルアプリを作成したい場合に役立ちます。利用可能なクロスプラットフォーム。 つまり、Flutterアプリは、単一のコードベースを念頭に置いて構築されているため、開発コストが大幅に削減されます。

これはプログレッシブウェブアプリとよく似ているように見えるかもしれませんが、これらすべてのネイティブアプリエクスペリエンスを可能にする基本的なメカニズムは大きく異なります。

詳細に入る

言語

プログレッシブウェブアプリは、前述のように、ウェブの新しい標準に似ており、コーディングする必要のあるプログラミング言語に関する厳密な規則はありません。ただし、基本的にはウェブのテクノロジーであるため、ウェブ- JavaScriptのようなベースの言語は、依然としてPWA開発の基本です。

一方、FlutterはDartプログラミング言語を使用します。 Dartは完全にオブジェクト指向のプログラミング言語であり、Cベースの構文スタイルを備えているため、同様の構文スタイルに精通していれば、簡単に習得して習得できます。 さらに、DartはARMおよびx86コードにコンパイルでき、新しいバージョンのFlutterを使用すると、DartコードをWeb上で効果的に実行できるように、JavaScriptにトランスパイルできることも期待できます。

複雑

PWAは古くて成熟した言語であるJavaScriptに基づいているため、選択できるJavaScriptフレームワークとライブラリが多数あるため、学習曲線がより寛容になることが期待できます。 はるかに新しい言語であるFlutterは、UIからロジックコードまですべてがFlutterで多かれ少なかれ混ざり合っているように見えるため、一見すると少し複雑に見える可能性があります。 そして、すべてが基本的にFlutterのウィジェットであるため、異常に大きく、深く、複雑な「ウィジェットツリー」になってしまう状況に陥ることがあります。

パフォーマンス

パフォーマンスに関して言えば、これら2つは互いにつま先で一致しており、予想されるような一方的な一致ではありません。 Flutterアプリと比較した場合、ネイティブコードと直接「通信」しようとすると、通常のPWAのパフォーマンスが少し低下するはずです。これは、PWAがデバイスの基盤となる機能にアクセスするためにJavaScriptブリッジを使用する必要がある場合が多いためです。たとえば、GPS、カメラなど。

ただし、ベンチマークを見ると、 NodeJSなどのJavaScriptフレームワークが、Dart（Flutterアプリのバックボーン）よりも優れているとは言えない場合もありますが、同等のパフォーマンスを発揮できることは明らかです。

ベンチマークnodejsとdart
NodeJS （人気のあるPWAフレームワーク）は、マルチスレッドワークロードでDartよりも大幅に優れたパフォーマンスを発揮します[出典]

これは、言語自体がシングルスレッドであるにもかかわらず、JavaScriptが最新のCPUのマルチコアの性質をより有効に活用し、ワークロードをより均等に分散できるという事実によるものです。 NodeJSによって導入された最近のworker_threadsモジュールにより、JavaScriptプロセスの並列実行にスレッドを使用できるようになり、JavaScriptはCPUを集中的に使用するワークロードをより適切に処理できるようになり、Dartなどの言語を実際に打ち負かすことができます。

ワーカースレッド図-NodeJS
ソース：Nodesource

特徴

Flutter（モバイルアプリのクロスプラットフォーム開発用に特別に作成されたSDK）が、Webのテクノロジーに基づいて構築されたPWAよりもはるかに機能的であることは間違いありません。 Flutterアプリはシステムとより緊密に統合されているため、デバイスのよりネイティブな機能を活用できます。

さらに、全体的なユーザーエクスペリエンスに関しては、Flutterは、iOSプラットフォームとAndroidプラットフォームの両方のユーザーが同じシームレスなエクスペリエンスを体験できるピクセルパーフェクトな哲学を採用しているため、ここで優位に立っています。

これは、ネイティブプラットフォームコンポーネントを使用する他のほとんどのフレームワークとは異なり、Flutterが独自のUIコンポーネントをレンダリングするという事実によるものです。 このように、Flutterアプリはデバイス間ではるかに一貫性がありますが、その結果、通常のFlutterアプリのサイズは通常のPWAよりも大幅に大きくなります。 シンプルな「Hello、world！」 たとえば、Flutterアプリのサイズは7MB以上にすることができますが、同じコンテンツのPWAが1MBを超えることはありません。

ユースケース

では、これらのいずれかをいつ選択する必要がありますか？ まあ、これは難しいところです（彼女が言ったことです）。どちらも、異なるプラットフォームや異なるデバイス間でほぼ同じユーザーエクスペリエンスを提供できるからです。 重要な点は、これらのテクノロジーのどの長所をより好むか、つまりリーチまたはユーザーエクスペリエンスです。

当然のことながら、PWAはWebテクノロジに依存しているため、幅広い対象者にリーチでき、Microsoft Storeでも利用できるため、毎月7億人近くのアクティブユーザーがいるWindows10インストールベース全体にリーチを効果的に拡大できます。

一方、Flutterアプリは、そのピクセルパーフェクトな哲学により、AndroidとAndroidの両方に必要なコードベースが1つだけであるため、ビジネスにとって費用対効果の高いソリューションでありながら、アプリ内エクスペリエンスを非常に魅力的にすることができます。 iOSプラットフォーム。

例

私たちが収集したPWAとFlutterアプリの中で、これらはそれらの機能を最もよく表すことができると私たちが考えるより顕著なものです。

フラッター—ニューヨークタイムズ

Flutterは、その可能性がNew YorkTimesのKENKENゲームの新しいFlutterWebバージョンで検証されたため、ごく最近、2019年半ばに新しい章を開始しました。

KenkenFlutterWebアプリ
出典：Flutterはすべてのものです

FlutterアプリのWebバージョンの実現に取り組んできた開発者にとって、これは、Flutterフレームワークが最大限に活用されたときに何ができるかを示しているので素晴らしいニュースです。

PWA-Twitter Lite

Twitter Liteは、PWAが最も得意とすることを実行するため、これまでで最も成功したPWA実装であると言えます。つまり、デバイス間で魅力的なアプリのようなエクスペリエンスを提供します。 Twitter PWAを体験したいユーザーは、デスクトップ、モバイル、タブレットなど、考えられるすべてのデバイスでアプリを起動できます。

また、同じパフォーマンスのFlutterアプリと比較した場合、最高のパフォーマンスを発揮するPWAの主な違いは、PWAの合計サイズがデバイス上で2MBを超えないようにする必要があることです。

Twitter Lite PWA
Twitterプログレッシブウェブアプリ

彼らのウェブサイトをPWAに変換した後、Twitterは印象的な結果を見ました。 数字はそれ自体を物語っています：

  • バウンス率が20％低下し、
  • セッションあたりのページ数が65％増加し、
  • 送信されたツイートが75％増加しました。
 関連記事：インスピレーションを得るための12のプログレッシブウェブアプリの例

Flutter PWA、それは可能ですか？

FlutterのWebサポートはすでに進行中の議論であり、ベータ段階にあります。 FlutterをWebで利用できるようにするプロセスは、モバイルアプリケーションで使用されるARMマシンコードにコンパイルする代わりに、DartをJavaScriptにコンパイルするのと同じくらい簡単です。

それでも、これらすべてを達成するのを少し難しくするいくつかの複雑さがあります。 しかし、上記のNew York TimesのKENKENゲームで観察されたように、Flutterアプリの適切なWeb実装を作成することは可能であり、FlutterPWAは近いうちに登場する可能性があります。

結論

どちらも比較的新しいテクノロジーであり、多くの可能性を秘めているため、より多くのオプションを検討し、どちらが開発ニーズに最適かを自分で確認することは価値があるかもしれません。

SimiCartは、Googleが認めたPWA開発エージェンシーであり、Magentoストアに次世代のショッピング体験をもたらす準備ができています。

simicartPWAを探索する

続きを読む：
PWA vs Electron：詳細

PWAとは何ですか？ プログレッシブウェブアプリについて知っておくべきことすべて

Magento PWA Studio vs Vue Storefront：どちらがあなたに適していますか？