Web开发前后端分离

作者：zjruan 日期：2016-11-09
关键词：前后端分离，nodejs， thrift
描述：本文讨论的范围是web开发，前端：前端开发工程师（html，css，js...），后端：后端web开发工程师（java，C#...）

近年来互联网发展迅速， 乘着“互联网+”的风，各行各业都在与互联网结合，产生了大量的web开发岗位，IT 行业悻悻向荣。
web开发分为多个岗位，可以大致分为 前端、后端、测试、运维。今天我们来聊一聊前后端的那些事。

一、传统的web开发模式

---

前端是近几年才兴起的一个职业，web发展初期是没有前端工程是的，网页只是向用户单向的传递信息，只是一些简单的html，后来加入了css以及一些简单的 js ，用于美化页面与添加一些用户交互。个人感觉前端的高速发展是伴随着 Ajax 技术的普及而开始的。html5 、css3 ，越来越多的网站从页面开始想web 应用化的转换，导致网页的制作难度越来越高，用户体验已经页面的美观要求越来越高，使得前端开发工程师逐渐分离成为一个独立的职业。

目前，在大部分中小公司，前端实际上是处于一个附属的阶段（依附于后端），前端只写一些 html，css，以及一个交互js，然后将写好的的 html 交予后端套页面。
后端拿到 html 页面后将其转换为后端模板，如 velocity，smarty，jade 等等。可能还会写一些数据加载js。所以基本上每个后端都会一些 js，他们最怕的是浏览器兼容性。

html2jade.png
这种模式的好处是对前端要求“很低”，以应对现在稀缺的前端资源。坏处也很明显，主要如下：

• 前后端的一部分工作（html->vm...）重复了，降低了工作效率【后端模板统一以vm为例， vm是 java velocity模板的文件】。
• 后端转vm的过程中不能保证100%的转化，有时会遗漏一些东西，比如少了个闭标签。
• 有时会出现三不管文件，前后端都不想维护它，这个文件就会变的越来越烂，越来越没人维护它的恶性循环。比如一个 js 文件，第一手是一个前端写的，写了一些基础的事件绑定以及交互逻辑然后就交给后端了，第二手是后端在里面添加了一个他们的代码，用户行为统计或者其他一些内容。
  不知道你们是怎样的，反正一旦有人改了我的东西，我便不想维护它了，慢慢的这个文件就会变的越来越烂。作为一个前端工程师，不要指望一个后端按照你的规范去写前段代码，在他们眼里，这不是他的职责，才不管这代码写的烂不烂呢，至少我以前在做后端开发的时候是这样想的。
• 前端很难搞出一套漂亮的代码,原因很简单，或者后端有时也会去修改它，或者dom掌握在后端的手里，前端很难去优化它（dom结构），或者前端工程化（注：近期遇到的问题，版本控制会在文件名后追加MD5摘要，但是相应的要修改页面中的文件引用地址，vm的控制权不在我们手上，让后端频繁的改这个是不可能的）上一些问题，反正就是各种各样的问题，最后，前端代码就是一坨乱麻。好在前端足够简单，我们理一理还不会出什么大的幺蛾子。

因为前后端这种工作的交集，有时会互相甩锅，甚至出现一些对立。

前端vs后端

二、前后端分离

---

前后端分离的最终目的是问题提高工作效率。

传统的web开发模式，后端一定程度上依赖与前端页面的开发，而前端一定程度的依赖后端的数据接口的开发。整个开发过程中部分阶段处于串行状态。而前后端分离的核心思路就是打破这种串行，使得前端与后端能够并行开发，从而提高整体的工作效率。

很多公司都在尝试前后端分离，根据公司的情况，分离的程度也不同。个人感觉，前后端分离的火候，一定程度上依赖该公司前端团队的实力。

阶段1、页面分离

得益于 nodejs 的成功，前端可以不必安装后端开发环境，便可以直接编写后端模板，这样前端便直接提供的vm文件，而不需要后端去转页面，节约一部分后端的工作量。
这种模式下，前端开发工作量会稍微的增加一些，但不会太多，当你熟悉后端模板后，几乎不会有什么额外负担。
前端团队需要搭建一套自编译系统，将vm 自动转化为html，并刷新浏览器。
主要node包：gulp、velocity、browser-sync

阶段2、数据接口分离

数据接口分离，就是开发之前，前后端约定好一个接口，大家都基于这个接口开发。类似于app开发。
这样前端就可以与后端接口解耦了，在后端接口还没有开发完成时，也可以开发数据交互js。
主要工具： rap 或者 swagger

阶段3、展现层分离（展现层由前端维护）

这个也算是前后端分离的究极体了。在一部分公司，PHP承担着前后端分离的重要角色，有些人会有疑问，php不是后端语言么？
对，但是在这个阶段，PHP 只负责 MVC 模式下的 View 和 Controller 层，Model 层交由Java 或C#。关键一点，这里的 PHP 是由前端团队维护，如果交由后端开发去维护，便失去了前后端分离的意义。也因为是前端去维护，我们随其自然的将这里的 PHP 换成了 NodeJS。
该阶段对前端是一个考验，没有做后端开发的的同学入手比较困难，团队里至少有一个对mvc模式较为熟悉，且熟练掌握NodeJS 或者 PHP，在他的帮助下，最终每一个前端成员都能够独立的去写 view 和对应的 Controller。
当做到这一步的时候，前后端也就真正的分离了。我们直接完全是接口化开发，并且有需要的话，针对后端接口编写单元测试。

前后端分离架构图.png

三、前后端分离Demo

基于阶段3的一个demo。
该阶段的一个难点在于web 与 services 的数据交互。好在facebook开源的一个项目 Thrift 为我们解决了这个问题。
Demo中使用了Nodejs 的Express搭建web服务，使用 Thrift 生成 Node 的client和server的接口文件。

Client:

/*  javascript */
...
var client = thrift.createClient(Calculator, connection);
router.get('/', function (req, res, next) {
    client.add(10, 100)
    .then(function (response) {
        res.render('index', { title: 'Express + Thrift', desc: '：1+1=' + response });
    }); 
});

/* jade */
block content
    h1= title
    p Welcome to #{title} 
    p Thrift demo #{desc}

Server

/* Nodejs server */
...
var server = thrift.createServer(Calculator, {
    add: function (n1, n2) {
        var result = n1 + n2;
        return result;
    }
});

console.log("localhost:9090");
server.listen(9090);

Result

Demo Result.png