2022年に選ばれた最高のプログレッシブウェブアプリフレームワーク

現在の採用ペースでは、あなたのような新参者は、PWAを構築するための強固な基盤を見つけるのが難しいと感じるはずです。 もちろん、そこには非常に多くの異なるPWAフレームワークがあり、それぞれに独自の特典があり、そこから選択することができます。

このため、フレームワークの選択プロセス全体をはるかに簡単に見つけることができる、包括的で選択された最良のリストを提供する必要があると考えています。

さっそく始めましょう。

PWA開発に最適なフレームワーク

1.角度

最初の急な学習曲線を通過した後、Angularは作業するのに最適なフレームワークです。 本質的に完全にモジュール化されており、各Angular要素は他のフレームワークを使用して構築されたプロジェクトと完全に互換性があります。 Angularを使用した開発プロセス全体も、単調で反復的なタスクを処理する手間を省くように構築されているため、はるかに簡単になります。 Angularを使用して構築されたプログレッシブWebアプリは、独自のコンパイル方法であるAhead of Time（AOT）の恩恵も受けています。これにより、ブラウザーがアプリをダウンロードして実行する前に、Angular HTMLおよびTypeScriptコードを効率的なJavaScriptコードに変換することで、アプリケーションのレンダリングを高速化できます。

長所：

• よくレイアウトされた方法論
• 開発者の大規模で活発なコミュニティ
• 大規模プロジェクトに適した複雑なインフラストラクチャ
• 選択できるサードパーティの拡張機能の優れたアーカイブ
• 独自の優れたコンセプトで速度とセキュリティを最適化–「事前コンパイラ」
• コードの効率とモジュール性を高めるための依存性注入
• 完全にモジュール化された要素

短所：

• TypeScriptの理解が必要です
• 急な学習曲線
• SEOに対応していません

Angularを使用して構築されたライブPWAプロジェクト：Corona Statistics、Google Cloud

2.反応する

Angularコミュニティは大きいかもしれませんが、Reactコミュニティへのキャンドルはありません。 プログレッシブウェブアプリの開発分野では、Reactは、「Create a new React app」ジェネレーターと、PWAをWebの新しい標準にするためのすべてのイニシアチブにより、一級市民として広く認識されています。

また、ReactがPWA開発者の間で非常に人気がある理由については、Angularのような本格的なフレームワークではなくライブラリであるという性質により、Reactが開発の柔軟性を高める方法と大きく関係しています。 つまり、AngularのModel-View-Controllerモデルと比較すると、ReactライブラリにはViewしかなく、仮想DOMサーバー側レンダリングを使用してJavaScriptWorksにHTMLを取り込むことしかできません。

長所：

• 習得が容易：Reactの構文は単純で、多くのHTML作成スキルが必要です。
• インタラクティブで魅力的なPWAを作成するための鍵となる、適切なサーバー側レンダリングのサポート
• 開発の柔軟性の向上
• 仮想DOMとさまざまなレンダリングの最適化を使用しているため、パフォーマンスの面でトップの1つです。
• オープンソースライブラリと人気—世界中のReact開発者の巨大なコミュニティによって毎日貢献が行われています

短所：

• HTMLの記述と追加を容易にするJSXの理解
• ドキュメントの欠如
• SEOに対応していません

Reactを使用したライブPWAプロジェクト：スターバックス、Twitter Lite

読むことをお勧めします：

• [チュートリアル]React、Node.js、Firebaseを使用して最初のPWAを作成する
• プログレッシブウェブアプリ：インスピレーションを得るための実際のブランドからの12の例

3. Vue

Reactと同様に、VueJSはそのコアで多くの類似点を共有しており、どちらも実際のDOMを軽量かつ効率的に表現するために仮想DOMを使用しています。 それらが異なるのは、Vueが既存のWebテクノロジー（HTMLとCSS）を採用して改善する方法ですが、Reactは主にJavaScriptを使用するより高度なルートを採用しています。 また、フロントエンドの初心者がVueでPWAを学び、開発するのに慣れ親しんだ時期であると感じるかもしれないのもこの理由によるものであり、その結果、Vueの学習曲線は初心者にとってより寛容になります。

長所：

• 最も習得しやすい
• まともなドキュメント
• JSXおよびTypescriptと組み合わせて、最良の結果を生み出すことができます
• アニメーション
• Virtual-DOMによるレンダリングパフォーマンスの向上

短所：

• 柔軟性が高すぎる：大規模なプロジェクトでは、報告された未解決の統合の問題が多すぎます
• 小さな開発チーム

Vueを使用して構築されたライブPWAプロジェクト：Zadig＆Voltaire、Tally Weiji

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

4.正確に

Reactの軽量でパフォーマンス指向の代替手段として利用できるPreactは、軽量で高速であり、ほとんどのニーズを満たす必要があるため、PWA開発に理想的なフレームワークです。 また、PWAコミュニティ内で非常に優れており、推奨されている理由は、Reactと完全に互換性があり、ReactからPreactへの移行は、既存のコードに互換性レイヤーpreact-compatを実装するのと同じくらい簡単だからです。

長所：

• 軽くて速い
• Reactと同じES6APIを使用し、シームレスな互換性を可能にします
• 箱から出してすぐに優れたPWAパフォーマンスを提供するまさに機能するPreactCLI
• 独自のサーバー側レンダリング、ルーティング、およびアドオンが付属しています

C ons：

• Preactの多くの「革新」は
• Reactコンポーネントまたはパッケージを使用するにはpreact-compatが必要

Preactを使用したライブPWAプロジェクト：公式ウェブサイトはPreact PWA、コード、コメントです

5. PWABuilder

PWAの採用を推進するためにMicrosoft自身によって設立された、PWABuilderは、Webサイトを複数のプラットフォーム間で高速で機能的で魅力的なPWAに変換するという、最高の機能を発揮するように構築されています。 最近リリースされたPWABuilder2.0は、WebKitによって駆動されるMacデスクトッププラットフォームにも公式サポートを拡張しています。 このフレームワークは、Microsoft StoreやMacなど、不可能な場所での可用性を含め、クロスプラットフォームのPWAを作成することを目的としています。 はい、macOSは、最近リリースされた2.0バージョンのPWA Builderが、WebKitを利用したブラウザーへの公式サポートを拡張したためです。

長所：

• 直感的で包括的な構築/変換プロセス
• 広範なドキュメント
• 専任のマイクロソフトチームによる支援
• Web開発にVuejsを使用し、
• Vue.jsとNode.jsを使用して構築

短所：

• 制限された柔軟性
• 物事の管理を少し難しくする可能性のある自動化されたプロセス

結論

これでリストは終わりです。 フレームワークの選択は、後でPWAの速度と応答性を決定する最も重要なステップです。 PWA開発に間違ったフレームワークを選択したことを後悔したくないので、今すぐさまざまなオプションを検討することをお勧めします。これは、リソースだけでなく、多大な不要なコストが発生するためです。

サイトがMagentoストアの場合、ここSimiCartでは、Magento PWA Studioを使用したPWAの実装を専門としています。これを使用すると、ストアの最終結果が高速で、簡単で、魅力的であることが保証されます。