あなたの会社に適したフロントエンドフレームワークを選択する方法

フロントエンドフレームの選択のキーポイント

スケール、柔軟性、オフラインサポート、サーバー側のレンダリング、フレームワークの成熟度を考慮して、適切なエンタープライズレベルのフロントエンドフレームワークを選択します。 実践的な経験は非常に重要であり、著者チームはAureliaを使用し、評価のために認証ページを構築するために反応しました。

Reactの最終的な選択は、主にその成熟、コミュニティのサポート、採用の容易さに基づいています。 Angular 2は、ほとんどの選択基準を満たしていないために排除されました。 VueとAureliaはうまく機能し、要件を満たしましたが、経験豊富な開発者を雇うことは究極の決定的な要因でした。

シンガポールの従業員福祉スタートアップCXAグループのコアネットワークプラットフォームを評価する際に、既存の老化したアーキテクチャを放棄し、フロントエンドをゼロから再構築することにしました。プラットフォームが直面している課題の1つは、CXAグループによってアジアの12の対象国でうまく機能するWebアプリケーションを作成することです。

プロジェクト配信の厳格な締め切りを考慮して、私は一連のフロントエンドJavaScriptフレームワークの評価を主導しました。大規模なエンタープライズプロジェクトのこのレベルの変化の機会はほとんどないため、評価プロセスで可能な限り徹底的になるよう努めています。

この決定は重要です。ビジネスが指数関数的に成長するにつれて、間違いを犯す余裕はありません。また、チームの誰も、私たちが検討しているどんなフレームワークでも重要な経験を持っていないことを考慮する必要があります。

スコープを絞ります

新しいフロントエンドフレームワークは毎日リリースされているようであるため、検討したフレームワークの範囲を削減するためにメタ分析を行いました。聞いたことや推奨されたフレームワークを含めて、Angular 2（聞いた）、Aurelia（聞いた）、Vue.js（推奨）、およびReact（推奨）を選択することになりました。

主要な要件のリストに基づいて、各ファイナリストフレームのランキングを測定します。一部の要件は、プロジェクトが必要とするものを知っていることに基づいていますが、他の要件は私たちがやりたいことを楽しみにしています。

柔軟性

選択したフレームワークには、さまざまな構成オプションが必要であり、比較的簡単にカスタマイズできます。これは、建築哲学に大きく依存しているようです。あなたがあなたに代わって建築上の決定を下すのか、それとも完全にオープンであるかです。

Angular 2はこの端にあり、あなたのためにあらゆる選択をします（State Server、Router、Handler）。これの利点は、すぐに開始するのが簡単であり、潜在的なコストは、モジュールが必要に応じて動作できず、どこにも行けないことです。

React、Vue、Aureliaはスケールの反対側にあり、必要に応じてコンポーネントを交換する機能を提供します。 AureliaとVueは、最初のセットアップで構成可能なボイラープレートを持っていますが、これは反応よりも重要な利点があります。

Vueのように、React自体は、何かを構築するために必要なもののほんの一部しか提供しません。そこから、多くの決定を下す必要があります。これは確かに困難です。 Reactが最初にリリースされて以来、導入プロセスを簡素化するために、さまざまなボイラープレート（React bulerplateおよびCreate React Appを含む）が作成されています。

Test Reactプロジェクトでは、特定のボイラープレートを放棄して直接掘り下げることにしました。参照コードだけでも、いくつかをインストールしました。このアプローチは確かに困難ですが、Reactスタックの各コンポーネントについて多くのことを学び、最終結果により自信がありました。

VueとAureliaは、学習曲線とモジュラー構造を減らしてラウンドに勝ちました。 Reactは、初期セットアップが大幅に困難であっても、いくつかの柔軟性ポイントを獲得します。

オフラインサポート

サービスワーカーなどのAPIを使用すると、リアルタイムまたは安定したインターネット接続なしでWebアプリケーションが実行される可能性があります。私たちのチームでは、この点であまり経験がありません。評価されたすべてのフレームワークが何らかの形のオフラインサポートを提供していることを確認することを除いて、私たちはそれを掘り下げていません。

軽量

