>

英雄主义与分工同盟,浅谈前后端分工合作

- 编辑:澳门新葡亰平台游戏 -

英雄主义与分工同盟,浅谈前后端分工合作

三、小结

本文只是对前后端协作存在的问题和现有的几种常见模式做了简要的列举,JSON Schema 具体如何去运用,还有接口的维护问题、接口信息的获取问题没有具体阐述,这个后续有时间会整理下我对他的理解。

赞 2 收藏 1 评论

图片 1

变形金刚2相对来说比第一部来得更狭隘。
元老被唤醒,擎天柱被杀死,威震天被复活,堕落金刚的大BOSS出手,前任特工加入正义团队…故事开始变得相对混乱。一方面要展现新的危机,一方面又要交待历史渊源,使得结构相对零散。
一成不变的还是英雄主义,两个年轻人继续出生入死,巢穴部队充当配角与汽车人分工协作。两种风格强行被揉捏在一起,给人更冲击的来自前者。
至于一贯的美式幽默,还是能让大家感到轻松。两只小狗的嘿咻,两个喋喋不休的汽车人,对H1N1的调侃,美女霸天虎的挑逗……让一贯绷紧的国人舒心了一把

二:前后端分离的意义

1:彻底解放前端,前端不再需要向后台提供模板或是后台在前端html中嵌入后台代码

2:提高工作效率,分工更加明确,前后端分离的工作流程可以使前端只关注前端的事,后台只关心后台的活,两者开发可以同时进行,在后台还没有时间提供接口的时候,前端可以先将数据写死或者调用本地的json文件即可,页面的增加和路由的修改也不必再去麻烦后台,开发更加灵活。

3:局部性能提升,通过前端路由的配置,我们可以实现页面的按需加载,无需一开始加载首页便加载网站的所有的资源,服务器也不再需要解析前端页面,在页面交互及用户体验上有所提升。

4:降低维护成本,通过目前主流的前端MVC框架,我们可以非常快速的定位及发现问题的所在,客户端的问题不再需要后台人员参与及调试,代码重构及可维护性增强。

5、有利于产品的组件化,由于前后端分离,有利于迅速二次开发推出新产品。

6、减少后端新人上手项目的难度,提高产品的可维护性和可拓展性。

7、基于原有后端接口,有利于后期在安卓,ios,微信等其他不同平台进行产品二次开发。

一、开发流程

前端切完图,处理好接口信息,接着就是把静态demo交给后台去拼接,这是一般的流程。这种流程存在很多的缺陷。

  • 后端同学对文件进行拆分拼接的时候,由于对前端知识不熟悉,可能会搞出一堆bug,到最后又需要前端同学帮助分析原因,而前端同学又不是特别了解后端使用的模板,造成尴尬的局面。
  • 如果前端没有使用统一化的文件夹结构,并且静态资源(如图片,css,js等)没有剥离出来放到 CDN,而是使用相对路径去引用,当后端同学需要对静态资源作相关配置时,又得修改各个link,script标签的src属性,容易出错。
  • 接口问题
    1. 后端数据没有准备好,前端需要自己模拟一套,成本高,如果后期接口有改变,自己模拟的那套数据又不行了。
    2. 后端数据已经开发好,接口也准备好了,本地需要代理线上数据进行测试。这里有两个费神的地方,一是需要代理,否则可能跨域,二是接口信息如果改动,后期接你项目的人需要改你的代码,麻烦。
  • 不方便控制输出。为了让首屏加载速度快一点,我们期望后端先吐出一点数据,剩下的才去 ajax 渲染,但让后端吐出多少数据,我们不好控。

当然,存在的问题远不止上面枚举的这些,这种传统的方式实在是不酷(Kimi 附身^_^)。还有一种开发流程,SPA(single page application),前后端职责相当清晰,后端给我接口,我全部用 ajax 异步请求,这种方式,在现代浏览器中可以使用 PJAX 稍微提高体验,Facebook 早在三四年前对这种 SPA 的模式提出了一套解决方案,quickling+bigpipe,解决了 SEO 以及数据吐出过慢的问题。他的缺点也是十分明显的:

  • 页面太重,前端渲染工作量也大
  • 首屏还是慢
  • 前后端模板复用不了
  • SEO 依然很狗血(quickling 架构成本高)
  • history 管理麻烦

