大前端架构思考与选择

问题

• “一云多端”成为趋势，终端类型越来越多。比如，现在PC Web网站的产品已经有了，现在想扩展APP，小
  程序... ...怎么办？一个直接能想到的方法就是在原来的基础上，为APP等增加API接口，如下图所示：

image.png image.png

这样做是可以的，然而一旦遇到修改，那么要同时修改几个端的代码，很麻烦，不是很完美。

• “前后端分离”成为趋势。一开始的PC Web网站，大多是采用服务端渲染的前后端一体化的模式。随着技术的发展，前后端分离，前端渲染逐渐成为趋势。相应地，前端开发人员也从后端团队中独立出来。
  最近兴起的APP，小程序等，天生就是前后端分离的。
  前端，APP，小程序等各自独立成专门的团队，当然可以满足这种趋势。
  相应地服务端需要为每一个前端部门提供服务，在实践中常常发现，重复的内容很多，有没有办法增加复用？或者说后端能否只对接一个“大前端”部门，剩下的“大前端”部门内部自己解决？

  
  image.png

• 服务端设计的API接口，面向通用服务，还是面向UI？各个端对数据的显示要求不同，给一个公共的API还是分别给不同的API？
  比如，时间显示，PC端可能要求“2018-6-11”的格式，而APP端可能要求“2018/6/11”的格式，接口怎么给？
  再比如，相同功能的一个接口，PC Web端需要20个字段，已经做好了。现在APP端因为屏幕小，只要10个字段就够了，是复用老的API，让APP忍受垃圾信息，还是为APP额外新增一个接口？
  前端和服务端人员可能会有不同意见，这就带来了冲突。大家都有一定的道理，怎么协调？

• 产品经理提出PRD-》UED设计交互稿-》UI设计界面-》后台设计API接口-》后台实现服务-》前后端联调... ...
  以上是一般的开发流程，整个过程还是比较长的。前端在开发完静态页面之后，常常需要等后台服务开发好了，才能联调，这里往往有等待时间的浪费。等后台服务好了，往往提测时间也临近了，气氛很紧张。整个开发体验，往往就是“一半是海水，一半是火焰”。有没有办法缩短这个流程，并且能够让前端不依赖后台服务的完成，独自完成开发？

架构

从现状来看，前后端分离之后，服务端直接给各种端提供服务是很自然能够想到的一种方式。这种方式的优点是简单直接，缺点是不够灵活。因此，考虑在前端和后端之间插入一个中间层，作为前后端之间的桥梁，增加灵活性。
对于这个中间层的称呼，一种是“网关层或者接入层”，这个可能会和后台现有的网关和接入层造成混淆。另一种叫法叫做BFF(Backend for Frontends，为前端而存在的后端)，这种称呼相对比较准确，不会带来混淆。

• 网关层或者接入层

image.png

• BFF(Backend for Frontends，为前端而存在的后端)

image.png

解决方法

• 针对“一云多端”，可以在BFF层做适配。可以考虑MVVM的模式，从服务器来的数据当做Model，在BFF中针对各种端，提供不同的ViewModel。如果数据变了，只要修改Model就可以了。如果要增加一种端，只要增加一个ViewModel就可以了。在这里集中修改，就可以解放各个终端的格式转化工作。

• “前后端分离”之后，各种端可以融合为一个“大前端”，跟后端对话的窗口就是BFF。对于后端来说，只要满足BFF的数据需求就可以了，剩下的事情，就让“大前端”内部自己解决。

image.png

• 服务端设计的API接口，面向通用服务，不需要面向UI。各种端的UI差异，由BFF层负责适配。这样的话，可以让后端更加专注于业务逻辑和数据服务，不需要操心各种端的差异。

• 整个开发流程太长，导致相互等待，造成浪费。针对这个问题，可以考虑在BFF层将开发流程分为两部分。“大前端”作为一个独立开发部门，领先后端一个版本发布周期。
  具体做法是，对于新业务，将Mock数据生成在BFF层，对于各种端来说，相当于后端服务已经好了，可以直接进行联调，不需要等待。这样就把前端对后端的数据依赖去除了，更加灵活。

