关于前后端分离的一些思考

前端设计的产品从大的层面可以分成两种:

a. 浏览类:以内容展现为主,辅以少量交互,如首页、促销页

b. 应用类:包含大量交互,和复杂的功能,如控制台

前后台配合开发通常有以下两种形式:

a. 前端完成静态页面,后台改成动态模板(后台渲染并提供数据)

b. 前端使用动态模板或 MVVM(AngularJS,Vue) 框架,后台只提供数据(前端渲染,后台提供数据)

应用类

对于这种需求,由于前后端是天然分离的,所以做的工作主要是约定好数据的交互,避免后台提供的数据与前端要求的不一致。

在和后台对接接口的时候,为避免前端配置后台环境,可以使用 Nginx 反向代理,Nginx 监听 80 端口,静态请求由 Nginx 处理,动态请求转发给后端服务。

MVVM 框架也有自身的缺点,由于模板在浏览器端渲染,会存在空白页、SEO 或性能的问题,而且对浏览器的版本也有要求(IE8+或IE9+),所以,可以根据自己项目的实际情况选择,通常对于管控类项目还是比较合适的。

另外,使用 MVVM 框架开发大规模 Web App 时,对项目的路由设置、分层、模块划分、代码规范等都有一定要求。

可参考的接口管理方案: RAP文档驱动开发平台 - ApiX

浏览类

这一类的需求比较常见,通常解决办法有两种。

前端写后台模板

通常由前端完成静态页面然后后台来套模板,但后台可能会套错,沟通成本很高。更合适的方式可能是直接由前端写后台模板,但前端又需要配置后台环境,也很麻烦。

一种解决办法是,使用 Node 实现一套解析后台模板的库,这样前端无需配置后台环境就能写后台模板。比如对于阿里后台用的 Velocity 模板,就有一个 Node 解析的方案,开源的也有百度的 jello。这样前端可以直接预览 vm,并使用 JSON 进行数据模拟,在开发前制定好接口,前后端就可以独立开发。

中间加一层 Node

在以往前端后台的中间加一层 Node,这样,浏览器中的前端层和 Node 层由前端人员开发。其中,浏览器层进行 JS、CSS 的渲染和 DOM 等操作,Node 层进行页面渲染、数据转发、路由等操作。而且,Node 层可以和浏览器共用验证、路由等。

具体的案例可参看淘宝的 中途岛 项目

这个方案的挑战是,前端人员需要掌握更多服务器端编程的知识。

补充

前后端分离的另一个方向是全栈,对应用类项目来说,另外一个思路是,让后台拥有写前端的能力,前端摆脱作为资源的角色,专注于组件和工具的开发,并辅助后台完成一些有难度的前端交互。

对于这种形式,前端需要做的工作是:

  • 提供项目架子(使用最佳实践)
  • 提供简单易用的前端组件库(基础组件 + 业务组件)和使用说明
  • 提供一套前端编码规范,使后台写的前端代码也易于维护

一个典型的代表是蚂蚁金服的 Ant Design

参考

淘宝玉伯引发Web前后端研发模式讨论
Web 研发模式的演变

坚持原创技术分享,您的支持将鼓励我继续创作!