初期のウェブアプリケーションは、フロントエンドとバックエンドの区別がありませんでした。クライアントサーバーモデルでは、サーバーがブラウザからのリクエストを受け取り、対応するページを返していました。その後、サーバーサイドの処理が複雑になり、ユーザーはブラウザでより美しいインターフェースや高速なレスポンスを求めるようになりました。この背景から、AJAX技術やJSP技術などが登場しましたが、依然としてフロントエンドとバックエンドが分離されていませんでした。JavaScriptの成熟とNode.jsの普及により、フロントエンドとバックエンドの分離が促進され、Angular、React、Vueなどの主要なフロントエンドフレームワークが誕生し、開発効率と品質が大幅に向上しました。
以前のフロントエンド開発では、HTML、JS、CSSファイルを手動で作成してサーバーに送り、そこで実行させることが一般的でした。例えば、JSP技術や、その後に開発速度が速いVelocity、Thymeleafといった技術を使用していましたが、これらもフロントエンドとバックエンドを一緒に開発・デプロイしていました。Node.jsの出現により、サーバーでもJavaScriptファイルを実行できるようになり、フロントエンドとバックエンドの分離が可能になりました。さらに、フロントエンド開発が複雑になるにつれて、より多くのHTML、JS、CSSファイルを管理する必要があり、Webpackやnpmなどのツールが生まれました。これにより、シングルページアプリケーション（SPA）技術が流行し、現在主流のAngular、React、Vueなどのフレームワークが登場しました。SPAの特徴は、最初のリクエスト時にすべてのコードをブラウザに送信し、以降の操作ではデータのみをサーバーから取得する点です。これにより、PC用QQやスマホ用QQのようなネイティブアプリのように動作し、クロスプラットフォームアプリの開発が容易になります。
以下はAngularの例です：
一方、Vueの例は以下の通りです：
両方とも、ルーティングの概念を活用しており、特定の部分だけを更新する仕組みを持っています。
<!-- Angularサンプル -->
<h1>{{pageTitle}}</h1>
<nav>
<a [routerLink]="['/main']">メイン</a>
<a [routerLink]="['/items']">アイテム一覧</a>
</nav>
<app-router-output></app-router-output>
<!-- Vueサンプル -->
<template>
<div id="mainApp">
<page-router></page-router>
</div>
</template>