问题多的已经是无力吐槽了,当然他依然有自己的优势,咱们也不能一票否决。

针对上面看到的问题,现在也有一些团队在尝试前后端之间加一个中间层(比如淘宝UED的 MidWay )。这个中间层由前端来控制。

JavaScript

+----------------+ | F2E | +---↑--------↑---+ | | +---↓--------↓---+ | Middle | +---↑--------↑---+ | | +---↓--------↓---+ | R2E | +----------------+

1
2
3
4
5
6
7
8
9
10
11
    +----------------+
    |       F2E      |
    +---↑--------↑---+
        |        |
    +---↓--------↓---+
    |     Middle     |
    +---↑--------↑---+
        |        |  
    +---↓--------↓---+
    |       R2E      |
    +----------------+

中间层的作用就是为了更好的控制数据的输出,如果用MVC模型去分析这个接口,R2E(后端)只负责 M(数据) 这部分,Middle(中间层)处理数据的呈现(包括 V 和 C)。淘宝UED有很多类似的文章,这里不赘述。

四:相关问题及解决建议

1、前后端分离会带来前后端沟通成本的问题,相比不分离,能减少开发的总时间吗?

能减少开发的总时间,理由如下:

(1)、基于对接口负责的原则,前后端分离后,只需做好各种熟悉领域的事情。

后端专注于提供数据,更重要职责是维护系统架构的稳定,保证数据的安全。

前端人员专注于交互,快速响应UI的变化。

(2)、前后端分离确实会带来沟通成本的问题,这方面需要前后端遵守合作流程,适应新的合作模式,可以提高沟通效率。总体而言,利大于弊。

2、接口定义阶段,接口谁定?

回答:建议后端开发人员定,需要前端人员评审。

3、联调阶段,前端是基于后端的开发人员的机器联调,还是基于后端一个开发公共环境联调?

回答:前端应该基于后端的一个公共开发环境联调,理由如下:

(1)、开发过程中,后端开发人员机器环境不稳定,后端人员在调速中会时不时进行断点调试,重启机器的服务器。

(2)、公共开发环境由开发人员负责更新程序,并需要在更新程序前把代码提交代码仓库,这样有利于前端有一个实时更新,稳定的调试环境。

谈谈前后端的分工协作

2015/05/15 · HTML5 · 1 评论 · Web开发

原文出处: 小胡子哥的博客(@Barret李靖)   

前后端分工协作是一个老生常谈的大话题,很多公司都在尝试用工程化的方式去提升前后端之间交流的效率,降低沟通成本,并且也开发了大量的工具。但是几乎没有一种方式是令双方都很满意的。事实上,也不可能让所有人都满意。根本原因还是前后端之间的交集不够大,交流的核心往往只限于接口及接口往外扩散的一部分。这也是为什么很多公司在招聘的时候希望前端人员熟练掌握一门后台语言,后端同学了解前端的相关知识。

一、前后端分离的基本概念

前端后端交互,基本上是基于http+json的形式。后端专注于提供数据,更重要职责是维护系统架构的稳定,保证数据的安全。前端人员专注于交互,快速响应UI的变化。

双方交互基于http+json接口,后端人员基本只对接口负责,无需负责js和html的代码。前端人员只对界面展示交互负责,对于后端http接口如何提供正确的数据无需负责。

前后端分离的主要概念就是:后台只需提供API接口,前端调用AJAX实现数据呈现。

二、核心问题

上面提出了在业务中看到的常见的三种模式,问题的核心就是数据交给谁去处理。数据交给后台处理,这是模式一,数据交给前端处理,这是模式二,数据交给前端分层处理,这是模式三。三种模式没有优劣之分,其使用还是得看具体场景。

既然都是数据的问题,数据从哪里来?这个问题又回到了接口。

  • 接口文档由谁来撰写和维护?
  • 接口信息的改动如何向前后端传递?
  • 如何根据接口规范拿到前后端可用的测试数据?
  • 使用哪种接口?JSON,JSONP?
  • JSONP 的安全性问题如何处理?

