本文来自飞猪前端@肖北同学，深入中后台方向开发，在飞猪中后台建设中沉淀了大量提效、开箱即用、可视化搭建、体验度量的能力，本文将飞猪侧一年来在商家、行业中后台开发过程中建设总结，欢迎一起交流！
前言
要对用户提供更多的货品和服务，底层的供应链升级和商家能力就显得极为重要。尤其在互联网用户红利燃烧殆尽的情况下，对存量用户市场进一步的挖掘，需要更为低廉的价格和优质的服务。如何签约更多商家和货品？如何能直连商家降低操作成本？如何帮助商家线上运营？在这一系列的问题中，中后台的站点和业务也呈爆发式增长。 与重内容展示且经常迭代的 C 端业务不同，中后台要负责整合内容生产和行业流程，其中包括商家、TP、供应商等外部客户用的商家平台，也涵盖BD、运营、客服、小二等使用的一系列的小二工作台。要在巨大的业务压力下确保稳定和体验，又要为商家的入驻和效能提升做背书，这促使我们依托集团社区现有的底层技术做了一些摸索，并形成了一系列基础能力。文中大多技术都已经开源，文末有相关链接，大家可以按需取用。
挑战与落地
整体上看，随着业务体量的不断增大，前后端人员比例进一步失衡。同时中后台体系内部，存量问题极多，老系统的技术体系混乱，加之从未有过设计师参与需求流程，既导致设计规范不统一，用户体验差，也从侧面增大了飞猪中后台的维护成本。 在这些挑战下，我们立足于规范统一、前端服务化、效能提升、体验治理 这四个核心点 ，从中后台物料建设、移动中后台基建、微前端能力建设、中后台开箱即用、可视化搭建和中后台体验管理这六个方面，推动飞猪的中后台基建能力持续完善，借助社区现有的技术能力，在有限的时间内要完善飞猪的中后台技术体系的同时，也要有效承接业务。
随着飞猪前端服务化的基建加深，大量的非专业前端也具备了入场维护中后台的能力，把行业逻辑还给行业服务端同学，大大降低了沟通成本
核心方向
物料建设
一直以来，飞猪并不存在一套统一的中后台设计方案，这也导致大部分页面的样式和交互、甚至技术选型很大程度上都取决于入场开发的同学，造成了不同行业的中后台，具备不同技术不同样式的问题。 18 年 12 月份，中后台小组正式成立，起初只有三位同学，每人一条业务线，从原维护同学处接手后发现为了能够维护中后台业务，需要同时使用 kissy、xml、antd 等各项技术，前期维护苦不堪言。为此，飞猪中后台小组开始对飞猪的业务进行抽象，并借助集团底层Fusion和ICE提供的能力，我们开始打通业务中积累物料的开发闭环。 我们期望通过物料建设 ，打通各个行业的底层能力，横向拉通，避免不必要的重复建设，也在一定程度上，为未来的技术建设打好基石，统一飞猪的中后台设计体验，也能在持续的开发中逐步积累沉淀，降低开发成本。
image.png
设计规范定制：刚接手中后台的时候，各业务线的样式也千差万别。于财年初与设计师拉通沟通后，我们开始建立飞猪自己的设计规范。同时了解到，后续淘宝、天猫、千牛等新零售的设计规范将全面向 Fusion 统一，考虑到商家未来接触的页面的使用体验一致性，我们开始选择 Fusion 来作为底层，为设计师积累了包括主题色、线条、圆角等的一系列设计规范。也为后续开发业务定了基调。
物料建设：飞猪从零开始进行物料的积累，将飞猪的设计规范和组件规范通过 Fusion 的能力进行了沉淀。目前飞猪积累物料已经应用到各个业务中去，超过 10 个以上的物料 Download 数量已经超过 3k ，在各大项目中进行使用。同时配合物料中心的发布和物料流通的建设，实际可用物料数量已经上涨到两千余个。 Fusion Design Pro：在物料积累足够后，我们也开始针对我们的业务场景，梳理出最能复用的场景，相关场景覆盖了飞猪中后台 80%以上的业务，同时作为新建项目的脚手架，在降低使用成本和统一样式规范上有不可或缺的价值。
image.png
移动中后台
同时随着飞猪对移动端的需求逐步旺盛，我们急需一些技术储备帮助我们构建一个新的飞猪商家 APP，帮助提升商家移动办公的效率。恰逢集团升级 Rax1.0，Fusion Mext 意欲重建，在与 Fusion、Rax、ICE、乐高等相关团队沟通诉求后，我们在 FY20S1 启动了集团层面的移动端中后台的技术建设大方向。 通过移动中后台的集中建设，我们期望能提高移动端中后台的整体开发效率以及提升用户体验
image.png
Mobile Design Pro 建设：S1 期间，在 Fusion 团队的主导下，飞猪设计师以及企业智能的设计师参与共建，就移动端中后台组件&物料的设计规范进行了多次对焦，产出移动端设计原则、设计要素以及页面 pattern 设计的方案，和通用的RaxUI 的设计方案。基于此，产出常见移动端中后台物料一期设计，保证设计的通用性，作为新零售移动端中后台的设计标准赋能各个 BU。同时依托内部共建，完成了移动端中后台工程链接的打通。目前 Mobile Design Pro 已经开始在飞猪、银泰、菜鸟等 BU 开始逐步落地。值得一提的是，通过 Mobile Design Pro 的升级和落地，飞猪的用户满意度也上涨了接近 20%，涨幅明显。
移动端物料建设：在有了移动端设计规范、可靠的 RaxUI 以及高效的源码开发脚手架之后，移动端中后台需求的开发变得轻松起来，飞猪中后台前端终于可以有精力对开发过程中的典型场景进行抽象归纳，打造移动端中后台精品物料以及**“开箱即用”的 Pro 方案来帮助开发者快速产出体验良好的移动端中后台页面**
搭建可视化移动物料建设：2019 年下半年，乐高（阿里内部中后台搭建平台）也启动了移动端搭建链路的建设，这与我们的规划不谋而合，同时乐高移动端搭建的底层选型也是 Rax，源码物料可以很轻松的转换成搭建物料，与乐高团队开启了深度合作，借助乐高服务化能力，打通源码物料与搭建物料，提供可视化物料以及模板，帮助毫无前端开发经验的服务端、测试或产品同学快速搭建移动端中后台应用，搭建模板展示：
legao2.gif
微前端建设
与普通其他淘系部门不同的是，飞猪的行业垂直化非常严重，酒店日历房、签证、机票等等都无法直接套用集团能力，因此在不同行业线上就会出现各种各样特定化服务，例如签证平台、用车 CSR 系统、邮轮基础库等一系列平台，商家往往要频繁切换到不同的域名的系统处理事务，又很难和集团的能力做配合，商家的使用成本极高。 面向以上问题，我们启动了飞猪微前端的建设，力求将飞猪的中后台系统打散再聚合，形成中后台系统自己的组合性和拓展性，从而最后能和集团大中台的已有能力形成合力，为商家提升体验和工作效率。
image.png
主子应用模板建设：基于 Icestark 微前端技术，打造基于商家的产品的组合和扩展，形成新的飞猪商家中心。同时构建飞猪商家统一入口, 逐渐收敛飞猪商家核心系统域名，提供商家系统 SPA 单页的用户体验，提高用户操作效率。飞猪商家子应用资源池由飞猪各个行业中后台子系统组成。每个子应用由独立的开发团队开发和发布，互不影响。根据商家身份实现千人千面，极大提高了不同属性的商家的操作效率。
开箱即用
在设计规范和底层架构逐步统一后，我们开始更加关注开发效能，因此飞猪在业务中自研了 Harmony 与 FormRender（协议驱动表格表单渲染），在飞猪内部也有了大量的落地。但据不完全统计过后发现，集团层面类似的设计不下 10 种，很大程度有些浪费。 基于移动端建设的积累，以及在协议驱动的大量实践，我们参与了集团的开箱即用方面的建设，在其中负责移动端和协议制定的部分。力求在这次集团聚合后，我们能在业务上得到更为通用的开箱即用能力，并在未来能基于此做进一步更深入的建设。
Formily 移动版：中后台业务中，表单表格类开发需求占到整体业务的 40%-50%，pc 中的痛点在移动端依然存在，并且移动端也带来了新的挑战，一码多端能力，既要满足灵活配置，又要业务快速落地。基于以上原因，和飞猪在移动端实践的优势，我们围绕业务诉求与研发痛点，产出标准移动端表单解决方案，补齐 rax 生态建设。标准 JsonSchema 协议下发，动态生成前端页面，赋能非前端同学，上手与学习成本降低。只维护表单协议，开发成本大大降低，并逐步支持一码多端与移动端搭建。
image.png
可视化搭建
经过近一年的努力，飞猪的前端服务化也逐步被飞猪的服务端同学所认可，越来越多的非专业前端参与到前端开发中去。但是源码链路较高的入门门槛和部分领域的复杂性依然在部分业务场景下显得过于繁重，可视化低代码搭建就成为了我们思考的一个方向。 通过可视化搭建，我们能利用低代码的能力，进一步降低中后台的学习成本，再配合上一些其他的建设，真正做到中后台前端开发的去前端化，解放前端资源瓶颈。
协议驱动型搭建物料建设：同时我们意识到，乐高作为 LowCode 平台，很大程度上依然需要掌握一些前端概念才能进行开发。同时我们也收到不少不具备前端能力的同学的平台开发需求，因此我们结合开箱即用的一些表单表格协议的产出，开始在搭建上做试点，实现了 NoJS 的中后台开发，所有页面基本都由 json 进行驱动，通过接口动态下发。通过 Json 配置可以完全实现简单的增删改查的页面，未来也会有更多的尝试在这之上。
体验管理
由于飞猪行业复杂，所面向的商家也很难抽象统一，因此自建的供应链、渠道、商品、交易体系也衍生了中后台很多不同的使用角色和页面类型。这也导致从体验度量层面来看，很难用一套模型治理所有的中后台体验。如何能够提供一套能力，针对所有的中后台用户角色和页面类型进行体验优劣的分析，成为一个亟待解决的问题。
image.png
商家体验管理链路建设：我们整合集团 CCO 线相关的技术产品，结合相关业务需求，产出了商家用研工具，将投放，收集，解决流程串联起来，将用研工具投放到飞猪的任意商家页面中去。
image.png
AEM 能力建设：AEM 是集团前端委员会中后台小组牵头研发的体验管理中台，其目的旨在将各 BU 已有的优秀的体验管理分析能力整合到一起，帮助业务团队在其之上快速搭建面向业务的体验管理平台。同时为了不做重复建设，我们也需要去借助集团当前已有的力量，在经过多方对比后，我们决定使用乐高的 UIPaaS 作为底层，组件上复用 Widgets 组件且部分基于 G2 自建，数据上借助 OneService 的思路，共同完成了我们的平台搭建能力建设。
操作.gif
未来展望
以上就是飞猪中后台小组在 FY20 期间的一些实践和产出，我们花了一年的时间，把飞猪中后台的底层做了治理，修炼内功的同时也在和集团层面保持着高度的共建。 在飞猪多行业、重中台的业务背景下，存在中后台人力的大量缺口。今年我们把大量的前端能力做了服务化的处理，尽可能降低了前端的入门门槛，同时提升了研发的效能。在稳定性和体验方面也通过 AEM 体验管理平台的共建，开始逐步覆盖飞猪内部的系统。下图是飞猪中后台小组在近一年的努力实践与集团共建中夯实的一些能力，如果有任何观点，或者是建议，也欢迎直接指出。
image.png
新的一年，我们将继承上一年的建设，围绕体验、效率、业务价值持续建设。深挖前端服务化的能力，努力降低前端的学习成本和开发成本，做到部分业务去前端化；同时通过中后台体验管理，提升中后台的操作效率和用户体验；并利用现有技术，通过赋能商家业务，真正做到业务先赢。
相关的社区开源产品：
- Fusion —— 协助企业设计师与前端构建中后台设计系统
- ICE —— 简单而友好的前端研发体系
- icestark —— 面向大型系统的微前端解决方案
- qiankun —— 面向大型系统的微前端解决方案
- Formily —— 中后台表单的开箱即用解决方案
- Formily Meet —— 移动端表单的开箱即用解决方案
- FormRender —— 易用的跨组件体系的表单渲染引擎
- AList —— 中后台表格/列表的开箱即用解决方案
Last but not least
飞猪正在招聘前端，目前我们在中后台、开箱即用、 Serverless 、微前端、互动营销、智能化、体验技术、数据度量有不少建设，欢迎有能力同学进来落地技术产生业务价值，想带人同学过来直接带一个方向也是可以的，欢迎关注微信公众号来联系！
本文使用 mdnice 排版
来源：oschina
链接：https://my.oschina.net/u/4396834/blog/4290920