跨境支付平台 XTransfer 的低代码实践：如何与其他中台融合是核心_大前端_闫园园

【AICon】AI 基础设施、LLM运维、大模型训练与推理，一场会议，全方位涵盖！ >>> 了解详情 



 写点什么

采访嘉宾 | XTransfer 高级技术总监田天、技术专家皇志豪

编辑 | 闫园园

据中商情报网 2022 年中国跨境支付市场规模及投融资情况预测分析，近期国内支持政策接连出台，促使跨境电商发展迅速。在此背景下，跨境支付市场也迎来爆发，具体数据显示，预计 2022 年中国第三方跨境支付市场规模将达 12953.42 亿元。

跨境电商的快速发展使得跨境支付平台赛道备受关注。一般来说，跨境电商在交易模式上分为 B2B 和 B2C 。其中，相较于 B2C，B2B 模式交易流程更复杂，这对 B2B 跨境支付的产品体验提出了更高的要求，因此，对于 B2B 跨境支付平台来说，前端的打造显得尤为重要。

近期，InfoQ 采访了 XTransfer（上海夺畅网络技术有限公司），XTransfer 通过分享前端方向的演进过程，带来了其设计驱动开发（Design Driven Development）的概念及相关实践经验。

XTransfer 创立于 2017 年 7 月，聚焦于 B2B 跨境支付，为从事 B2B 跨境电商出口的中小微企业提供提供跨境支付及风控服务。

XTransfer 前端发展的两个阶段

早期，XTransfer 整体技术发展经历了从 0 到 1 的过程。随着业务的拓展和产品的升级，前端方向的演进也经历了两个阶段：

第一阶段：XTransfer 聚焦于 to B 业务，相继推出了 PC 端和 APP 端产品。这时，前端方向更多专注于核心功能的实现，包括收款、转账、提现、换汇等；
第二阶段：随着业务的拓展，更多产品推出，形成满足企业用户需求的产品体系。在支持原有产品功能的基础上，前端方向开始更加注重提升整个产品体系的用户体验。

在这两个阶段中，为了满足具体要求，前端的技术架构也随之发生了变化：

在 XTransfer 产品网站推出第一版时，React 的一个 SPA 应用，就能够支撑起平台的业务需求。随着业务线的不断拓展，单页应用无法承载越来越庞大的业务，“当时整个前端打包最慢的时候，大概要一个小时。”田天回忆道。在这种情况下，XTransfer 团队开始着手对前端整体架构进行优化，“我们应用了微前端架构，拆分成多个应用，再加上一系列打包优化，目前打包速度已经控制在 10 分钟以内”。

然而，虽然前端团队已经在技术架构上做出了改变来应对需求的变化，但前文提到 B2B 模式本身交易流程非常复杂，使得前端架构的构建过程中依然会面临诸多挑战，这些挑战大多来自以下两个方面：

业务侧。第一，多产品化。虽然 XTransfer 平台专注做 to B 业务，但随着本身产品越来越丰富，同样会面临着与 to C 业务一样的多产品化问题。第二，需求复杂化。随着企业用户的增多，用户的不同习惯和需求对原本积累的开发模式造成了很大的冲击。

技术侧。随着产品的快速增加，原有的开发模式遇到了困难。原本小而精的团队可以不断打磨用户体验，但随着产品的不断发展，如何在保证质量的基础上快速开发，是团队的重要课题。与 to C 业务不同的是，to B 业务并不能依靠简单的堆代码、堆人、堆团队的方式去解决这个问题。原因在于 to B 业务面对的用户是同一类型的用户，不同产品要保证类似的功能复杂度，否则用户会明显感受到质量下降，从而带来比较差的用户体验。所以，在原来产品的技术沉淀难以在新产品上快速复制的情况下，对于团队的整体交付能力也提出了大的挑战。

设计驱动开发（Design Driven Development）介绍

