为什么前后端分离了,你比从前更痛苦?

简介:

你有没有遇到过:

 ●  前端代码刚写完,后端的接口又变了。
 ●  接口文档永远都是不对的。
 ●  测试工作永远只能临近上线才能开始。

为什么前后端分离了,你比从前更痛苦?

前后端分离早已经不是新闻,当真正分离之后确遇到了更多问题。要想解决现在的痛,就要知道痛的原因:

为什么接口会频繁变动?

设计之初没有想好。 这需要提高需求的理解能力和接口设计能力。

变动的成本较低。

德国有句谚语:“朝汤里吐口水。” 只有这样,才能让人们放弃那碗汤,停止不合理的行为。前后端同学坐在一起工作的时候效率会有提升,当后端同学接口变化时,只需要口头上通知一下即可,我们没有文档,我们很敏捷啊。没错,我们需要承认这样配合开发的效率会很高,但是频繁的变动会导致不断返工,造成了另一种浪费,这种浪费是可以被减少,甚至是被消除的。

为什么接口文档永远都是不对的?

接口文档在定接口时起到一定作用,写完接口就没有用了。后面接口的频繁变化,文档必定会永远落后于实际接口,维护文档的带来了一定的成本却没能带来价值。除非对外提供的接口,否则文档谁来看呢?没人看,用处又在哪?

有些公司干脆丢掉接口文档,说我们要拥抱敏捷。

所以接口文档落后的原因在于没有给我们带来价值。

为什么测试工作永远只能临近上线才能开始?

一个需求,后端开发 4 天,前端开发 4 天,联调 4 天,留给测试同学只有2天时间甚至更少,测不完只能带 bug 上线。

63f5a01dca47954ab482658e72ac0d2b1920f598

在开发阶段测试同学无法介入,接口在变,前端也在变, “提测” 之前只能喝茶,“提测” 之后又忙的要命。

自动化?想都别想,空有一身好本领,在 “拥抱变化” 之后只能手工测试。偶尔还要拉上前台美眉客串一下测试小妹。手工测试枯燥乏味,乏味的工作就容易出错,而且还不能快速重复,无法对测试过的功能快速回归。

怎么破?

解决以上问题要让接口文档发挥价值,提高变动接口的成本,测试尽早介入。

接口文档发挥出价值,就要赋予契约的意义,就如同签字画押谁也不许变,来约束我们只认契约不认人。

契约应该由前端同学来驱动,前后端共同协商。由于前端同学与 UX 接触比较紧密,更了解页面所需的数据以及整体的 User Journey,前端同学驱动会更加合理。

契约敲定之后要帮助我们生成 Mock Server(后面我们会介绍一个工具),前后端同学就要依照契约各自开发。Mock Server 可暂时替代后台服务,帮组前端开发,同时,测试同学也可以依照契约文档来编写测试脚本,使用 Mock Server 进行脚本验证。

eba3b2e384732159a316a77b1edd1a3d2cb43a0f

当后端接口发生变化除了口头通知以外必须修改契约,前端同学和测试同学才能各自修改。如此一来修改契约的成本变高,人们在定契约时则会更加慎重,也会促使我们提高接口的设计能力。

看到图中没有 “联调” 的环节,并不是画错了,而是 “联调“ 不再是一项工作,在部署后只需要更改代理的配置即可。甚至使用现代前端框架(如,Vue 或者 React)只要在开发时配置一下,之后都不需要调整任何代码。

“提测” 呢?测试一直都在进行,也就不再有一个 ”提测“ 的环节,无论前后端任意一方完成开发,测试同学都可以进行测试。

理论终于扯完了,说起来容易做起来难啊,需要工具来帮助我们。接口描述的工具有很多,比较知名的 Swagger 和 Raml,我个人更倾向于 Raml 。

c268edba9c1aeead2fb8963d94154910172d2ee5

描述工具生成文档还不够,还要生成 Mock Server,如果描述工具和 Mock Server 是分离又带来了额外的工作,好在有她——raml-mocker。

raml-mocker

raml-mocker 是一个基于 Raml 使用 Nodejs 开发的 Mock Server 工具,使用 Raml 描述接口中设置 response 的 example 指令即可,raml-mocker 会解析 Raml 文件,并启动一个 Mock Server,将 example 的内容返回给浏览器。

开始

