当初、フロントエンドにはアーキテクチャが存在しませんでした。シンプルな機能を持つシンプルなコードには、アーキテクチャが存在しなかったからです。シンプルなjQueryライブラリでDOMを操作することでできる作業は、複雑なデザインパターンやコード管理メカニズムを必要とせず、アプリケーションをサポートするためのアーキテクチャは必要ありませんでした。
フロントエンド開発の歴史は以下の段階に分けられます：
- 古典的な時代：フロントエンドのHTMLはバックエンドによってレンダリングされ、テーブルでレイアウトされ、簡単な補助のためにCSSが使用されます。
- アニメーションの時代：フロントエンドは、広告を回転させるなどのアニメーション効果を行うための簡単なJavaScriptスクリプトを書き始めました。
- Ajax非同期通信の時代：2005年、GoogleはGoogle Mapsなど多くのWebアプリケーションで非同期通信技術を採用し、Webフロントエンドの新時代を切り開きました。
フロントエンドのアプリケーションがバックエンドからデータを取得する必要がある場合、フロントエンドのアプリケーションは実行時に動的にコンテンツをレンダリングすることになります。この時点で、開発者は以下の2つのことを行う必要があります：
- 動的に生成されるHTML。 バックエンドはフロントエンドが必要とするHTMLを返し、動的にページのDOMを置き換えます。jQuery Mobileのような初期の典型的なアーキテクチャでは、フロントエンドのテンプレートとレンダリングロジックにあらかじめ記述されており、ユーザーの行動がバックエンドのトリガーとなり、ドキュメントをレンダリングするための対応するデータを返します。
- テンプレートの分離。バックエンドはAPIを使ってフロントエンドが必要とするJSONデータを返し、フロントエンドはそれを生成するためにHTMLを計算します。フロントエンドのテンプレートはそのHTMLを使い、代わりにMustacheのようなテンプレートエンジンを使ってHTMLをレンダリングします。
HTMLの動的生成、テンプレートの独立性と分離により、フロントエンドのアプリケーションは複雑になり始めました。バックエンドのMVCアーキテクチャはさらにフロントエンド開発にも影響を与え、Backbone、Knockoutなど、操作性の高いMVCフレームワークが次々と誕生しました。同時に、Ryan Lienhart DahlらがNode.jsを開発した後、フロントエンドソフトウェアの機能は向上し続けました：
- より良いビルドツール。GrantやGulpなどのビルドツールが生まれました。
- パッケージ管理。フロントエンド用のパッケージ管理ツールBowerとNpmを作成しました。
- モジュール管理。AMD、Common.jsなど、さまざまなモジュール管理ソリューションも登場しています。
シングルページアプリケーションの普及に伴い、フロントエンドとバックエンドの分離フレームワークは業界の標準的な手法となりました。その結果、フロントエンドはますます多くのことを考慮しなければならない新しい時代に入りました：
- API管理。Swaggerや様々なMock ServerなどのAPI管理ツールが標準的なものになりつつあります。
- Ionic、React Native、Flutterなどのフレームワークを使い、クロスプラットフォームのモバイルアプリケーションフレームワークを開発するビッグフロントエンド。
- コンポーネント化とは、フロントエンド・アプリケーションを1つの大きなページ・コンポーネントではなく、小さなコンポーネントの組み合わせで構成することです。
システムがますます複雑になるにつれて、フロントエンドのアーキテクチャの役割もますます重要になります。 MVCは開発者のニーズを満たすことができないので、コンポーネントベースのアーキテクチャの使用。そして、コンポーネント化+ MVは大規模なフロントエンドアプリケーションに対処することはできません、マイクロフロントエンドは、顔の前に表示されます、それは次の問題を解決します：
- クロスフレームワーク。単一のページで実行し、同時に複数のフロントエンドフレームワークを使用します。
- アプリケーションの分割。複雑なアプリケーションを複数の小さなアプリケーションに分割することで、マイクロサービスに似ています。
- レガシーシステムの移行。既存のアプリケーションに直接組み込むことができるレガシーフロントエンドフレームワークを実行できるようにします。
複雑なフロントエンド・アプリケーションは長い間進化し続けているので、進化する必要のあるアプリケーションのセットも存在します：書き換え、移行、リファクタリングなどを考慮してください。