组织结构

针对上面提到的“大前端”技术架构，需要相应的“大前端”组织结构相对应。

分类思路

• “大前端”是针对整个后端来说的，所以这一层是按照职能来分的

• 在“大前端”下面，是否仍然按照职能来分呢？比如iOS开发，Android开发，H5开发等等。这种分法是可行的，然而收益不是很大。这只是将一个个小部门“组合成”一个相对大的部门，融合度不是很高。
  另外一种融合度更高的划分方法是在“大前端”下划分为“基础服务”，“业务开发”两个子部门。

image.png

• “基础服务”的主要职责是为整个“大前端”部门提供公共服务，公共组件，周边设施等等。根据需要和实际情况可以分为“架构”、“工具”、“组件”等小组

• “业务开发”的主要职责完成业务部门的需求。根据业务发展情况，按照具体业务划分小组。

人员组成

人员还是按照专业分工的角度去找，按照每个角色最少2人，防止单点风险的思路，人员需求如下：
iOS开发：2人
Android开发：2人
H5开发：4人
Node或者Java开发（BFF）：2人

管理

管理方式跟组织结构相适应，采用职能管理和敏捷管理相结合的方式。

职能管理

“大前端”是按照职能分的，跟后端相对应，是技术部下面的一个子部门，按照职能管理方式进行统一管理。

敏捷管理

• “大前端”内部，主要还是按照业务分组的，并且由于BFF的引入，“大前端”内部可以形成开发的闭环，可以考虑引入敏捷管理。
• 要实行敏捷管理，需要产品和测试的支持。根据业务，将相关的产品、设计、测试、开发（“大前端”）组成虚拟团队。

流程

和管理模式相对应，采用瀑布模型和敏捷模型相结合的方式。

瀑布模型

职能型组织，采用瀑布模型的开发流程是合适的。产品部，技术部，测试部一般跟产品开发相关度比较大，按照瀑布模型联系起来。这里考虑前后端分离的开发模式，“大前端”可以独立完成开发闭环，虽然BFF层的数据是Mock的。
另外，大前端版本的开发要求领先后端一个版本以上，这样也方便对于后端服务的测试。简单讲，就是将通常的“后端功能推动型”改为“大前端产品拉动型”

• 产品PRD -》交互/UI设计 -》大前端开发 -》大前端测试 -》大前端内部发布

• 后端服务开发 -》后端测试 -》对接大前端合适版本（主要是BFF的工作，Mock数据改为从后端服务取数据） -》预发环境验证 -》产品上线

敏捷模型

产品，测试，大前端可以考虑合作，按照敏捷模型进行开发。目的是打破部门墙，加强沟通；以业务开发为共同目标，形成合力。

• 开发周期为4周，按照1周预研、2周开发测试、1周重构的比例进行分配。

• 1周预研：这周的主要任务是产品、测试、开发进行充分沟通，对这一期的业务目标达成共识。
  产品的主要工作是讲解需求、原型、设计，进行场景化的描述，定出优先级，确保团队成员对本期业务有正确的理解。
  测试的主要工作是进行测试用例编写，用例评审，最终通过相应工具，将测试用例数据在BFF层形成可执行的Mock数据。
  开发的主要工作是根据业务需求进行技术预研，技术选型，技术设计，任务划分，工作评估等等。完成“计划会议”所要求的内容，将开发任务分配到人。

• 2周开发：按照敏捷的模式进行开发，将业务落地。“每日站会”要坚持开，及时沟通。开发每完成一项，测试就可以直接验证，注重效率。Mock数据由测试统一负责，开发测试用同一套数据，减少误会。这期的结束标志是2周之后的“评审会议”，开发测试向产品演示完成的业务场景。

• 1周重构：这周对应的是敏捷开发里面的“回顾会议”，也是产品、测试、开发进行充分沟通的一周。产品在公司内部试运行一周，进行验收，收集反馈，为下一期的产品设计提供数据支持。开发一方面可以修改bug，更重要的是根据“回顾会议”的内容，进行流程改进，对“技术债”及时进行重构。也可以进行组件开发，提高今后代码的复用度。

