据中商情报网对2022年中国跨境支付市场规模及投融资预测分析，近期国内扶持政策相继出台，促使跨境电商快速发展，在此背景下，跨境支付市场也迎来了爆发，具体数据显示，2022年中国第三方跨境支付市场规模有望达到4.2亿元。

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

近日，我们采访了（上海多畅网络科技有限公司），他分享了前端方向的演变过程，并介绍了设计驱动开发（）的理念和相关的实践经验。

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

前端开发的两个阶段

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

在这两个阶段，前端技术架构也为了满足特定需求而发生了变化：

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

不过，虽然前端团队在技术架构上做出了改变来应对需求的变化，但正如上文所说，B2B模式本身的交易流程就非常复杂，这意味着前端架构的构建依然面临不少挑战。这些挑战大多来自于以下两个方面：

业务端。第一，多产品化。平台虽然专注于to B业务，但是随着自身产品越来越丰富，也会面临和to C业务一样的多产品化问题。第二，需求复杂度。随着企业用户的增加，用户不同的习惯和需求对原有的积累式发展模式产生了很大的冲击。

技术面。随着产品的快速增加，原有的开发模式遇到了困难。原有的小而精的团队可以不断打磨用户体验，但随着产品的不断发展，如何在保证质量的同时快速开发是团队面临的重要问题。不同于to C业务，to B业务不能靠简单的堆代码、堆人、堆团队的方式来解决这个问题。原因在于to B业务面对的用户都是同一类型的用户，不同的产品必须保证类似的功能复杂度，否则用户会明显感受到质量的下降，导致用户体验相对较差。因此当原有产品的技术积累难以在新产品中快速复制时，也对团队整体的交付能力提出了很大的挑战。

设计驱动开发简介

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

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

“我们B2B产品整体的开发质量是稳定的，对业务也会有一定的影响，从他们身上我们其实可以提炼出一些标准的开发流程、开发模板和交互设计。”田天在谈及提出DDD理念的初衷时说道。

同时，田甜介绍，在设计其他金融或数字产品时，一些风控验证、营销内容等场景也是需要开发的，开发流程也大同小异。因此，从这些场景中抽象出来的开发流程，其实可以沉淀成一套低代码的基础设施，包括做一些可替换的组件。“基于这些抽象，我们甚至可以细化整个业务的标准前端模型，把前端模型具体化，并实现出来。这些都是 DDD 实践的一些例子。”

设计思路

在设计 DDD 的时候，前端团队首先就明确，打造一个适用于所有场景的低代码平台是不可能的。“低代码本身就是为了降低成本、提高效率，如果适用于所有场景，就会增加更多复杂的流程。”黄志浩说。

从底层实现来看，前端页面由结构、展现、行为三部分组成。结构和展现可以通过 UI 组件进行抽象，但行为抽象比较困难，特别是在复杂的业务场景中。因此从软件开发的角度来说，为了平衡复杂度和效率，低代码是一种在特定场景下的模型抽象。

“我们会在特定场景下逐步抽象模型。”运维人员不需要了解开发知识，只需要简单的拖拽自定义的UI组件，构建描述页面布局、内容、样式、属性的JSON，数据会持久化在服务端，当需要展示对应的页面时，直接获取持久化存储的数据，通过渲染器渲染到页面。

修行之路

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

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

“经过一系列的筛选，我们觉得 .js+Form 才是最理想的表单解决方案。”黄志浩介绍道。他表示，能够提供抽象 Form 表单，以及 .js 能够结合页面画布和拖拽组件的能力，也是团队完成 DDD 理念必不可少的组件。至于 .js，在国内还比较少见，“但不妨碍它成为搭建低代码平台的好工具”，黄志浩说。

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

当然，在选型过程中，前端团队也考虑过自建方案，开发了一套自定义的表单，但在调研时，经过比较，团队最终选择了一个相对成熟的方案。田天说，在前端领域，需要综合多家公司的优势，形成独特的开发思路、方法和框架。

申请状态

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

用户方向。即上面提到的用户在安信诚CRM系统中录入客户信息，用户可以自己在CRM系统中生成页面，选择使用哪些表单。

运营方向。在内部运营平台上，运营人员可以通过拖拉的方式生成营销模板，并在营销模板中配置不同的营销活动。

开发者方向。除了以上应用场景外，开发者还可以预先定义相关组件，通过拖拽的方式快速生成页面整体框架，然后再进行细节的微调。

“在功能支持上，不会给用户太大的灵活性，相对比较标准化，但对于内部的开发者和运维人员来说，功能相对复杂。”田甜补充道。

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

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

将来的计划

谈及未来，除了不断提升 DDD 与其他中台的整合能力，前端团队对 DDD 还有更多的期待。这里两位嘉宾也和大家分享了 DDD 的中长期规划：

第一，拓展应用场景。例如可应用于页面表单的拖拽预生成构建、营销活动可配置生成平台、智能建站等多种场景。

其次，降低复杂性，标准化使用流程，让非开发人员可以更轻松、更方便地使用。

“从长远来看，我们想把它打造成一个真正覆盖更多场景的纯粹的平台。”田甜表示，目前构建 DDD 只是团队迈出的第一步，真正实现标准化还有很长的路要走，需要不断完善它的周边能力，比如监控能力、性能问题定位能力等。“只有解决了这些问题，DDD 平台才能更加健壮，使用起来更加便捷，也能帮助不断提升用户体验。”

此外，在采访过程中两位嘉宾还和我们探讨了平台整个前端领域的未来规划：

第一，在产品层面，我们会把平台积累的经验推广到更多的终端，包括H5、APP、小程序，还有目前投入比重比较小的桌面端。

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

第三，在开发者层面，我们会持续优化开发体验，包括多端复用、升级新的工具和技术栈、不断丰富前端基础设施等，为开发者提供更好的体验。

最后的想法

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

当然，正如两位嘉宾在采访中提到的，现阶段的 DDD 还只是开始，如果真的要实现标准化，还有很长的路要走，还需要不断解决很多周边的问题，包括如何嵌入后端的权限管理、数据安全、风控等功能点。不过在这个过程中，团队积累的经验或许能为更多支付和金融行业产品的建设带来启发，未来我们也会持续关注。

嘉宾介绍：

田田

现担任高级技术总监，主要负责智能金融研发部的管理工作，致力于打造中小外贸企业智能跨境金融服务平台，拥有近20年IT、金融、互联网从业经验。

黄志豪

目前为技术专家，主要负责前端研发，亲身经历前端体系从无到有的搭建，主导实现前端多项核心技术。