クライアントに送信されたコードのバイトサイズは、帯域幅とプロセッサ時間の両方を含むブラウザのパフォーマンスに大きな影響を与えます。カスタムコードとサードパーティライブラリを追加すると、バイトサイズが大きくなり、大きくなるだけなので、小さく開始することが重要です。 CXAグループのターゲット市場は、帯域幅が非常に貴重な国にまで及ぶため、顧客にできるだけ少ないコードを提供することが重要です。

生産構成を反映したハードデータがないため、コアライブラリのサイズを調べて、少なくとも直面するものの感覚を得ました。実際の生産サイズは、ここに示されているものよりも大きいです。

Vueの開発者は、コアライブラリを印象的な23 KBに絞り込むために最善を尽くしました。 ReactとAureliaは中央にあり（それぞれ約42 kbと64 kb）、Angular 2は143 kbを超えるヘビー級のままです（州管理のためのRXJを含む）。

実際には、Vue、Aurelia、Reactの生産バージョンは互いに非常に近く、考慮することができます。 Angular 2は間違った方法で再び際立っています。

サーバー側のレンダリング

初期のシングルページアプリケーション（SPA）フレームワークは、すべてのコードをクライアントに送信するモデルに従いました。これは、ページの最初のレンダリングがクライアントに任され、最初のページの負荷が遅くなることに直接つながることを意味します。 SPAでのサーバー側のレンダリングの概念は、サーバー上の最初のレンダリングの負担をかけ、そのレンダリング後に他のすべてのコンテンツを遅らせることができます。

VueとReactは、プラグインを使用してサーバー側のレンダリングを追加します。 Angular 2は現在、普遍的な機能をコアに組み合わせる過程にありますが、その機能はVueまたはReactが提供するものと一致しません。 Aureliaは、開発の機能としてサーバー側のレンダリングをマークしますが、たとえ他のパフォーマンスのヒントを持っていても、実装のタイムラインがありません。

成熟度

エンタープライズレベルのWebサイトのフレームワークを選択する場合、幅広いコミュニティサポート、安定性、採用機能が非常に重要な要素です。 3年後もフレームワークがまだサポートされているかどうかを推測することは困難ですが、決定を下すために各フレームワークの現在の健康状態を検討することにしました。

フレームワークの最初の公開リリース日を表示すると、各フレームワークの堅牢性のアイデアが得られます。少なくとも理論的には、古いライブラリには、より良い範囲の機能性があり、主要なバグが少ないはずです。

Reactは簡単に勝ち、最初の公開リリースは2013年3月でした。 Vueは元々2015年10月にリリースされましたが、2016年9月のリリースまでピークに達しませんでした。 Aureliaは初心者であり、2016年8月にバージョン1.0に到達しました。

Angular 2は興味深いです。バージョン1とは大きく異なり、実際、2016年9月に初めてリリースされました。

この評価の一部には、リリース日自体だけでなく、各ライブラリの開発履歴を掘り下げることが含まれます。もちろん、ベータ版でさえ、長く安定した開発の歴史は、もちろん自信を高めます。

さまざまなチームメンバーが候補フレームワークの開発に注意を払ってきました。これにより、各フレームワークの全体的な安定性について少なくともある程度の理解が得られます。 Angular 2の問題のある開発履歴は、私たちがレビューするすべてのフレームワークの中で際立っており、重要な大幅な変更と不明確なリリース日があります。フレームワークは最終的に最終バージョンでリリースされましたが、その過程で本当に面倒でした。

成熟の究極の重要な側面（上記のように）は、経験豊富な従業員を募集する能力です。評価の枠組みと私たちが直面している急進的なタイムラインでのチームの経験が限られていることを考えると、経験豊富な開発者を募集したいと考えています。

しかし、特定の経験を持つ人々を雇うことは限られている可能性がありますが、それは私たちのような大規模なプロジェクトに影響を与えます。以前の要件の多くを満たすことができなかったため、この段階でAngular 2を排除しました。

残りのフレームワークについては、まず異なる求人検索Webサイトを検索し、各フレームワークの個別のジョブ広告を投稿しました。 AureliaやVueの求人広告は見つかりませんでしたし、アプリケーションを受け取ったこともありませんでした。対照的に、いくつかのReactジョブが見つかり、多くの高品質のアプリケーションを受け取りました。