特殊之处

Mock数据

• 以前的Mock数据由开发自己负责，要么直接代码写死，要么借助Charles等工具。现在，将Mock数据由测试统一负责，直接生成在BFF层。

• 以前开发要写自测代码，单元测试代码；测试设计出用例数据之后，一般通过流程工具，比如JIRA，要求开发自测。现在的模式是测试专职维护BFF上的Mock数据，将设计的用例转化为实际可用的Mock数据，开发测试用同一套标准，减少流程和沟通上的损耗。

内部版本

• “大前端”开发测试完成的内部版本是半成品，是缺乏后台实际支撑的。内部发版之后，在内部的测试服务器上试运行。（开发版本运行在开发服务器上）。运行需要的数据由测试负责Mock。

• 这个内部版本不能交给实际的用户使用，但是内部的产品，开发，测试可以使用，用来体验，查找bug等等。

• 对于后端开发来说，也很便利，服务开发好之后，有现成的产品用来测试，能省很多事。

• 向老板汇报，或者向客户展示，也很方便，有实际可用的产品可以体验，虽然数据是Mock的。这个跟看word文档，ppt，原型设计，或者UI图，感觉是完全两样的。

• 修改成本小，一般来说，70%的工作在后台开发，30%的工作在“大前端”页面。在内部试用的那一周中，发现的问题，或者需求变更，可以非常容易的在下一个版本迭代完成。这个时候，后台服务的开发还没开始，或者刚刚开始，变更成本很小。

需求拉动

• 以前，想开发一个功能，首先考虑的是后端逻辑是怎么样的。很多时候，要根据后端现有的逻辑，修改页面的展示，交互的顺序等等。是一种“后端功能推动的模式”

• 现在，产品和“大前端”一起，领先后端至少一个迭代以上。遇到需求变更强烈的点，或者争论较大的点，可以考虑让内部版本运行时间长一点，比如领先两三个版本。等产品想清楚了，基本稳定了，后端再上。这样，产品思考问题的重点，就从后端现有的功能转移到客户现实需求上来。“需求拉动型开发模式”，解放了产品的思维，更容易设计出符合客户期望的产品。

• 原来的模式是由后端推着前端走，现在的模式是产品和前端拉着后端走，思维模式是完全不一样的。

• “大前端需求拉动型开发模式”：先有个可用的产品，搞清楚用户喜欢什么，再接上后端实现。

• “后端功能推动型开发模式”：先做需求分析，评估现有后端功能，然后想办法满足客户需求。

• 问题是：“客户或者用户知道自己想要什么吗？需求分析能有效吗？”。相对来讲，如果有个可用的东西，真正用起来了，用户更加容易知道自己想要什么。比如“这个颜色最好改一下”，“这里的按钮碍眼，最好去掉”，“这里我想看更多的信息，最好能加上”。诸如此类

平稳的节奏

• 职能型组织，瀑布式开发模型，有利于控制风险，缺点是时间过长，一般项目至少1个月以上，面对需求变更能力较弱。是一种偏重计划的模式。

• 敏捷开发模式，有利于团队沟通，时间一般较短，一般是2~4周。至于风险，考虑较少，一般是先用了再说，发现问题，下个周期再改。是一种偏重经验的模式。

• 将这两者结合，是希望达到风险和速度的平衡，形成平稳的节奏。将敏捷模型中原本只有4小时的计划会议和回顾会议扩展为一周，是为了让跨部门沟通更充分，让产品验收更全面，降低风险。

• 集中资源做“重要而不紧急的事情”。客户需求很重要，但从想法到落地，并没有那么快。所以发挥“大前端”灵活的优势，让客户早一点看到想法落地，可以超越客户期望。

• “需求变更”本身，也是一种潜在的客户需求。在用上实际可用的产品前，很多时候，客户也不知道自己想要什么。所以，采用两阶段交付的方式，用总开发成本30%左右的“大前端”半成品，挖掘客户的潜在需求，可以提高客户的满意度。

• “可用的产品胜过完备的文档”，虽然是个半成品，站在客户的角度，比word文档，原型设计等更实在，更靠谱。

