1.2 分家的时代

随着 Web 应用的体量不断变大，交互体验的要求不断提高，前端的复杂度也越来越高。在一些规模较大的 Web 应用中，前端和后端一体开发的弊端逐渐暴露出来，具体表现在以下两个方面。

1. 模块划分：项目代码日渐庞大臃肿，开发者意识到必须通过拆分模块来降低代码耦合性。然而大部分的视图代码都是前端和后端混在一起，难以解耦。
2. 多人协作：项目越大开发者就越多，前端和后端的开发者在一个代码仓库中不断地拉取与合并，这本身就是不规范的，很容易引发冲突和覆盖的问题。

此时的 Web 应用已经有分离的趋势，但受制于技术，短期之内无法实现。

1.2.1 AJAX 出现

在 Web 最初发展的阶段，前端页面要想获取最新数据需要刷新整个页面，这是很糟糕的用户体验。

2005 年发生了 JavaScript 历史上具有里程碑意义的大事 —— AJAX 出现了。AJAX 为 JavaScript 带来了异步获取数据的能力。这种异步获取数据的能力使“不刷新浏览器更新页面状态”成为可能。

对于一些操作型的功能，如提交表单，传统的提交方式会刷新整个页面，如果服务器处理失败，表单就需要重填。但有了 AJAX，就可以在当前页面异步提交，并将服务器响应结果在当前页面提示。光是表单异步提交这一项，就让用户体验迈上了一个新的台阶。

后来的大部分网站都在操作反馈方面使用 AJAX 来提升用户体验。但对于整个项目来说，AJAX 只是小规模的应用，前端开发者并没有利用 AJAX 创造出令人眼前一亮的产品。

2005 年前后，谷歌发布了两款重量级的 Web 产品，分别为 Gmail 和 GoogleMap。这两款 Web 产品都使用了 AJAX 技术，并且用这种技术开发的大部分页面是异步与服务器进行通信的，操作体验如同使用原生应用那样丝滑。这让开发者意识到，AJAX 可以应用得更广。

随后 AJAX 不断在前端中创造价值，如按需加载文件，甚至多客户端之间的异步通信，让前端在一个页面中与后端交互变得非常流行。这个阶段一些博客论坛广受欢迎，因为用户可以在评论区与作者互动，这大大促进了 Web 2.0 时代的发展。

1.2.2 前后端分离

随着 AJAX 的普及，越来越多的前端工程师开始思考：是否可以全部采用 AJAX 与后端交换数据，从而实现前端的完全独立？

从理论上来说，这是可行的。假设有一套现成的接口，需要单独开发一个前端程序，先在 JavaScript 中调用接口获取数据，再动态渲染 DOM 更新页面。这样即便前端不依赖 MVC 框架单独部署，也能实现用户的访问操作和与线上数据交换。

在实际的应用场景中，虽然可以这样做，但是在一些细节上会有难以处理的问题，具体表现为以下两个方面。

• 路由问题。AJAX 局部更新可以动态改变页面，但并不会导致 URL 地址发生变化。最终的结果可能是经过多次操作切换到某个页面，结果一刷新，页面又切换到最开始的位置。
• 状态问题。在后端渲染的 MVC 模式下，用户信息被存储在 Session 中，当前用户的登录状态可以直接得到。但在纯前端的环境下，应用是无状态的，如何处理用户登录就成了难题。

在没有通用方案的情况下，传统的 MVC 框架依然是主流。前端作为视图部分继续向 Web 应用提供页面，只不过在一些局部的很小的状态修改中可以使用 AJAX 做到更好的交互。此时的 AJAX 依然是优化用户体验的角色，还没有应用到完整页面的异步更新。

此时的前端正处在黎明前的混沌之中，但前端工程师依然在不断探索，使前端开发透出一束束的亮光。

1.2.3 三大框架出现并流行

2009 年，谷歌的工程师创建了一个名为 AngularJS 的前端开发框架，并且在该框架中引入了 MVC、依赖注入和模块化等设计思想（前端从没有过这样完整的开发框架）。

与其他框架不同，AngularJS 并不依赖操作 DOM 来更新页面，而是提供了一个很超前的方法，即双向数据绑定。只要把数据绑定到 HTML 上，在数据发生变化时，HTML 绑定数据的部分就会自动更新。这是最早的数据驱动视图的思想。

AngularJS 带来的这种全新的设计思路启发了无数的前端工程师，大家争相在这条路上积极探索。

2013 年 Facebook 推出的 React 再次在前端圈掀起一阵高潮。React 在吸收了 AngularJS 精华的基础上，又创造了虚拟 DOM（Virtual DOM），一下子突破了复杂页面的性能瓶颈。另外，React 还提供了创新性的 JSX 语法和 Diff 算法。

在 React 推出一年后，出现了 Vue.js。Vue.js 的开发者尤雨溪是中国人，他以一己之力开发出来的 Vue.js 足以和 React 相媲美。可能是这个原因让 Vue.js 的热度持续居高不下。

当然，这也离不开 Vue.js 本身足够优秀。Vue.js 吸收了 AngularJS 和 React 的精华，不仅采用虚拟 DOM，还保留了双向绑定。最重要的是，Vue.js 的 API 设计非常简单，很容易上手，因此吸引了大批的开发者使用。

另外，Vue.js 的开发文档对国内程序员非常友好，中文表述简单，读起来毫不费劲。

目前，AngularJS、React 和 Vue.js 并称为前端三大框架。三大框架互相学习、互相竞争，不断带来新思路，推出新功能，共同推动前端前进。

三大框架的出现彻底改变了前端的开发方式，使前端开发进入完全的前后端分离模式。这种变革促使后端也发生变化，由开始的嵌套前端模板变成纯粹的接口输出，这与 App 的开发方式基本统一。前端从一个 Web 应用的模板正式进化为前端应用。