その他の関数

リストの残りの部分（開発者ツールとユニットテストのサポート）は、表示されるすべてのフレームワークで利用できます。信頼できる開発者ツールがなければ、デバッグはほとんど不可能であり、ユニットテストは当社のようなエンタープライズクラスのアプリケーションにとってほとんど不可欠です。

実践的な経験

実践的な経験と比較することはできません。これを念頭に置いて、ほとんどの要件（アレリアと反応）を満たし、並行してコーディングを開始する2つのフレームワークを選択しました。この段階でVueを省略する正当な理由はありません。

指定されたタスクは、既存のアプリケーションの基本機能に一致する認証画面を構築することです。ログイン、APIを呼び出し、セッションを確立します。 2人のチームメンバーには、フレームワークが個別に割り当てられ、何が構築できるかを確認するために暦週が与えられました。

Aurelia Demoは、セットアッププロセスがより単純なため、より完全なものです。各セクションで行われた作業を選択した後、Reactスタック内にあるものをよりよく理解していると感じています。 Aureliaは、最初のセットアップの容易さの点でまだ簡単に勝ちます。

実際のコーディングのみに基づいて重要な結論を導き出すことはできません。おそらく唯一の驚きは、コードがどれほど似ているかです。これは、ECMAScript 6を使用するフレームワークの両方ともECMAScript 6に導入された構造的変化によるものです。

result

最終的に、私たちの選択は最も重要なことです。 Reactは私たちの基準の明確な勝者ですが、このような高品質のフレームワークが私たちが見ている競争の枠組みに存在するのを見るのは素晴らしいことです。

vueとAureliaは近くにいることが証明されました。 Vueは、より完全な機能リストでわずかにリードしていますが、要件を考えると、どちらかがおそらくうまくいくでしょう。時間のプレッシャーがない場合、採用はそれほど重要ではありません。ビューを含めるために実践的な作業を拡大します。

Angular 2は、私たちの選択基準のほとんどを満たすことができず、残念でした。その多くの利点にもかかわらず、それは明らかに私たちに合わない。

Reactを選択してプロジェクトの構築を開始した後、すぐにこれを再び行う可能性は低いです。あなたについては、私たちのリストにどのような基準を追加しますか？私たちは何を見逃しましたか、私たちはもっとうまくやったかもしれませんか？あなたのコメントと提案を楽しみにしています。

この記事は、スチュアート・ミッチェル、ラルフ・メイソン、ビルダン・ソフトの査読済みです。 SetePointのすべてのピアレビューアーズに感謝します。

あなたの会社の正しいフロントエンドフレームワークを選択する際のFAQ 当社に適したフロントエンドフレームワークを選択する際には、どのような重要な要因を考慮する必要がありますか？ 会社のフロントエンドフレームワークを選択する際に考慮すべきいくつかの重要な要素。まず、プロジェクトの要件を考慮してください。異なるフレームワークには賛否両論が異なるため、プロジェクトのニーズに合ったものを選択することが重要です。第二に、学習曲線を考慮してください。一部のフレームワークは、開発速度に影響を与える可能性のある他のフレームワークよりも簡単に学習できます。第三に、コミュニティとサポートを検討してください。強力なコミュニティは、問題が発生したときに貴重なリソースと支援を提供できます。最後に、フレームワークのパフォーマンスとサイズを検討します。軽量で高性能のフレームワークは、より良いユーザーエクスペリエンスをもたらすことができます。

フロントエンドフレームのサイズはパフォーマンスにどのような影響を与えますか？

フロントエンドフレームのサイズは、そのパフォーマンスに深刻な影響を与えます。通常、より大きなフレームワークには、より多くの機能と機能が備わっていますが、ロードして実行することもできます。これにより、特に遅いインターネット接続やデバイスが弱い場合、ユーザーエクスペリエンスが低下する可能性があります。一方、より小さなフレームは通常、より速く、より効率的ですが、特定の機能や機能がない場合があります。したがって、プロジェクトの要件に応じて、フレームワークのサイズとパフォーマンスのバランスをとることが非常に重要です。

