转载

我谈前后端分离

前后端分离的好处并不仅仅是开发效率，而是节省服务器资源和充分利用客户端资源。更进一步来说，前后端分离的页面是纯HTML（加JS）页面，可以放在CDN上来提升加载速度。后端的JSON接口可被PC端和移动端复用，降低重复劳动。

前后端分离使得浏览器端更符合它的本质，GUI应用就应该写成GUI应用的样子。前端也不仅仅是浏览器，还有PC和移动端。当浏览器端开发流程和移动端、PC端差不多的时候，各个前端之间的换岗和协同也会变得容易。

前后端分离不是摆弄框架，也不是SPA，而是用 Ajax 加载所有数据，并刷新局部页面。这个过程需要 Ajax 和 DOM API 的配合，和框架不框架没有关系。Web 2.0 的多数应用在增删改三个操作上是 Ajax，唯独查询是直接用模板刷页面，不信你可以随便找几个网页，查看源码来看看。混用这两种方式真的不别扭嘛？反正我是别扭。

我从来不反对前后端分离，反对的是框架鼓吹论。程序员为此付出了学习成本和迁移成本，却没有得到相应的开发效率。这个就叫“智商税”。jQuery 也能写前后端分离的东西。甚至一些早期的MVC框架还不如 jQuery，比如 ng1。

九评 ng1

ng1（AngularJS 1）是个彻头彻尾失败的产物。它是个骗局，至少我的同学中，没有人使用 ng1 写页面比我用 jQuery 还快。另外不要拿其它人跟我比，它们的快只是经验问题，不是 ng1 本身造成的提升。

使用 ng1 的 HTML 中，随处可见模板的大花括号，这个是从服务端的 ninja 风格模板学到的。然而，前端和后端不同的是，前端必须把 HTML 当成“组件”而不是“文档”来对待，模板是典型用于处理文档的方式，这么看来，ng1 与组件化背道而驰。

ng1 的数据绑定比起 jQuery 没有什么提升，它还是需要手动绑定。

在 jQuery 中，获得组件只需要选择器：

$('#name-text') = someName;

而 ng1 中，需要三个名称，一个是 app，一个是 controller，另一个是组件名称：

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.name = someName;
});

显然，三个名称比起一个名称更不容易解耦和复用，因为只有三个名称都匹配的时候才能完全复用，否则就得需要改代码。

然后让我们看看后端是如何渲染模板的：

render(template, context)

是的，就这一条命令，生成渲染后的文本，之后可以用于刷给输出流。

ng1 如果想要做到同样的简洁，需要这样：

$scope.render(urlString, followingAction);

在浏览器中，上下文是远程资源，需要远程IO，不过本地资源远程资源都是IO不是吗？程序员还需要手写 Ajax 请求，手动刷给 $scope ，不觉得麻烦？

还有种观点认为，ng1 的 for 标签比起 jQuery 纯手动操作效率要高。谁跟你比手动操作，你知道 jQuery 家族中有个东西叫做 jQueryUI 吗？它提供成套的组件，里面的表格组件使用一条语句就能插入数据。ng1 跟它比组件，还嫩了点。

不知道你们说的 jQuery 包括不包括 jQueryUI。jQueryUI 强大、便利到超乎你们的想象。这才叫真正的组件化。

ng2 比 ng1 好得多，也看不到什么模板了。但它算是完全不同的框架，要想迁移，还得“从学会到重学”。（手动笑cry）

组件化和模块化

组件化和模块化是个好东西，甚至缺少模块化是所有开发者的障碍。模块化提供了JS文件的包含或导入机制，使得JS文件中的对象可以相互依赖。在ES6之前，JS文件不能互相包含，只能被HTML包含而实现互相访问，这个非常别扭。ES6出来之后，部分用户的浏览器没能升级而支持ES6，浏览器端还得用babel这类东西。（手动笑cry）

然而除了浏览器中的任何领域，模块化都是天生的特性。可以说少了模块化就少了基本的抽象机制。

组件化，以安卓为例，小的组件可以组成组件组，组件组可以写到一个分离的xml中，可以静态包含，也可以动态使用 inflate 方法加载。甚至它还可以由Java类封装成自定义控件，包含或者加载的时候只写自定义名称就行了。毫无疑问这种机制在浏览器中需要 HTML 包含机制和解析机制的配合，在最新的 HTML 5 中，还是没能看到这种东西。

于是，“标准不足架构补”，劳动人民的智慧是无穷的，它们编写了一堆框架用于解决这个问题。浏览器端之前太缺组件化和模块化了，所以近几年呼声很高。