应用架构如何降低出错率、提高开发效率

一、整体架构

由于服务器采用微服务的架构进行开发，因此我们使用前端服务器来进行一些简单的处理。例如数据转发、路由跳转、上传文件等非主业务逻辑处理。下图是一个整体的架构图：

如上图所示，前端的工作范围包括浏览器端的交互处理与UI渲染和前端服务器。浏览器端负责数据展示、数据提交等功能，采用react+redux的架构，数据与UI分离，通过数据驱动UI渲染，数据单向流动。另外由于浏览器的安全机制，在跨域请求的时候会有困难或有安全问题，因此需要一个前端服务器来做为一个数据传输中间层，起到代理服务器的作用。

前端服务器负责页面路由跳转、数据转发等功能，采用的是nodeJS开发，这样前端服务器与前端语言统一，便于维护，另外nodeJS也更适合高并发IO处理。前后端分离可以使接口异步化，可以让用户有更好的体验。前后端分离也可以把代码逻辑拆分开，在开发、测试、上线的时候可以更佳的独立。前端服务器采用nodejs的koa框架开发，相较于其他nodejs框架，koa要更佳的灵活与轻便。

二、浏览器端架构设计

前端开发一直在不停的演进，组件化模式也在不停的进化。从iframe拼接页面，到backbone的MVC模式开发，再到后来的MVVM（angularJS）模式开发。Facebook推出的reactJS开辟了一条另类的路径，实现了前端界面的高效率高性能开发。

现在的前端界面开发正在变的越来越复杂，来自服务器端的数据和用户输入的动态数据需要更快的反应到前端页面中。Facebook推出的reactJS正好解决了这一问题。reactJS引入了虚拟DOM的概念：首先，reactJS会在浏览器端通过javascript API实现一套DOM API。之后，reactJS会基于虚拟DOM创建真实DOM。当数据发生变化的时候，reactJS都会重新构建整个虚拟DOM树，之后通过diff算法使用当前虚拟DOM树和上一次的虚拟DOM树进行对比，得到DOM树结构的区别，最后把仅需要求改的部分更新到浏览器的真实DOM结构中。虚拟DOM的设计，在复杂页面小规模渲染的时候，优势是十分明显的，如下图：

如上图所示，从T1时间到T2时间，新增加了一个绿色的点并且删除了一个蓝色的点。通过比对之后，得到真正需要修改的部分，结果是只修改了绿色节点和蓝色节点，其他的节点都没有改变。相较于传统的整页或整块的大范围重新渲染，reactJS的虚拟DOM的设计可以大幅度的提升渲染速度。HBC的业务在前端方面主要是大规模的数据展示和操作，因此reactJS的这种渲染方式更符合HBC的业务需要。另外，reactJS也可以更好的和第三方框架或类库联合使用，例如:D3.js。

redux是一种单向数据流模式的数据框架。和传统的MVC模式不一样，redux和flux一样引入了dispatcher。用户在view上的交互操作并不会直接引起Store的变化，而是通过actions来触发dispatcher上的处理函数来更新Store。之后，reactJS组件再更新到view。这样就可以保证数据是单向流通的闭环。

上面这张图很好的解释了单向数据的流向：

• Redux会维持一个Store，通过关联React与Redux，把Store中的数据state传入到React中。

• React中通过actions来描述各种动作并把数据传入到Store。

• 传入Store中的数据会通过reducer来进行处理并更新State。

• Redux会创建一个初始化State，并把State传递给React。

• 在React组件挂载的时候，会去dispatch(action)到Middleware(中间件)，然后中间件action会去进行异步请求从服务器端取数据。

• 在拿到数据后，会通过dispatch(action)把数据传递给Store，Store通过reducer来进行数据处理和更新State。

• State更新后，会把新的State传递给React，React在拿到新的State后，又回把State一层一层的传递到子组件中，子组件拿到新的State后会进行UI渲染的处理。

• 在React中，如果交互需要对数据进行操作。React中不会直接操作数据，而是通过dispatch(action)把数据传递给Store中，让Redux来进行数据的处理(包括异步处理)。

单向数据流中数据的流向是可以跟踪的，流动单一，在追查问题的时候可以更快捷。redux管理着一个大型的数据仓库，当有数据需要更新的时候，redux会生成一个新的Store，而不是修改原来的Store，再把整个Store给reactJS去渲染。这样做的好处是避免了其他交互对数据的影响，数据总是从源头开始，向下流动，中间环节不会相互影响。使用redux+react方式的开发，可以带来如下优势：

• 首先，单向数据流，可以让代码逻辑性更清晰，增加可维护性。

• 其次，减少reactJS中的回调函数，如果不使用数据框架，在reactJS中可能需要通过回调函数的方式才可以修改父级传入的数据。

• 最后，减小reactJS中state的复杂度，数据统一存储，整个页面只有一个state，便于管理。

三、工程化部署

在前端开发中，性能永远是一个重点。很多地方都会影响到前端性能，比如静态文件过大、网络请求过多等。工程师在部署代码的时候有大量的繁琐的部署工作需要做，例如：图片压缩、代码合并、代码压缩、添加静态文件指纹等。这其中的每一项都要花费大量的时间。工程自动化可以让工程师不再关注资源如何部署到开发或者生产环境中，仅仅通过一条命令就可以完成部署。工程自动化可以在代码编译阶段自动完成代码规范的检查，统一了代码风格，维护更加便利。另外，工程化也可以提高开发效率，gulp可以自动保存本地的代码保存情况，如果有保存就会自动发布到开发环境中，不需要手动部署。

HBC的工程化部署采用的是webpack+gulp组合形式的形式来实现的。webpack是facebook推荐的代码管理工具，支持amd、cmd、commonjs的规范。另外还可以通过 loader和plugin来实现更多的功能，比如代码和图片的合并，压缩、编译等功能。由于在开发过程中，大量使用es6和es7的语法，需要babel-loader来配合编译。由于webpack不能满足所有功能需求，因此配合gulp来辅助实现，例如远程部署代码。

四、总结

从以上内容，不难看出HBC的应用架构有以下优点：

• 联合使用react+redux框架，解耦UI渲染与数据处理，使web开发的逻辑更简单。

• 数据不可变的函数式编程，降低了数据处理的出错几率。

• 自动化工程部署，节约了人力、降低了人为错误，统一了代码规范。

• 组件化开发，提高了代码的复用性，增加了开发效率。

通过组件化开发和规范化开发，降低了项目的维护成本。团队成员之间可以更少阻碍的了解彼此的逻辑。组件化开发也意味着要开发一套通用组件库，在后期，开发效率的提升会来越明显。另外，react的虚拟DOM，非常适合在页面中有大量数据展示并且经常会有局部更新的情况，可以让渲染更快速。工程化部署，释放了人力，自动化完成前端性能优化。这一套架构解决了HBC在前端应用开发中会遇到的绝大部分问题。

关于汇百川信用

汇百川信用（以下简称HBC）是独立的第三方大数据风控和征信服务商，目前有三个企业级平台——风控评分平台、评估报告平台和反欺诈平台。这三个平台前端应用架构，是怎样做到支撑多人协作开发、提升开发效率和高可维护性的呢？下面将为您一一道来。

也许你还想看