重视重构

• 技术债怎么办？是立即处理还是等累积到一定程度，再集中处理？

• 让业务停下，专门做重构，这种机会只能说可遇而不可求。

• 将原来敏捷中不超过4小时的回顾会议，扩展为1个星期的重构阶段，正是为了解决技术债不断累积的问题。达到“一边飞行，一边换引擎”的效果。

• 这个阶段，产品和业务也没有停，在试用，在体验，在验证一开始的设计理念是否符合实际。这样就促成了产品和技术的双赢局面。

重视预研

• 这里将敏捷开发中原本4小时的“计划会议”扩展为1周。

• 敏捷模型在介绍时有个假设，那就是需求确定，原型设计，UI资源，前后端接口设计等各种资源都准备好了，相关的可行性，也就是预研都完成了，再开“计划会议”

• 实际情况是，上面提的那些条件往往都没准备好，或者有缺失。开发在进行到一半的时候，经常发现交互逻辑不落地，要改原型。或者发现UI资源缺少，接口定义不合理等等。

• 特别是职能型组织，跨部门沟通，这种信息缺失的事情更容易发生。

• 在正式开发之前，花1周时间，集中进行沟通，进行技术预研，做好充分准备，将问题发现在工程开始之前，对减少不必要的返工是很有意义的。

面向BFF编程

• BFF成了“大前端”和后端之间的抽象接口

• BFF需要做好两边的适配

• 可以考虑将一些公共业务也接过来，实现“轻客户端”的目标

• 自然而然的“热更新”，BFF采用了后端的技术，做的是“大前端”的工作。有修改，更新服务，就生效了，天然的热更新。

• 天生的“跨平台”，BFF这一个地方修改，各种端都能起作用。

• 增加掌控力。BFF由企业维护，而各种端掌握在用户手里。将业务由各种端移到BFF，可以显著提供企业的掌控力。
  这里的边界是：“能服务端（BFF）实现的，就不要放到客户端去，除非遇到严重的性能问题”。

• 注意性能瓶颈，这是关键节点，是前后端的对接点。并且还要注意，对接之后，Mock数据要清除干净，保证生产版本的数据是来自真正的后端。

效率和安全并重

• “大前端”注重效率，快速响应用户的需求变更。

• 后端注重安全，按照瀑布模型或者迭代模型，注重风险管控。

• 通过BFF解耦，让前后端各自独立运行。

思考

• “大前端”是最近起来的概念。和传统的前端相比，“大前端”有两个方面的扩展。一个是端的多样性，比如新增了iOS，Android，小程序，公众号等等。另外一个是往后端扩展，比如Node.js的兴起，或许写后端服务没有Java成熟，写BFF还是可以胜任的。

• “大前端”是相对于传统的前端，iOS，Android，H5等独立小团队而言的。从基础服务+业务支持两个方面，促进团队的融合。在架构，工具链，组件化等几个方面提高复用，提升效率。

• “大前端”是随着前后端分离的趋势逐步提出来的，是相对于后端来讲的，因此，要达到和后端既相互独立、减少依赖，又相互合作、沟通清晰的目标。

• “大前端”概念最初是从阿里传出来的，后来饿了么发展最出名，现在很多公司在用，和微服务一起，接受度也在增加，成为一种趋势... ...

• “大前端”在具体落地的时候，还没有固定的模式，各家的方案也不尽相同。有可供参考的成功案例，没有可供复制的成熟模式。需要根据自身的具体情况，摸索前进。

参考文章

微服务下使用GraphQL构建BFF
前后端分离演进：不能微服务，那就使用 BFF 隔离
一个可供创业公司参考的移动APP服务端架构演进方案
蚂蚁财富的BFF实践
了解BFF架构
大前端技术大会
当我们在谈大前端的时候，我们谈的是什么
如何落地和管理一个“大前端”团队?饿了么大前端团队解密
我理解中的“大前端”/“大无线”
漫极客 CTO 李焱：大前端之路 - 如何用Web技术一统三端（Web、Desktop、Mobile）开发