这一系列的问题一直困扰着奋战在前线的前端工程师和后端开发者。淘宝团队做了两套接口文档的维护工具,IMS以及DIP,不知道有没有对外开放,两个东西都是基于 JSON Schema 的一个尝试,各有优劣。JSON Schema 是对 JSON 的一个规范,类似我们在数据库中创建表一样,对每个字段做一些限制,这里也是一样的原理,可以对字段进行描述,设置类型,限制字段属性等。

接口文档这个事情,使用 JSON Schema 可以自动化生产,所以只需编写 JSON Schema 而不存在维护问题,在写好的 Schema 中多加些限制性的参数,我们就可以直接根据 Schema 生成 mock(测试) 数据。

mock 数据的外部调用,这倒是很好处理:

JavaScript

typeof callback === "function" && callback({ json: "jsonContent" })

1
2
3
typeof callback === "function" && callback({
   json: "jsonContent"
})

在请求的参数中加入 callback 参数,如 /mock/hashString?cb=callback,一般的 io(ajax) 库都对异步数据获取做了封装,我们在测试的时候使用 jsonp,回头上线,将 dataType 改成 json 就行了。

JavaScript

IO({ url: "", dataType: "jsonp", //json success: function(){} })

1
2
3
4
5
IO({
  url: "http://barretlee.com",
  dataType: "jsonp", //json
  success: function(){}
})

这里略微麻烦的是 POST 方法,jsonp 只能使用 get 方式插入 script 节点去请求数据,但是 POST,只能呵呵了。

这里的处理也有多重方式可以参考:

  • 修改 Hosts,让 mock 的域名指向开发域名
  • mock 设置 header 响应头,Access-Allow-Origin-Control

对于如何拿到跨域的接口信息,我也给出几个参考方案:

  • fiddler 替换包,好像是支持正则的,感兴趣的可以研究下(求分享研究结果,因为我没找到正则的设置位置)
  • 使用 HTTPX 或者其他代理工具,原理和 fiddler 类似,不过可视化效果(体验)要好很多,毕竟人家是专门做代理用的。
  • 自己写一段脚本代理,也就是本地开一个代理服务器,这里需要考虑端口的占用问题。其实我不推荐监听端口,一个比较不错的方案是本地请求全部指向一个脚本文件,然后脚本转发URL,如:

JavaScript

原始请求: 在ajax请求的时候: $.ajax({ url: "" });

1
2
3
4
5
原始请求:http://barretlee.com/api/test.json
在ajax请求的时候:
$.ajax({
  url: "http://<local>/api.php?path=/api/text.json"
});
  • php中处理就比较简单啦:

JavaScript

if(!isset($_GET["page"])){ echo 0; exit(); } echo file_get_contents($_GET["path"]);

1
2
3
4
5
if(!isset($_GET["page"])){
  echo 0;
  exit();
}
echo file_get_contents($_GET["path"]);
  • Ctrl+S,保存把线上的接口数据到本地的api文件夹吧-_-||

前后端分离的核心:后台提供数据,前端负责显示

三:实现分离的基本合作思路

1、评审阶段:产品经理与前后端进行需求评审,各自理解清楚自己的业务量以及联调的工作量,评估开发时间。

2、开发准备阶段:前后端一起商量需求中需要联调的部分,进行接口的口头协议交流。

3、接口定义阶段:前后端一方中,前后端中的一方根据之前的口头协议拟定出一份详细的接口,并编写服务接口定义,完成后由另一方确认。有疑问的地方重新商量直至双方都没有问题。

4、开发阶段:双方根据协商出来的接口为基础进行开发,如在开发过程中发现需要新增或删除一些字段,重复步骤3。

(注意:前端在开发过程中记得跟进接口,mock数据进行本地测试,后端修改接口需要跟前端协商清楚再改。 )

5、联调阶段:双方独自的工作完成,开始前后端联调,如在联调过程发现有疑问,重复步骤3,直至联调完成。

6、提测阶段:将完成的需求提给测试人员,让其对该需求进行测试,如发现问题,及时通知开发并让其修改,直至需求没有bug。

7、发布阶段:前后端双方在保证步骤1-5都没有问题了,进行各自的代码发布,完成后由测试人员在线上进行相应的测试,如果有bug,重复步骤6和7,直至成功上线。

本文由前端php发布,转载请注明来源:英雄主义与分工同盟,浅谈前后端分工合作