e81ceed20072cc00edabe285c54f3a3f96a5cbbe

此功能使用了raml2html。

配置 .raml-config.json

44bfe9a2ef4fabac6630d826517b08c500be0fb2
 ●  controller: controller 目录路径,在高级篇中会有更详细说明
 ●  raml: raml 文件目录
 ●  main: raml 目录下的入口文件
 ●  port: mock server 服务端口号
 ●  plugins: 插件

入门篇:Mock Server

raml-mocker 只需要在response 添加 example:

c87cba56ed2c1fc33076a94ae082bd8bd3a1b4d8

books_200.json

69096ad540f1b1b8026fc05b6f80d5d98614c427

通过 curl 请求:

fc4ff514e7821fbdab9b6088334956de6e6dd1a4

就会得到 example 的数据,唯一不足是无法根据参数动态返回不同数据。别急,请往下看。

高级篇:动态 Server

如果静态的 Mock 数据不能满足你的需求,Raml-mocker 还提供了动态的功能。

在 raml 文档中添加 (controller) 指令,即可添加动态的 Server,如:

89c399498dd25c6d5ed448fb66bce15c514c607e

在文档中 (controller) 表示 controller 目录下 user.js 中 getBook 函数。

controller/user.js

ac595ceb5b0335272bf030a46e4ca767d1aa2f83

Raml-mocker 是在 expressjs 基础上进行开发,req、res 可以参考 express 文档。

webApi 会返回文档中的配置:

508956079d5e434a754105c2a26aedbe53a48e6d

如此,raml-mocker 提供了更多可扩展空间,我们甚至可以在 controller 中实现一定的逻辑。

插件

Raml-mocker 提供了插件机制,允许我们在不使用 controller 指令的时候对 response 的内容进行处理,例如使用 Mockjs。

.raml-config.json

b447f73fb2238ab0f7171c00a098703d14f2047e

/plugins/mock.js

3abc21b39c70b4d3eb429391d052bf210c8d36c1

Enjoy it!

总结

前后端分离可以让我们的职责更清晰,打破前端发挥的局限,工作解耦之后能更好的提高开发效率。然而因为没有规划好开发流程,导致了我们没有发挥出其应有的价值,造成了更多的浪费。

raml-mocker 能够帮助我们在工具上解决一定的问题,更重要的是持续改进的思想,只有团队的思想是统一的才有可能达到快速交付。


原文发布时间为:2018-10-27

本文作者:谢小呆

本文来自云栖社区合作伙伴“Java架构沉思录”,了解相关信息可以关注“Java架构沉思录”。

相关文章
|
6月前
|
NoSQL 前端开发 Java
前后端开发学习视频
若有失效链接请留言告诉我,我再上传。
34 0
|
3月前
|
前端开发 JavaScript 数据可视化
2022年中高级前端需要学习的25种前端技术栈
2022年中高级前端需要学习的25种前端技术栈
83 0
2022年中高级前端需要学习的25种前端技术栈
|
4月前
|
前端开发
前端小白如何开发新项目(速成版)
前端小白如何开发新项目(速成版)
81 0
|
8月前
|
JSON 前端开发 数据格式
前端的一些技术知识点
前端的一些技术知识点
|
8月前
|
Java Maven
后端开发1.项目的搭建
后端开发1.项目的搭建
72 0
|
10月前
|
开发框架 前端开发 程序员
|
11月前
|
移动开发 前端开发 JavaScript
谈谈前端工程化
系统学习前端的同学都知道,最早期的前端开发(切图开发),其实就是在html文件中插入css文件、插入js文件,如果你掌握的知识比较广,可能还会引入jquery.min.js~
101 1
谈谈前端工程化
|
前端开发 JavaScript API
【前端面试知识题】- 模块化开发
在Web开发中,通常将项目的实现划分成许多模块。模块化开发其实就是将功能相关的代码封装在一起,方便维护和重用。另外,模块之间通过API进行通信
|
架构师 测试技术 持续交付
接口测试这件小事
接口测试这件小事
接口测试这件小事
|
前端开发 安全 JavaScript
关于前端方面的困惑与思考
关于前端,关于工作,你是否也有这样的困惑,工作是什么?为什么要做前端?做技术还是做业务?兴趣重要吗?怎么看待职业瓶颈?
240 0
关于前端方面的困惑与思考

热门文章

最新文章

相关实验场景

更多