为了解决上述问题， XTransfer 提出了设计驱动开发（Design Driven Development，本文中简称 DDD）的概念。

什么是 DDD ？DDD 是 XTransfer 以前端页面功能设计为核心，自研的一套以低代码的方式生成功能页面的前端页面开发框架。其核心能力是通过自定义字段生成表单和页面，UI 设计师和运营人员可以通过拖拽的方式定制需要的页面模版，快速生成功能页面。

“我们 to B 业务的产品，整个开发质量是稳定的，对业务也会有一定的沉淀。从中，其实能够提炼出一些标准的开发流程、开发模板和交互设计。”在谈及提出 DDD 概念的初衷时，田天表示。

同时，田天介绍，在设计其他金融或数字化产品时，一些场景例如风控校验、营销内容等也是必要开发的，且开发流程也类似。所以，从这些场景中抽象出来开发流程，其实可以沉淀成低代码的基础设施，包括做一些可替换的组件。“在这些抽象之上，我们甚至可以提炼出整个业务的标准前端模式，让前端模式具象化，且能够落地，这也就是 DDD 实践的一些案例。”

设计思路

在设计 DDD 时，首先 XTransfer 前端团队已明确的是，无法做一个在所有场景都通用的低代码平台。“低代码本身是为了降本增效，如果追求所有场景适用，反而会增加更多复杂流程。”皇志豪谈到。

从底层实现来说，前端页面是由结构、表现、行为构成，其中，结构和表现可以利用 UI 组件予以抽象，但行为的抽象却是困难的，尤其是在复杂的业务场景中抽象。因此，从软件开发的角度来看，为了平衡复杂度和效率，低代码是在特定场景内的模型抽象。

“我们逐渐把某些场景内的模型抽象出来”，操作人员不需要了解开发知识，简单拖拉拽自定义 UI 组件的方式构建出描述页面排版、内容、样式、属性的 JSON Schema，持久化保存在服务端，当对应页面需要展示时，直接获取持久化存储的 Schema 数据并通过渲染器渲染到页面。

实践之路

首先，在 DDD 技术选型中，XTransfer 前端团队采用了 Formily + Craft.js，Formily 是阿里开源的统一表单解决方案，Craft.js 是一款拖拽式的 JS 框架。

为什么会选择这两个方案？皇志豪表示，在早期的开发过程中，团队遇到了一个特定场景，即用户在 XTransfer 的安信成 CRM 系统中录入客户信息。系统本身提供了一系列的常用字段供用户使用，但依然存在部分 CRM 用户有更多的特定信息需要录入，且不同行业客户的需求点各有不同，而这就需要团队提供动态的字段以及动态表单的抽象模型。因此，在业务场景的驱动下，前端团队开始着手调研多种方案去解决这个问题，包括现有开源方案以及自建等。

“经历一系列方案筛选之后，我们觉得 Formily+ Craft.js 就是理想型的表单解决方案。”皇志豪介绍道。他表示 Formily 能够提供抽象 Form 表单的能力，而 Craft.js 的页面画布与拖拽组件结合的能力，也是团队在完成 DDD 构想必不可少的构件。对于 Craft.js，目前在国内应用的还比较少，“但不妨碍它作为一个很好的构建低代码平台的工具”，皇志豪表示。

总的来说，Formily + Craft.js 可以提供给用户一个拖拽式生成表单的体验，因此也成为 XTransfer 平台自定义表单的技术选型。同时，围绕 DDD 核心逻辑，XTransfer 还有更多前端应用场景可以被适配，在做好组件的抽取与粘合、控制复杂度与灵活性、提供安全隔离的基础上，DDD 将在更多方向上有拓展与演化的空间，例如，在跨境领域，涉及国际化多语言、多客户端的场景开发，可有效提升研发效率，降低开发成本。

