科学＆テクノロジー

最新のフロントエンド アプリケーションのアーキテクチャ |中くらい

クラシック アーキテクチャ — 多くの人がすでに使用しているアプローチです。通常、私たちは基本的なコンセプトに重点を置き、プロジェクトを次のように分割します。 「ページ」、 「コンポーネント」、 「ヘルパー」 等々。ただし、問題は、アプリケーションが成長するにつれて構造が崩れ始め、適切なコンポーネントやそのビジネス ロジックを見つけることが非常に困難になることです。これを例で見てみましょう。コンポーネントの過剰使用 (例)この例には、明らかに使いすぎていないページが 3 つあります。ただし、以下に示すすべてのコンポーネントが含まれる場合もあります。これらのコンポーネントを見ると、実際のことがわかります。 「カオス」🤯: 各コンポーネントは他のコンポーネントを積極的に使用し、コンポーネント間に依存関係を作成します。そのため、スケール変更や再利用が困難になります。これを使用した別の例を次に示します リダックス 状態マネージャー:分散アプリ ロジック — Redux ステート マネージャー (例)私たちのセットアップでは、各コンポーネントは指定された管理者によって管理されます。 「減速機」 特定のロジックを処理します。ただし、一部のコンポーネント ロジックが誤って間違ったリデューサーに配置されていました。これは、開発者が既存のファイルを認識していないか、当時必要なロジックの量が限られていたため、新しいファイルの作成を検討しなかったため、発生した可能性があります。その結果、一部のコンポーネントのロジックがプロジェクト全体に分散し、明確さが失われ、保守が困難になりました。不足しているアーキテクチャを示す次の図を確認することをお勧めします。破壊的デカップリング - 図（例）このアプローチ (または、おそらくより正確には、アーキテクチャ 🥲 の欠如) は、依存関係の追跡が困難な混沌とした環境を引き起こすことが多く、混乱を引き起こし、プロジェクトのサポートを困難にします。ただし、次のような特定の場合に役立つ場合があります。小規模チーム (開発者 1 ～ 2 人)MVP プロジェクト長期支援プロジェクトではありません研究プロジェクトまたはテンプレート #最新のフロントエンド…