前端开发的历史和趋势

前端是针对浏览器的开发，代码在浏览器里跑；后端针对服务器，代码在服务器跑。互联网早期二者并不分家：前端代码是后端的一部分。后来 Ajax、前端 MVC / MVVM、SPA 和 Node 把这件事拆开，又重新接到一起。

这条线可以记成：前后端不分 → 后端 MVC 里前端只是模板 → Ajax 让前端独立拿数据 → 前端自己也有 MVC/MVVM → 单页应用 → REST 接口通信 → Node 让前端工程师能写后端，走向全栈。

一、什么是前端，以及前后端不分的时代

• 前端：针对浏览器的开发，代码在浏览器运行
• 后端：针对服务器的开发，代码在服务器运行

互联网发展早期，前后端开发是一体的，前端代码是后端代码的一部分：后端收到浏览器请求，生成静态页面，再发给浏览器。

二、后端 MVC：前端只是 V

那时网站开发采用后端 MVC：

• Model（模型层）：提供 / 保存数据
• Controller（控制层）：数据处理，实现业务逻辑
• View（视图层）：展示数据，提供用户界面

前端只是后端 MVC 的 V。以 PHP 框架 Laravel 为例：

那时的前端工程师实际上是模板工程师，负责写页面模板。后端读取模板、替换变量、渲染出页面。典型 PHP 模板：

<html>
 <head><title>Car {{ $car->id }}</title></head>
 <body>
 <h1>Car {{ $car->id }}</h1>
 <ul>
 <li>Make: {{ $car->make }}</li>
 <li>Model: {{ $car->model }}</li>
 <li>Produced on: {{ $car->produced_on }}</li>
 </ul>
 </body>
</html>

三、Ajax 与 Web 2.0

Ajax 改变了一切。2004 年 Gmail、2005 年 Google 地图之后，前端不再只是后端模板，可以独立拿到各种数据。

Ajax 促成了 Web 2.0：

• Web 1.0：静态网页，纯内容展示
• Web 2.0：动态网页，富交互，前端数据处理

从那时起前端变复杂了，对工程师的要求也越来越高。

四、前端 MVC、Router 与 MVVM

前端通过 Ajax 拿到数据，也就有了保存数据、处理数据、生成视图的需求，于是诞生了前端 MVC 框架。2010 年出现 Backbone.js：把前端分成 Model（管数据）和 View（展现）。

Backbone 只有 M 和 V，没有 C。前端 Controller 和后端不同：不需要、也不应该处理业务逻辑，只处理 UI 逻辑、响应用户操作，相对简单。Backbone 用事件处理 UI 逻辑。

var AppView = Backbone.View.extend({
 // ...
 events: {
 "keypress #new-todo": "createOnEnter",
 "click #clear-completed": "clearCompleted",
 "click #toggle-all": "toggleAllComplete"
 },
});

前端还有一种天然切换视图的方法：URL。通过 URL 切视图就是 Router。以 Backbone 为例：

App.Router = Backbone.Router.extend({
 routes: {
 '': 'index',
 'show': 'show'
 },
 index: function () {
 $(document.body).append("调用了 Index 路由");
 },
 show: function () {
 $(document.body).append("调用了 Show 路由");
 },
});

示例：打开 demos/backbone-demo/index.html，按《操作说明》查看。

另一些框架提出 MVVM，用 View-Model 代替 Controller：Model、View、View-Model。View-Model 是简化的 Controller，唯一作用是给 View 提供处理好的数据。本质是 view 绑定 view-model，视图与数据模型强耦合，数据变化实时反映在 view 上，不必手改 DOM。

五、SPA、Angular 与 Vue

前端可以读写数据、切换视图、处理用户交互，网页其实已经是应用程序。SPA = Single-page application。2010 年后，前端工程师从开发页面变成开发跑在浏览器里的前端应用。

传统架构：

单页应用架构，多了一层前端 MVC：

Google 的 Angular 是当时最流行的 MVVM 框架，风格是 HTML 增强，核心是双向绑定。

示例：打开 demos/angular-demo/index.html，可以看到一个输入框。

<div ng-app="">
 <p>
 姓名 :
 <input
 type="text"
 ng-model="name"
 placeholder="在这里输入您的大名"
 >
 </p>
 <h1>你好，{{name}}</h1>
</div>

Vue.js 基本思想和 Angular 类似，用法更简单，并引入了响应式编程。

Vue 的模板与数据是双向绑定的。打开 demos/vue-demo/index1.html，按《操作说明》查看。HTML：

<div id="journal">
 <input type="text" v-model="message">
 <div>{{message}}</div>
</div>

JS：

var journal = new Vue({
 el: '#journal',
 data: {
 message: 'Your first entry'
 }
});

六、前后端分离、REST 与 Node

两件事让前端开发方式发生根本变化：Ajax 带来前端应用；智能手机要求多终端。前端不再是后端 MVC 中的 V，而是单独一层。

分离之后靠接口通信：后端暴露接口，前端消费数据。接口一般是 REST，协议一般是 HTTP。

2009 年 Node 诞生，是服务器上的 JavaScript 运行环境：Node = JavaScript + 操作系统 API。

意义在于：JavaScript 成为服务器脚本语言（和 Python、Ruby 一样）；成为唯一浏览器和服务器都支持的语言；前端工程师可以写后端。

开发模式随之改变：在 Node 环境下开发，大量用服务器端工具，引入持续集成等工程流程；开发完成后编译成浏览器能跑的脚本放到 CDN。

七、全栈、H5 与未来

前端工程师正在变成全栈：一个人从前端到后端，从数据库到 UI。技能包括传统前端（HTML、JavaScript、CSS）、一门后端语言、移动端（iOS / Android / HTML5），以及数据库、HTTP 等。

历史演变：前后端不分 → 前后端分离 → 全栈工程师。动力是更产业化、大规模地生产软件：效率更高、成本更低。通用性好、能快速产出的技术最终会赢，对单个程序员生产力的要求也越来越高。

H5 能赢移动端，是因为：开发快（Native 要重新编译才能看结果，H5 即时输出）；成本低（Native 要两套团队，H5 一套）；发布快（安卓 Native 新版本约 24 小时，iOS 约 3～4 天，H5 可随时更新）。

未来软件更强调联网、高并发、分布式、跨终端。基于 Web 的前端技术，会演变成未来各类软件通用的 GUI 方案。工程师会分成两类：端工程师（手机、PC、TV、VR……）和云工程师。

一句话总结：Ajax 让前端独立，SPA 让网页变成应用，Node 让同一门语言跨到服务器；前端从模板走到了全栈。