当然，在选型过程中，早期 XTransfer 前端团队也考虑到了自建方案，并曾自研了一套自定义表单，但进行调研时，团队经过对比最终选择了已经相对较为成熟的 Formily 。田天对此表示，前端这个领域，需要结合众家之长，形成自己一套独特的开发思路、方法和框架。

应用现状

目前，DDD 的应用场景主要分为三方面，分别为对用户、对运营者以及对开发者：

用户方向。即上文提到的用户在 XTransfer 的安信成 CRM 系统中录入客户信息，用户可以在 CRM 系统中自己操作生成页面，选择使用哪些 label 和表单。
运营方向。在内部运营平台上，运营者可以通过拖、拉、拽等方式生成营销模板，营销模板里可以配置不同的营销活动。
开发者方向。除了上述应用场景之外，开发者方面可以预先定义好相关组件，通过拖拉拽的方式，快速去生成页面的整体框架，再做细节的微调。

“在功能的支持上，对用户来说，不会给他们提供太强的灵活度，相对来说比较标准化，但是对于内部开发者和运营人员来说，功能就相对比较复杂了。”田天补充道。

可以看到，现阶段 DDD 已经成为构建 XTransfer 平台的重要工具。但众所周知，低代码平台更多的还是前端生成页面的能力，因此，在应用过程中会有后端权限管理、数据安全、风控等功能点嵌入到其中。而如何将 DDD 与其他中台能力结合起来，成为团队面临的一个重要技术挑战。

对此，田天坦言，现阶段这部分也在逐步完善中，“第一阶段前端生成页面，同时我们也在考虑，哪些服务能力可以同时嵌进去，比如其他中台服务承载的权限管控等如何与 DDD 结合，也是团队目前正在重点关注的。”

未来规划

谈及未来，除了要不断完善 DDD 与其他中台的整合能力，前端团队对于 DDD 也有着更多期望，这里两位嘉宾也与大家分享了 DDD 中长期规划：

首先，扩大应用场景，例如可以将其应用在页面表单的拖拉拽预生成与搭建、营销活动的配置化生成平台、智能建站等多个场景中。

其次，降低复杂度，使用流程标准化。对于非开发人员来说，用起来会更加简单、方便。

“长期来看，我们想把它做成一个纯粹的平台，真正覆盖更多的场景。”田天表示，目前搭建好 DDD 只是 XTransfer 团队的第一步，真正想让其达到标准化还有很长的路要走，需要不断提高其一系列周边能力，比如监控能力、性能问题定位能力等。“只有解决这些问题，DDD 平台才能更稳健，用起来会更方便，也能够帮助 XTransfer 持续提升用户体验。”

除此之外，在采访中，两位嘉宾也与我们交流了 XTransfer 平台整个大前端领域未来的规划：

第一，产品层面。将平台沉淀的经验推广到更多端，包括 H5、APP、小程序，以及目前相对投入占比较少的桌面端。

第二，战略层面。为了满足海外业务拓展的需求，实现用同一套流程、组件库和开发模式去适应不同国家用户习惯和产品方案。

第三，开发者层面。持续优化开发体验，包括多端复用、升级新工具、技术栈，不断丰富前端基建等，以便给开发人员更好的体验。

写在最后

当下，数字化转型浪潮来袭，产品需求不断增加。如果所有产品都要从头开发，极大的工作量也会成为开发者们的重要挑战，因此也产生了降低开发门槛、简化开发流程的诉求。DDD 作为 XTransfer 团队自研框架，目前已帮助其在保障用户体验的前提下，整体提升了前端研发的开发效率、体验，对于跨境支付行业来说，也是一次重要的尝试和突破。

当然，也正如两位嘉宾在采访中谈到，现阶段的 DDD 也只是开始，真正想达到标准化，还有很长的路要走，仍需要持续不断地解决很多周边问题，包括如何嵌入后端权限管理、数据安全、风控等功能点等。不过在此过程中，团队积累的经验或许能够给更多支付及金融行业产品的构建带来启示，未来，InfoQ 也将持续关注。