前言 这是早读君看过流程最完整的前后端分离的分享。先提醒下，内容很多需要多点耐心。坚持看完必定有收获～～ 正文从这开始～ 结合网易在前后端分离的一些工程实践方案跟大家一起探讨交流一下前后端分离的话题。 今天的内容我们主要从以下几个方面来介绍：
背景介绍 在做前后端分离的解决方案之前我们先简单了解一下前后端分离需要解决的问题 这是一个比较常见的WEB系统的高层级架构模型，包括网易的很多产品基本上也都是采用的这种模型，在这个模型中红色部分表示前端要做的事情，蓝色部分表示后端要做的事情，中间绿线分隔前端和后端可以解耦出来的内容，所以在这种模型下我们可以看到：
所以我们今天分享的议题就专注于寻求一种可以彻底分离绿线上下两部分的解决方案，并以此来提升项目过程的协作效率 在寻求解决方案之前我们还是先来分析一下目前这种模型下存在的一些问题，我们还是从数据接口和视图填充两部分展开 数据接口的问题 1. 缺少可持续维护的接口规范，这个问题主要表现为：
2. 缺少对规范数据的充分利用，没有规范的就不说了，这里针对有规范的情况下，这个问题主要表现为：
3. 缺乏规范覆盖范围的广度，没有使用工具或平台管理规范的就不说了，这里针对使用了这些平台管理规范的情况下，这个问题主要表现为：
视图填充的问题 1. 紧耦合于后端模板环境 需要后端先给配置路由规则、模板环境、预填数据等才能查看页面效果 2. 编译运行后端服务效率低 随着后端完成的功能越来越多本地编译启动后端服务的时间越来越长，严重影响到了前端的开发效率 3. 缺少对视图模板的接口规范 从广义的接口定义看只要不同部分存在相互协作的约束规范即可视为接口进行管理，所以模板视图和模板环境之间也应该做为接口进行规范化管理 解决方案 对于前后端分离所碰到的问题，我想各大企业应该都有适合自己的解决方案，接下来我主要介绍一下网易在这方面目前实践的解决方案，以下是网易目前实施的前后端分离体系的全貌图 该方案是一套集规范、工具、平台于一体的工程化解决方案，主要目标在于帮助产品在已有的项目基础上以最小的成本实现规范化、工程化的高效开发协作体系，通过项目各个环节的密切配合实现一个闭环可验证的体系，以保证各个环节使用的规范的一致性 在上图中我们可以看到整套解决方案以NEI（接口管理平台，网易内部平台名称）为中心，辅以各种效率工具，支持项目从交互到上线的各个环节，接下来我们主要介绍一下这套解决方案是如何来帮助我们解决前后端分离所碰到的问题的 针对数据接口问题 对于数据接口这部分在我们的解决方案中主要是使用接口管理平台来管理接口，但是这个接口管理平台到底要管理哪些接口这个是我们要考虑的问题，接下来我们以WEB系统为例，来看一下哪一些东西可以以接口的形式用接口管理 平台来做规范化管理 这是一个比较常见的带异步数据载入的页面从输入地址到整个页面绘制出来的过程，通过这个过程我们就可以抽取出前后端都需要关注的几个元素，这几个元素之间的关系我们可以用以下方式来标识 这里每个关系对应的前后端关注的内容主要包括：
这样我们就可以知道我们可以利用这个接口管理平台来管理哪些规范，主要包括：
针对视图填充问题 对于视图填充这部分市面上也有比较多的解决方案，如SPA、代理转发、服务器中间层、本地模拟容器等等，在我们的解决方案中我们主要使用了开发阶段的本地模拟容器，选择此方案主要基于以下几个方面考虑：
有了本地模拟容器后我们的前后端分离过程就类似如下图所示 可以看出这种方案下我们的主要思路是在开发阶段引入一个可以解析模板的容器，而产品上线发布的时候仍旧运行在已有的模板环境中，容器对模板的解析能力可按需进行扩展 协作体系 这一部分我们主要介绍一下网易的前后端分离实践方案下各角色的协作方式，在实践方案的指导下我们的项目协作流程就如下图所示 这里前后端的设计过程主要是系统设计过程而非视觉的设计过程，这个流程中我们可以看到在有了交互输出之后，各角色（包括视觉、前端、后端）就可以并行的开始展开各自的流程了，那么我们怎么来保证这其中各角色独立并行的流程顺利、有序、高效进行的呢？下面我们以前后端流程为例来说明，如下图所示 在实践方案中我们可以看到在系统设计阶段各端根据交互稿利用接口管理平台输出接口规范，后续流程各端针对接口规范进行编码、自测，所以这里接口规范是整个方案的核心，是保证各端可以独立并行的先决条件，前面我们对解决方案的分析可以看到单纯只有接口规范还不足以让我们能够顺利高效的完成各端的分离，因此我们的实践方案又提供了多种工具来支持各端分离的过程，其从交互到测试过程之间的完整流程如下图所示 从上面的流程中可以看到在我们实践方案的整个体系中涉及的平台、工具包括：
有了上面对我们实践方案的认识后，我们再来看看在此方案下各角色是如何独立开展各自的流程 前端 这是前端本地开发的整个过程 前端借助于接口管理平台和本地模拟容器从后端独立出来，通过接口管理平台获取到页面预填、异步接口的mock数据（这个过程也可以脱离接口管理平台在本地mock），通过本地模拟容器隔离真实服务环境完成WEB服务、模板解析和请求代理功能。 后端 这是后端本地开发的整个过程 后端（或者测试）借助于接口测试工具从接口管理平台导入规范信息模拟浏览器发起请求进行接口测试，支持缓存历次测试用例数据，帮助导出自动测试代码和用例数据 移动 这是移动端本地开发的整个过程 移动端我们主要借助第三方代理工具或者本地模拟容器来做接口代理，通过工程构建工具直接对接接口管理平台导出所有接口的mock数据，同时根据使用的代理工具的差异导出不同工具的离线或在线配置文件（目前支持Fiddler、Charles） 测试 测试是保证接口管理平台规范一致性的重要环节，项目提测之后首先要做的是一次规范验证，如果规范验证被认为是失败的，那么此次提测会被打回重新检查 这个过程我们主要借助工程构建工具对接接口管理平台导出测试代码和用例数据工程，这个工程可以整个到自动测试集成平台上自动运行，在规范验证失败的时候会通知到相应开发和测试重新检查接口平台定义的规范与实际提测的规范的一致性 操作展示 为了给大家有个直观的感知，我们接下来用一个简单的案例来讲解一下该方案中从交互到测试流程的具体操作（此次专题我们主要分享前后端分离相关的内容，所以这里暂时省略了部署发布的流程，后面有机会可以再进行相关专题的分享），我们以如下图的交互稿为例 系统设计阶段 系统设计阶段主要是各端开发工程师针对产品需求说明、交互设计稿开始设计系统架构、拆分子系统、划分子系统模块、协调端与端之间的接口规范，这个阶段各端根据实际情况输出若干系统设计说明书等文档，除此之外更重要的是输出端与端之间协作的接口规范，而这个规范则可以借助接口管理平台来完成，如下图所示 我们实践方案中的接口管理平台主要以页面为主线来组织整理每个系统，每个页面会使用若干的模板进行填充，可以发送若干的异步接口来操作数据，所有这些页面、模板、接口可以用统一的数据模型进行抽象 接下来我们简单了解一下我们的接口管理平台 页面在接口管理平台上定义就可以如下图所示 根据前面的介绍我们需要定义的规范包括：
定义模板规范 模板规范的定义主要包含两部分：模板文件路径、模板预填数据，在接口管理平台的模板定义如下图所示 模板预填的数据模型由两部分组成：通用数据（所有页面都需要预填）和特有数据（某个页面特有的数据），在接口管理平台我们可以先定义一个这样的通用数据类型 在每个页面可以先导入这个通用数据，然后再定义页面特有数据，这样我们针对所有页面预填数据后期只需要维护一个通用的数据即可 定义接口规范 同模板规范类似，针对接口规范我们也可以先预定义一些通用的数据，如下图所示，我们可以定义一个通用的响应的数据结构 或者定义一个通用的分页请求和响应的数据结构 所有这些通用的数据接口中根据不同接口可变的字段使用可变类型标记，然后我们从交互稿中抽取出页面用到的接口，如下图所示 根据交互稿抽取接口使用的数据结构 最后完成接口规范的定义 定义页面规范 在接口管理平台定义页面规范的过程如下图所示 编码阶段 编码阶段主要是开发工程师根据系统设计阶段的输出，用代码来实现系统，包括技术方案的选型、项目框架的搭建、工具及环境的配置等，而在这个阶段我们则可以借助构建工具来对接接口管理平台帮我们做很多自动化的工作，进而提升我们的开发效率 以下是我们利用构建工具结合项目规范通过对接接口管理平台自动生成项目工程的过程 根据我们的默认规范生成的项目结构中几个主要内容如下图所示 自测阶段 自测阶段主要是各端的工程师验证自己编写的代码的正确性，按角色不同，测试方式也有所有不同，比如对于前端和移动端工程师来说，主要是需要测试各种可能的值会不会影响界面展示；对于后端工程师来说，主要是测试提供给客户端工程师使用的接口的正确性，对不同的输入参数是否返回了预期的结果 前端自测 对于前端自测阶段我们主要提供本地模拟容器来完成自测 根据自动生成的项目工程，通过bower安装依赖包后我们就可以通过以下方式运行模拟容器进行功能自测 代码自动生成的时候也会为工程生成一份本地的mock数据，前端也可以通过配置成离线模式调整本地的mock数据直接查看不同情况下的展示效果 后端自测 对于后端工程师我们主要提供接口测试工具来完成自测 这里的Phosphorus是我们提供的测试工具的名称，是一个Chrome的插件，操作交互类似Postman，具体效果如下图所示 联调阶段 联调阶段主要是在各端完成各自的业务逻辑后进行对接测试 这个阶段相对比较简单，只要各端按照系统设计阶段约定的规范进行，这个阶段只要回归一下即可，下图是本地模拟容器的路由配置文件，这个文件由构建工具自动生成 这个阶段我们只需要调整一下路由配置即可实现单个接口、多个接口、全部接口的联调过程，如下图所示 测试阶段 测试阶段是各端开发工程师完成联调后部署到测试环境提交给测试工程师进行更全面测试的过程，此阶段测试工程师会对接接口管理平台自动生成接口测试用例代码并集成到自动化测试平台运行，如果接口管理平台的接口定义与实际提测的接口不符则此次提测失败，需由开发对照接口管理平台检查接口实现情况，通过该阶段可以保证接口管理平台上的接口定义始终与线上保持一致 通过构建工具对接接口管理平台生成测试代码和用例数据的大致过程如下图所示 部署到持续集成平台Jenkins上 提测时自动触发接口测试，并将测试结果以邮件形式反馈给相关测试工程师和研发工程师，接口的测试报告如下图所示，报告中红色的接口表示测试未通过的接口，需研发工程师再次检查接口管理平台上相关接口的定义 出异常的接口的详细信息如下图所示 专题总结 此次专题主要跟大家分享了网易前后端分离的实践方案，该方案在设计过程中主要从以下几方面进行考量：
目前网易内部已经有250 项目使用了接口管理平台来管理接口规范，完整体系已应用到如网易七鱼云客服、网易云课堂、网易考拉海淘等产品中，该方案也在不断的改进完善中（如接口管理平台对移动端视图规范支持、接口测试工具中的用例数据管理及导出、效率工具数据采集方案、精简本地模拟容器等等），后面等各方面比较成熟后也会考虑开源整套体系接受更大的挑战。 Q |
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
注册
登录
