一场由React引起的先后端分离架构的思考

内容来源：2017年7月22日，浪潮国际金融产品技术架构师丁周芳在“【济南】OSC源创会第65期”进行《一场由React引起的先后端分离架构的思考与实践》演讲分享。IT 大咖说（微信id：itdakashuo）做为独家视频合做方，经主办方和讲者审阅受权发布。

阅读字数：2715 | 7分钟阅读

嘉宾演讲视频及PPT回顾： suo.im/2A3F57

摘要

以React技术栈为主分享咱们在大规模企业应用建设过程当中遇到的问题，对先后端分离架构的思考，先后端分离的技术方案，先后端分离过程当中的实践经验，先后端分离带来的效果与价值，以及目前存在的问题与将来可能的尝试。

应用的现状

咱们的应用拥有接近100w的用户、3K+的QPS、5亿+的单表数据、万亿级别的资金流，可是一样也面临着诸多问题。

首先是颜值低，换肤受限、没法集成更好的前端框架和组件。而后是先后端的高度耦合使得没法快速的响应业务变化，维护成本也随着应用规模不断攀升，性能方面也受到限制，沟通成本提升。其次是没法跨终端，渲染和跳转强依赖于后端，业务逻辑分散。最后就是强状态性，应用中不少的数据是与用户的会话绑死的，由此形成没有水平伸缩的能力，智能化、自动化、服务化一样受限。

咱们通过思考认为理想的状态应该是这样的，前端方面具有高颜值、个性化、多渠道、多终端的特质；而在后端上须要能作到微服务化、水平伸缩、高可用、自动化甚至智能化。

解决方案-先后端分离

定义

在以前的应用中后端是Java，前端是Browser（浏览器）。可是如今Node出现了，它被包含在大前端中用来替换原来的MVC部分，这样后端就能够脱离出来处理纯服务化的部分，前端也能够专一于纯前台的领域。

各自的职责

前端方面Browser负责数据的展示和收集、事件的响应和处理、DOM的操做、请求的发送和响应的处理。Node用来处理以前经过后端来实现的页面渲染、跳转和数据的传递等功能。然后端方面则专一于业务逻辑的封装、服务接口的提供以及序列化。

整体的方案

从整体上来看前端和后端基于服务化的方式进行交互，经过Json进行数据传递。前端作到组件化、后端实现模块化。

前端的选择

在尝试了不少方案后，咱们选择了React+Redux，由于在React上有必定技术积累，同时国内也有不少的成功案例。可是因为Redux太灵活了，在接触了三周后咱们选择了放弃，转而使用蚂蚁金服开源的基于React的一款展现框架AntD和基于Redux封装的Dva框架。

前端的技术架构

当有一个请求过来后，会经过Component或Route来展现界面。同时也会接收用户的点击事件，每个点击事件都会由dispath来触发一个Action，这以后会产生两种结果。

一种是直接经过reducers函数改变状态state，使与前台关联的model发生变化，由此来改变前台页面。另外一种是调用后台的服务，经过fetch进行后端服务的访问，后台服务返回的数据会由effects函数处理，处理后会交给reducers函数去改变状态state，进而触发前端的组件刷新和渲染。

最后还有一个subscriptions函数是进行前端拦截的，当拦截到一个URL请求以后仍然是触发一个Action，而后又会致使上面的两种变动。

后台的技术架构

后台的逻辑就相对复杂了，咱们采用了分层的技术架构。最底层是基础设施，支持公有云、私有云固然还有本地服务器。而后技术平台层就是通常常见的架构，囊括一些系统权限、工做流、开发框架之类的。基于之上的是通用的服务层，里面有一些报表服务、打印服务，单据服务等。再向上就是业务模块的部分，包含帐户管理、任务管理、自助中心等。最后顶层的就是接口服务层了，它是基于Web Service和Restful Service的。

除了上面的主体框架外，咱们还有服务网关模块，主要是用来作流量控制、安全监控、负载均衡、服务降级与熔断等。另外就是安全运维模块，用来处理身份认证、访问控制、加密解密，审计日志，运维工具等等。

实践经验

先后台交互

目前绝大部分业务表单数据与后台的交互都是使用Fetch方式。另外因为一些遗留系统的问题仍然保留着AJAX方式，并对他进行了一些改进。而文件类的操做好比上传、下载，这些目前使用的是Form提交的方式。

跨域

咱们原来是经过Jsonp来解决的，可是Jsonp的问题是只能支持get请求，参数会被暴露出去。出于安全性的考虑咱们选择了目前主流的CORS方式，只在服务端处理跨域不涉及到客户端。

应有无状态

应用的强状态性是因为过分依赖会话形成的。会话的原理其实就是在Session中存储了一些数据，此时Session被当作缓存来使用；还有一个重要的职责是维护与客户端的联系，让后端能够判断是哪一个客户端发送的请求。而如今咱们采用Token来识别客户端，缓存的职责使用分布式cache来代替。

页面的跳转和参数传递

原先被放在后端经过forward或redirect的跳转、参数传递，如今被前端的Router代替，数据传递经过PayLoad进行。而若是须要依赖后端的一个状态才能进行跳转，那么只须要从后台获取一个消息，前端会根据这个消息来判断跳转的走向便可。

错误处理

咱们的经验是后端统一异常错误捕获，而后进行分类，经过异常错误信息字典来统一贯前台反馈错误信息。前台从后台获得错误的信息后，以此进行前端界面的提示和跳转到错误页面。

安全

经过Token来进行身份的验证，另外为防止Token一直有效，当前台主动登出时会注销Token；同时后台也会根据配置的回话过时时间来自动注销不活动的回话。消息的加解密，系统的访问控制，包括系统功能权限与数据权限也会有专门的服务。

质量的保证

原来的统一测试被分开了，先后端先分别独立mock数据进行单元测试，而后是联调测试，联调测试完后再根据测试用例进行冒烟测试。冒烟测试完成后开发人员的测试算是完了，后续就交由专业的测试人员来进行集成测试，UAT测试。

先后端分离的价值

敏捷、快速响应、提高效率，专业化的分工和协做、提高专业度和研发效率，结构清晰，下降维护成本，先后端各自独立扩展、自由水平伸缩。

将来可期

如今咱们须要考虑下以后还有那些须要增强的地方，好比说服务网关、安全与运维特性的加强，公共组件的进一步提炼与封装，性能与体验的提高，框架开源等等。

今天的分享就到这里，谢谢你们！