人気のあるフロントエンドフレームワークとその利点は何ですか？

多くの人気のあるフロントエンドフレームワークがあり、それぞれに独自の利点があります。たとえば、Reactは仮想DOMと高性能で知られているため、複雑な動的Webアプリケーションに適しています。一方、Angularは、Webアプリケーションを構築するために必要なすべてを含む完全に機能的なフレームワークであり、大規模なプロジェクトに適した選択肢となっています。 Vue.jsは、その単純さと使いやすさで知られているため、小規模プロジェクトやフロントエンドフレームワークの新しい開発者に適した選択肢となっています。

フロントエンドフレームワークを選択する際のコミュニティのサポートはどれほど重要ですか？

フロントエンドフレームワークを選択する際には、

コミュニティサポートが非常に重要です。強力なコミュニティは、質問をして助けを得ることができるチュートリアル、ドキュメント、フォーラムなど、豊富なリソースを提供できます。さらに、大規模なコミュニティは、多くの場合、フレームワークが人気があり、広く使用されていることを示しており、より頻繁な更新と改善につながる可能性があります。

単一のプロジェクトで複数のフロントエンドフレームワークを使用できますか？

単一のプロジェクトでは、技術的に複数のフロントエンドフレームワークを使用できますが、これは通常推奨されません。各フレームワークには、物事を行う独自の方法があり、それらを混ぜると混乱と複雑さにつながる可能性があります。代わりに、通常、プロジェクトのニーズに最適なフレームワークを選択し、それに固執することをお勧めします。

フロントエンドフレームワークの学習曲線は、プロジェクト開発にどのように影響しますか？

フロントエンドフレームワークの学習曲線は、プロジェクト開発に深刻な影響を与えます。急な学習曲線を備えたフレームワークは、マスターに時間がかかる場合があり、開発の開始が遅れる場合があります。一方、穏やかな学習曲線を備えたフレームワークにより、開発をより速く開始できます。ただし、学習の容易さは、フレームワークを選択する唯一の要因ではありません。また、フレームワークの機能と、プロジェクトの要件にどれだけよく一致するかを考慮する必要があります。

Web開発におけるフロントエンドフレームワークの役割は何ですか？

フロントエンドフレームワークは、Web開発において重要な役割を果たします。これにより、コードが維持と拡張を容易にするための構造を提供します。また、一般的なタスクに事前に書かれたコードを提供するため、開発プロセスを高速化します。さらに、フロントエンドのフレームワークには、テストとデバッグのためのツールが含まれることが多く、コードの品質を確保しやすくなります。

使用するフロントエンドフレームワークをどのくらいの頻度で更新する必要がありますか？

フロントエンドフレームワークを最新の状態に保つことが非常に重要です。更新には通常、バグの修正、パフォーマンスの改善、新機能が含まれます。ただし、フレームワークを更新すると、既存のコードを壊す変更を導入することもできます。そのため、更新後にアプリケーションを徹底的にテストすることが重要です。一般的に言えば、新しい安定したバージョンがリリースされた直後にフレームワークを更新する必要があります。

モノリシックとマイクロフロントエンドのフレームワークの間で決定を下す方法は？

モノリシックとマイクロフロントエンドのフレームワークの間の決定は、プロジェクトの要件に依存します。モノリシックフレームワークは、必要なものすべてを1つのパッケージに提供します。これにより、開発を簡素化できますが、不必要な機能も含まれる場合があります。一方、MicroFrameworkは基本のみを提供するため、必要な機能のみを追加できます。これにより、より軽量で効率的なアプリケーションにつながる可能性がありますが、セットアップとメンテナンスにより多くの作業が必要になる場合があります。

フロントエンドフレームワークについて詳しく知るために、どのリソースがありますか？

フロントエンドのフレームワークについて詳しく知るために利用できるリソースがたくさんあります。オンラインチュートリアル、ドキュメント、コースは、開始するのに最適な場所です。 Stack OverflowやGitHubなどのWebサイトは、貴重な洞察や例を提供することもできます。さらに、多くのフレームワークには独自のコミュニティがあり、質問をして他の開発者から学ぶことができます。

以上があなたの会社に適したフロントエンドフレームワークを選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。